Stack, Inline: Consumers need to render li elements
When setting component to ul or ol on Stack or Inline, consumers need to ensure they render children as li elements.
Previously Braid owned an intermediate HTML element, ensuring it was an li when required.
Moving to CSS gap means child elements are no longer being wrapped, requiring consumers to update their child elements to the correct HTML element, e.g. li.
MIGRATION GUIDE:
<Stack component="ul"> - <Text>Item 1</Text> + <Text component="li">Item 1</Text> - <Text>Item 2</Text> + <Text component="li">Item 2</Text> </Stack>
Columns, Inline: Only respect reverse in combination with collapseBelow
The reverse prop is only respected in combination with collapseBelow.
This ensures the content is reversed on the same row, but follows the document order when collapsed.
If content needs to be reversed without collapseBelow then it should be reversed in the document/source order directly.
Stack, Inline, Columns: Widen component support
With Stack, Columns and Inline no longer adding intermediary elements, the component prop can now accept a wider range of elements.
Valid options are kept to a white list of elements relevant to Stack that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.
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.
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" />
Inline: Support using span elements via component prop
Setting the component prop to span will now ensure all elements controlled by Inline are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.
EXAMPLE USAGE:
<Inline space="medium" component="span"> ... </Inline>
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" />
Inline: Prevent overlapping of preceding interactive components
Inline: Add support for semantic list elements
As already featured on Stack, when rendering <Inline component="ul|ol">, its children will be rendered as li elements.
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>
Inline: Add collapseBelow and reverse props.
Similar to Columns, you can now responsively collapse an Inline into a vertical stack on mobile with the collapseBelow prop.
For example, if you want items to stack vertically below tablet:
<Inline space="small" collapseBelow="tablet"> ... </Inline>
Also similar to Columns, you can now reverse the order of items horizontally. This is particularly useful when combined with align="right".
For example, if you're rendering buttons and you want your primary action on the right on desktop, but at the top on mobile:
<Inline space="small" collapseBelow="tablet" align="right" reverse> <Button>Primary action</Button> <Button weight="weak">Secondary action</Button> </Inline>
Inline: Support vertical alignment
Inline
Vertical alignment is now supported via the alignY prop, e.g. <Inline space="small" alignY="center">.
This also supports responsive values, e.g. <Inline space="small" alignY={['center', 'top']}>