Composing

The philosophy behind core-react is to provide the building blocks to create rich components. Isolating component concerns and composing several components together to create features that are design spec and user experience approved.

Having small components allows the creation of bigger components while constraining UX and UI requirements at the same time. You cannot take the Select component and use another Button variant, but you could take OverlayTrigger, Menu, and Button to make another Select variant.

In the following guide we are going to breakdown the Select component to reveal which components are being composed.

Composing within Select

We wanted the high level of Select to mimic the HTML select markup, a parent element with options as children and those children will be in the overlay.

To start we will focus on how the children appear in the overlay.

The overlay content is made entirely with Menu and it’s subcomponents.

Select internally wraps the children with Menu components and takes props to determine conditionally if the search bar or footer Menu components are necessary.

A Select.Option is just a Menu.Item.

Having the finer declarative Menu subcomponents allows Select to map it’s own props to the Menu API. This demonstrates how Select is just a Menu, similar to Dropdown. This is how Select completely removes the Menu layer.

The other key component to a Select is OverlayTrigger. OverlayTrigger is a generic way to take a target and anchor an overlay to that element.

In this example SelectButton is the target and Menu is the overlay. Here the API switches from Selects' children as the overlay to match OverlayTrigger children as the target. The Select API makes this change because it exposes the items that need the most control, the overlay Options, and allows the adjust the more stagnant trigger via props.

What is SelectButton? It's a Button wrapped with some layout CSS that adds an Icon when necessary. It forces certain props onto Button and is open to adjustments by cherry picking props from Select.