v17.0.0

17.0.0 (2019-11-21)

Features

• Expand breakpoints to 'mobile', 'tablet' and 'desktop' (#409) (2881482)

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: The collapse boolean prop has been replaced with collapseBelow which accepts a breakpoint name.
• Hidden: The mobile and desktop boolean props have been replaced with above and below props which accept a breakpoint name.
• Breakpoint Tokens: The theme.responsiveBreakpoint token has been replaced with the theme.breakpoint object, e.g. theme.breakpoint.tablet.
• Typography Tokens: The desktop typography tokens have been renamed to tablet.
• Theme Utils: The desktopStyles and responsiveStyles functions have been replaced by the more general purpose responsiveStyle function.

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: { ... },
+});