braid-design-system
Themeable design system for the SEEK Group
MIT License
Bot releases are visible (Hide)
Published by seek-oss-ci almost 5 years ago
Published by seek-oss-ci almost 5 years ago
17.0.0 (2019-11-21)
Features
Description
We previously only had two breakpoints: mobile and desktop. This renames the existing desktop breakpoint to tablet, and introduces a new desktop breakpoint which is 992px across all themes.
To leverage this, all responsive props now support an optional third value, e.g.:
<Box padding={['small', 'medium', 'large']}>
<Stack space={['small', 'medium', 'large']}>
<Inline space={['small', 'medium', 'large']}>
<Columns space={['small', 'medium', 'large']}>
💥 Breaking Changes
-
Columns: Thecollapseboolean prop has been replaced withcollapseBelowwhich accepts a breakpoint name. -
Hidden: Themobileanddesktopboolean props have been replaced withaboveandbelowprops which accept a breakpoint name. -
Breakpoint Tokens: The
theme.responsiveBreakpointtoken has been replaced with thetheme.breakpointobject, e.g.theme.breakpoint.tablet. -
Typography Tokens: The
desktoptypography tokens have been renamed totablet. -
Theme Utils: The
desktopStylesandresponsiveStylesfunctions have been replaced by the more general purposeresponsiveStylefunction.
Migration Guide
⚛️ Columns
Now that we have multiple breakpoints, you need to specify which screen size you want the columns to collapse below.
-<Columns collapse>
+<Columns collapseBelow="tablet">
⚛️ Hidden
Usages of the old mobile prop should be replaced with below="tablet".
-<Hidden mobile>
+<Hidden below="tablet">
Usages of the old desktop prop should be replaced with above="mobile".
-<Hidden desktop>
+<Hidden above="mobile">
🍬 Breakpoint Tokens
The theme.responsiveBreakpoint token has been replaced with the theme.breakpoint object, e.g. theme.breakpoint.tablet.
Usages of theme.responsiveBreakpoint should be replaced with theme.breakpoint.tablet:
-theme.responsiveBreakpoint;
+theme.breakpoint.tablet;
🍬 Typography Tokens
The desktop typography tokens have been renamed to tablet:
-theme.typography.heading.level.1.desktop.size
+theme.typography.heading.level.1.tablet.size
-theme.typography.text.standard.desktop.size
+theme.typography.text.standard.tablet.size
🍬 Theme Utils
The desktopStyles function has been replaced by the more general purpose responsiveStyle function:
-theme.utils.desktopStyles({ ... });
+theme.utils.responsiveStyle({
+ tablet: { ... },
+});
The responsiveStyles function with positional arguments has been replaced with responsiveStyle (note "Style" vs "Styles") which accepts breakpoint-based styles in an object form:
-theme.utils.responsiveStyles({ ... }, { ... });
+theme.utils.responsiveStyle({
+ mobile: { ... },
+ tablet: { ... },
+});
