Why we did this
We've developed a responsive API specifically for the layout components, those that play a role in defining the layers of an interface
This API provides the flexibility to adjust the layout for all breakpoints within the design system without requiring the creation of custom JSX or components.
The primary objective is to simplify the developer experience and minimize the necessity for custom code.
Component supporting this responsive API
- Container
- Stack
- Grid
Breakpoints available
Please refer to this file in order to understand which resolution is handled by each breakpoint.
- phoneOnly
- largePhoneUp
- largePhoneOnly
- largePhoneMax
- tabletUp
- tabletOnly
- tabletMax
- desktopUp
- desktopOnly
- desktopMax
- largeDesktopOnly
Usage
From DX point of view the usage of this API is quite simple. Each responsive props admits a set of the component props which be applied only for the specific resolution interval:
<Container
{...componentProps}
phoneOnly={
{...componentPhoneOnlyProps}
}
largePhoneUp={
{...componentLargePhoneUpProps}
}
largePhoneOnly={
{...componentLargePhoneOnlyProps}
}
largePhoneMax={
{...componentLargePhoneMaxProps}
}
tabletUp={
{...componentTabletUpProps}
}
tabletOnly={
{...componentTabletOnlyProps}
}
tabletMax={
{...componentTabletMaxProps}
}
desktopUp={
{...componentDesktopUpProps}
}
desktopOnly={
{...componentDesktopOnlyProps}
}
desktopMax={
{...componentDesktopMaxProps}
}
largeDesktopOnly={
{...componentLargeDesktopOnlyProps}
}
>
// Content
</Container>
From development perspective, to support this API in any of our layout components, we should separate the responsive properties and return them from a specific function, as shown here. Then we can call the responsive getResponsiveStyles utility passing that function as argument.