Add xxxlarge
to the space scale
Extends the range of the space scale to include xxxlarge
.
This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
Note, the new value is also available as a responsive property.
EXAMPLE USAGE:
<Stack space="xxxlarge">...</Stack> {/* Or responsively: */} <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>
import { atoms } from 'braid-design-system/css'; atoms({ paddingY: 'xxxlarge' })
import { vars } from 'braid-design-system/css'; const space = vars.space.xxxlarge;
Support data attribute boolean values
The data
attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
Stack: Add support for span elements
Stack now supports using span
elements for it's markup, this is useful when using layout components inside elements that should not contain a div
element, e.g. button
.
EXAMPLE USAGE:
<Stack component="span" space="medium"> ... </Stack>
Add wide
breakpoint of 1200px
This adds support for wide
to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle
function, e.g.export const className = style(responsiveStyle({ wide: '...' }));
breakpoints
object, which now exposes the number 1200
via breakpoints.wide
, i.e.{ mobile: 0, tablet: 740, desktop: 940, wide: 1200 }
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' }
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
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>
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>