Composing

The philosophy behind

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

component and use another variant, but you could take , , and to make another variant.

In the following guide we are going to breakdown the

component to reveal which components are being composed.

Composing within

We wanted the high level of

to mimic the HTML 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

and it’s subcomponents.

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

A

is just a .

Having the finer declarative

subcomponents allows to map it’s own props to the API. This demonstrates how is just a , similar to . This is how completely removes the layer.

The other key component to a

is . is a generic way to take a target and anchor an overlay to that element.

In this example

is the target and is the overlay. Here the API switches from s' children as the overlay to match children as the target. The API makes this change because it exposes the items that need the most control, the overlay s, and allows the adjust the more stagnant trigger via props.

What is

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