Mar 31, 2023
  • 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;
Nov 9, 2022
  • 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" />
Feb 25, 2022
  • 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>
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
      }
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' }
May 19, 2021
  • Add support for data attribute maps on all components.

    EXAMPLE USAGE:

    <Alert
      data={{
        testId: 'message'
      }}
    />
    
    // => <div data-testId="message" />
Jul 22, 2020
  • Inline: Prevent overlapping of preceding interactive components

May 28, 2020
  • 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.

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>
Apr 17, 2020
  • 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>
Mar 25, 2020
  • 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']}>