v30.1.0

Jul 8, 2021

Add wide breakpoint of 1200px

This adds support for wide to the following touchpoints:

  • Responsive values, e.g.
    { mobile: 'small', wide: 'large' }
  • Responsive range props, e.g.
    <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
  • The responsiveStyle function, e.g.
    export const className = style(responsiveStyle({ wide: '...' }));
  • The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.
    {
      mobile: 0,
      tablet: 740,
      desktop: 940,
      wide: 1200
    }

v30.0.0

Jun 21, 2021

Support object notation for responsive props

Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.

{ mobile: 'small', tablet: 'medium', desktop: 'large' }

This also means that breakpoints can be skipped.

{ mobile: 'small', desktop: 'large' }

v29.32.0

May 19, 2021

Add support for data attribute maps on all components.

EXAMPLE USAGE:

<Alert
  data={{
    testId: 'message'
  }}
/>

// => <div data-testId="message" />

v27.1.0

May 14, 2020

Stack: Add support for Hidden stack items

You can now responsively hide stack items using the Hidden component while maintaining the correct spacing between all visible elements.

For example, if you wanted to hide a stack item on mobile:

<Stack space="small">
  <Text>...</Text>
  <Hidden below="tablet">
    <Text>...</Text>
  </Hidden>
  <Text>...</Text>
</Stack>

v26.0.0

May 11, 2020

Stack, Inline, Tiles: Flatten fragments when provided as direct children

The following patterns should now work as you might have previously expected:

<Stack space="small">
  <React.Fragment>
    <Text>...</Text>
    <Text>...</Text>
  </React.Fragment>
  <Text>...</Text>
</Stack>
<Inline space="small">
  <React.Fragment>
    <Badge>...</Badge>
    <Badge>...</Badge>
  </React.Fragment>
  <Badge>...</Badge>
</Inline>
<Tiles space="small" columns={3}>
  <React.Fragment>
    <Card>...</Card>
    <Card>...</Card>
  </React.Fragment>
  <Card>...</Card>
</Tiles>

BREAKING CHANGE

While highly unlikely, if you were using a fragment to group unspaced sibling nodes within a Stack, Inline or Tiles element, you'll need to replace it with a Box, for example:

<Stack space="small">
  ...
-  <React.Fragment>
+  <Box>
    <Box>...</Box>
    <Box>...</Box>
-  <React.Fragment>
+  </Box>
  ...
</Stack>
<Inline space="small">
  ...
-  <React.Fragment>
+  <Box>
    <Box>...</Box>
    <Box>...</Box>
-  <React.Fragment>
+  </Box>
  ...
</Inline>
<Tiles space="small" columns={3}>
  ...
-  <React.Fragment>
+  <Box>
    <Box>...</Box>
    <Box>...</Box>
-  <React.Fragment>
+  </Box>
  ...
</Tiles>