Responsive styles

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.