[email protected]

Minor Changes

• Table: Add component (#1673)

  EXAMPLE USAGE:

  <Table label="Table example">
    <TableHeader>
      <TableRow>
        <TableHeaderCell>...</TableHeaderCell>
        <TableHeaderCell>...</TableHeaderCell>
        <TableHeaderCell>...</TableHeaderCell>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>...</TableCell>
        <TableCell>...</TableCell>
        <TableCell>...</TableCell>
      </TableRow>
      ...
    </TableBody>
  </Table>

• MenuRenderer, OverflowMenu: Add small size. (#1675)

  Introduce a new small size for MenuRenderer and OverflowMenu.
  This is available via the size prop, which supports the existing standard (default) and small.

  EXAMPLE USAGE:

  <MenuRenderer size="small" ... />

Patch Changes

• Tiles: Fixes a bug where nested Tiles components could calculate their columns incorrectly. (#1667)

  Previously, when using a Tiles component inside another Tiles component, the responsive column calculation could be incorrect in certain scenarios.
  This change ensures nested Tiles elements always calculate their columns correctly.

• Button, ButtonLink: Ensure inner label is full width (#1671)

  Ensuring the inner label element is full width to maintain backwards compatibility with previous block layout.

• Columns: Ensure component occupies available height (#1672)

  Enables Columns content to occupy the available height of the parent container.

• AccordionItem: Simplify internal layout. (#1674)

• Accordion, AccordionItem: Adjust spacing values for improved visual balance. (#1674)

  This change reduces the default spacing within Accordion and AccordionItem components at certain sizes, ensuring the content is better associated with the correct AccordionItem.

  Within the Accordion component, the default space between AccordionItem components has been reduced for size large with dividers, and sizes small and xsmall without dividers.
  Within the AccordionItem component, the space between the label and content has been reduced for sizes large and small.

[email protected]

Patch Changes

• MenuRenderer, OverflowMenu: Fixes a bug where menus could be obscured when rendered inside a Dialog or Drawer component. (#1665)

[email protected]

Patch Changes

• MenuRenderer: Ensure menu is visible, even when its trigger element is inside a container with overflow hidden. (#1658)

• MenuRenderer, OverflowMenu: Provide improved scroll affordance (#1661)

  Introduce scroll affordance to menus, providing a visual cue that there are more items overflowing vertically.

• OverflowMenu: Simplify internal layout. (#1658)

  Refactor the internal layout of OverflowMenu to improve the alignment of the menu with the button.

[email protected]

Minor Changes

• Add new icons to the library (#1655)
  • IconCoverLetter
  • IconChecklist
  • IconDisallow
  • IconBluetooth
  • IconQR

Patch Changes

• Update the following icon assets: (#1655)

  • IconNote
  • IconResume
  • IconDocument
  • IconDocumentBroken
  • IconHeart

• Button, ButtonLink: Ensure label is vertically centered (#1656)

  Fixes a bug where a ButtonLink label would not be vertically centered inside containers that stretch elements to fill the available space, such as Tiles.
  While the issue did not affect Button, the fix was applied to both components to ensure there is no reliance on browser default styling.

• Autosuggest: Ensure content is left aligned (#1642)

  Applies left alignment to Autosuggest dropdown content to ensure consistent alignment, even when inside centered layout containers.

[email protected]

Minor Changes

• IconLicence: Add component (#1640)

  Add IconLicence to icon suite

  EXAMPLE USAGE:

  <IconLicence />

• IconAttachment: Add component (#1635)

  Add IconAttachment to icon suite

  EXAMPLE USAGE:

  <IconAttachment />

• Disclosure: Add size support (#1633)

  Introduce the size prop to the Disclosure component, providing the same options as the Text component.

  EXAMPLE USAGE:

  <Disclosure size="small">...</Disclosure>

Patch Changes

• Standardise icon slot spacing (#1638)

  Normalise the space between the icon slot and component content across the system.

• Rating: Simplify internal layout (#1638)

  Simplify the internal HTML and layout of the Rating component.
  This change should not affect the appearance or behavior of the component.

• Remove lodash dependency (#1639)

• useToast: Ensure content is left aligned (#1630)

  Applies left alignment to Toast content to ensure intended alignment, regardless of other styles applied.

• IconRocket: Update design (#1636)

  Update the design asset for IconRocket

[email protected]

This release is a huge milestone for Braid with upgrades occurring across a number of key areas:

Migrate layout components to CSS Gap

With SEEKs 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.

The result is on average our experiences receive around a 20% reduction in DOM elements, more performant rendering, better composability without the introduction of intermediary elements and a better debug experience in dev tools.

The key tradeoff is the removal of dividers functionality which is explained further here.

Reduce gutter size in seekJobs theme

The size of the gutter token on the seekJobs theme has been reduced from large (i.e. 32px), to medium (i.e. 24px).
This is a semantic token that runs through many system components, and consumer should perform a visual design audit to ensure experiences are laid out as intended.

Other key changes

• Remove support for React v17.x
• Removal of deprecated features

See full changelog below 👇

Major Changes

• Stack, Inline: Consumers need to render li elements (#1626)

  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>

• Autosuggest: Remove deprecated message syntax from suggestions prop (#1626)

  Remove the deprecated message syntax from the suggestions prop in favour of the noSuggestionsMessage prop.

  MIGRATION GUIDE:

   <Autosuggest
     ...
  -  suggestions={{ message: 'No results found' }}
  +  suggestions={[]}
  +  noSuggestionsMessage="No results found"
   />

• Text, Heading: Remove deprecated truncate prop (#1626)

  Remove the deprecated truncate prop in favour of the maxLines prop which accepts a number of lines to truncate the text to.

  MIGRATION GUIDE:

   <Text
  -   truncate
  +   maxLines={1}
   />

• Stack, Tiles: Remove divider support (#1626)

  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.

  MIGRATION GUIDE:

  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>

• Drop support for React 17.x (#1626)

  To enable Braid to leverage newer React APIs, we are no longer providing support for React v17.x.
  React 18 was released in March 2022 and consumers were encouraged to upgrade to this as part of the Braid v32 release in Feb 2023 (which dropped React 16 support).

  Removing support for React 17 allows us to simplify and streamline a lot of our component APIs, which will have downstream improvements on consumer codebases.

  MIGRATION GUIDE:

  Consumers still on v17 should follow the How to Upgrade to React 18 guide.

  For sku consumers who upgraded to Braid v32 and added the "jsx-runtime workaround for ESM incompatibility", this can now be safely removed from their webpack configuration once updated to React 18:

  // sku.config.ts
  {
    dangerouslySetWebpackConfig: (config) =>
      webpackMerge(config, {
  -      resolve: {
  -        fallback: {
  -          'react/jsx-runtime': require.resolve('react/jsx-runtime'),
  -        },
  -      },
      }),
  }

• Button, ButtonLink: Remove deprecated bleedY prop (#1626)

  Remove the deprecated bleedY prop from the Button and ButtonLink components.
  Consumers should use the bleed prop instead, which bleeds based on the selected variant.

  MIGRATION GUIDE:

   <Button
  -  bleedY
  +  bleed
     {...}
   >
     Button
   </Button>

• Radio: Remove deprecated component (#1626)

  Remove deprecated Radio component in favour of RadioGroup with RadioItem children.

  MIGRATION GUIDE:

  - <Radio checked={checked} onChange={handleOnChange} label="Option" />
  + <RadioGroup
  +   value={value}
  +   onChange={handleOnChange}
  +   label="Options"
  + >
  +   <RadioItem value="1">Option</RadioItem>
  + </RadioGroup>

• Column: Prevent growing when content width specified (#1626)

  Ensure that when a column width is specified, the column does not grow or shrink.
  Only a column with no width specified will fluidly adapt to the available space.

  Fixes a bug when all Column components have a defined width, a column specifying content width would incorrectly grow to consume the available space.

• Hidden: Hide content by default. (#1626)

  Hidden will now hide content if no hidden conditions are specified, i.e. if no above, below, or print props are provided.
  Consumers should review usage of the component without these props to ensure Hidden behaves as expected.

• ButtonIcon: Remove deprecated secondary tone (#1626)

  Remove the deprecated secondary tone from ButtonIcon in favour of providing the tone directly to the Icon itself.

  MIGRATION GUIDE:

   <ButtonIcon
  -  tone="secondary"
  -  icon={<IconAdd />}
  +  icon={<IconAdd tone="secondary" />}
   />

• useColor: Align background tokens with Box and vars (#1626)

  Align the available background tokens between Box, vars, and the useColor Hook.
  Removes the surfaceDark and bodyDark tokens that were mistakenly exposed in the useColor Ho...

@braid-design-system/[email protected]

Major Changes

• Bump Braid peer dependency to v33 (#1628)

[email protected]

Patch Changes

• BraidTestProvider: Provide scrollIntoView stub function for jsdom (#1590)

  Fixes an issue where scrollIntoView is not defined in jsdom, causing tests to fail with the following error:

  Error: Uncaught [TypeError: highlightedItem?.scrollIntoView is not a function]
  

• Autosuggest: Update suggestion group heading design (#1581)

  Updating the design of the suggestion group headings, moving from formAccent to secondary tone, from all caps to provided casing, and from xsmall to small size.

• Text, Heading: Ensure maxLines truncates correctly when used as the direct child of a flex container. (#1580)

• Validate accessible field labels in development (#1591)

  Introduce development-time validation for the label prop on form fields to guard against blank values and guide towards the alternative labelling options that are available.
  This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.

• Spread: Apply content width to children (#1583)

  Align the behaviour of children in Spread to be the same as Inline children.
  This makes their behaviour more predicatable when spreading full width elements, while also ensuring child elements are not stretched vertically.

• Icons: Support rendering inline as child of a flex container (#1585)

[email protected]

Minor Changes

• Autosuggest: Optimise automatic scrolling to selected suggestion by using native browser methods. (#1571)

Patch Changes

• Stack, Tiles: Deprecate dividers prop (#1574)

  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.

  Migration Guide

  See the migration guide for details on how to migrate off the dividers prop.

• Autosuggest: Improve handling of suggestionHighlight prop when set to remaining (#1572)

  Fixes a bug in Autosuggest when using suggestionHighlight prop set to remaining.
  If the input contained multiple words, the highlighted portion would be appended to the end of matching suggestions.

• Divider: Ensure full width in flex container (#1574)

  Ensures the Divider component remains full width when used as a flex child inside a flex container.

@braid-design-system/[email protected]

Minor Changes

• LinkableHeading: Add badge support (#1574)

  EXAMPLE USAGE:

  <LinkableHeading level="3" badge={<Badge tone="caution">Deprecated</Badge>}>
    Heading
  </LinkableHeading>