Tiles: Remove columns limit
The columns prop was previously limited from 1 to 6.
With the migration to CSS Grid this limit no longer applies.
Note: Responsive values are also still supported, e.g. columns={{ mobile: 1, tablet: 8 }}.
EXAMPLE USAGE:
<Tiles columns={8}> ... </Tiles>
Stack, Tiles: Remove divider support
As part of migrating our layout components to leverage flex gap, the Stack & Tiles components no longer iterate over their children, making dividers no longer feasible to implement centrally.
While we could have exposed an API to apply this behaviour conditionally, there are edge cases that cannot be handled correctly without consumer-side rendering logic, such as when child components render nothing or a hidden element.
For Stacks with static children you can manually interleave Divider components:
-<Stack space="..." dividers> +<Stack space="..."> <Component /> + <Divider /> <Component /> + <Divider /> <Component /> </Stack>
Or for conditionally rendering children you can return a [React Fragment], including the Divider and child:
-<Stack space="..." dividers> +<Stack space="..."> <Component /> {condition ? ( - <Component /> + <> + <Divider /> + <Component /> + </> ) : null} </Stack>
For Stacks with iterable children you can return a [React Fragment] and conditionally render the Divider component as the first child, before each item (except the first):
-<Stack space="..." dividers> +<Stack space="..."> {items.map((item, index) => ( - <Component>{item}</Component> + <Fragment key={...}> + {index > 0 ? <Divider /> : null} + <Component>{item}</Component> + </Fragment> ))} </Stack>
For Tiles the dividers prop was only applied when showing a single column.
For this you can conditionally render the Divider in a Stack with the same spacing as specified on the Tiles instance, and hide it on breakpoints showing more than one column.
Here is an example of this with static children:
-<Tiles space="..." columns={{mobile: 1, tablet: 2}} dividers> +<Tiles space="..." columns={{mobile: 1, tablet: 2}}> <Component>{item}</Component> + <Stack space="..."> + <Hidden above="mobile"> + <Divider /> + </Hidden> <Component>{item}</Component> + </Stack> + <Stack space="..."> + <Hidden above="mobile"> + <Divider /> + </Hidden> <Component>{item}</Component> + </Stack> </Tiles>
Here is an example of this with iterable children:
-<Tiles space="..." columns={{mobile: 1, tablet: 2}} dividers> +<Tiles space="..." columns={{mobile: 1, tablet: 2}}> {items.map((item, index) => ( - <Component>{item}</Component> + <Stack space="..." key={...}> + {index > 0 ? ( + <Hidden above="mobile"> + <Divider /> + </Hidden> + ) : null} <Component>{item}</Component> + </Stack> ))} </Tiles>
Migrate to CSS gap internally.
With the browser support policy now enabling adoption of CSS gap, Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management.
Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding.
The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or returned null, requiring developers to hoist logic to the parent component.
Stack, Tiles: Deprecate dividers prop
In preparation for migrating Braid layout components to use CSS gap, the dividers prop has been deprecated on Stack and Tiles.
Consumers are encouraged to migrate now in advance of its removal in v33.
See migration guide for details on how to migrate off the dividers prop.
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" />
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, 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>
Tiles: Honour column width for non-breaking content.
BUG FIXES
Tiles
The column width of a tile was not being honoured when its child elements contained non-wrapping/breaking content.