[email protected]

Minor Changes

• useToast: Improve layout of toasts when multiple toasts are shown (#1782)

  When multiple toasts are shown simultaneously, they now visually stack in a collapsed format that expands on interaction.
  This prevents toasts from obscuring page content while providing users with an easy way to manage and navigate through the recent toast history.

Patch Changes

• RadioGroup: Ensure provided id is assigned to fieldset (#1845)

  Fixes a bug where the provided id was not being passed through to the fieldset element.

• seekJobs, seekBusiness: Update drop shadow palette (#1847)

  Refine the drop shadow palette values of small, medium, and large.
  The shadow values are now softer and more linear in their scale.

• TooltipRenderer: Optimise performance by reducing unnecessary recalculations of the trigger position (#1833)

• seekJobs, seekBusiness: Increase medium font weight (#1843)

  The introduction of Traditional Chinese support means characters in this unicode range are rendered using the default sans-serif font.
  The system fonts that handle these characters only cater for regular and bold weights, resulting in the medium weight of 500 falling back to 400 — resulting in loss of visual hierarchy.

  By increasing the weight of medium to 600, it will now round up to 700 (strong) when the rendered font cannot satisfy medium.

  This only affects seekJobs and seekBusiness themes rendering Traditional Chinese characters, all weights across other character sets remain unchanged.

[email protected]

Patch Changes

• Expand the peer dependency range to support React 19. (#1822)

[email protected]

Patch Changes

• useToast: Clean up internal refactor (#1837)

• Dialog, Drawer: Refactor layout, ensure content area is the full height (#1834)

  This change allows you to spread content to the bottom of a Drawer, for example with a vertical direction Spread.

• Ensure focus rings are consistent across components (#1828)

  Aligns a few edge cases where focus rings were not consistent due to elements or aria roles not captured by the reset.

• BraidTestProvider: Align mock with real IntersectionObserver API (#1837)

• Table: Ensure alignY prop is applied consistently across browsers (#1832)

  Fixes an issue where setting the alignY prop to top would not apply the vertical-align CSS property — instead falling through to our CSS reset which sets vertical-align: baseline (rendering inconsistently across browsers).

@braid-design-system/[email protected]

Patch Changes

• Expand the peer dependency range to support React 19. (#1822)

@braid-design-system/[email protected]

Patch Changes

• Updating React dependencies to v19 (#1822)

[email protected]

Minor Changes

• Box, atoms: Add sticky to position. (#1806)

  EXAMPLE USAGE:

  <Box position="sticky" top={0} ... />

• Box, atoms: Deprecate outline value none, and boxShadow value outlineFocus. (#1810)

  Previously it was recommended to hide an element's outline in favour of using boxShadow="outlineFocus".

  Braid now leverages the outline property directly, managing focus rings of interactive elements as part of its scoped CSS reset.

  MIGRATION GUIDE:

  For styling the focus ring via Box:

  1. Remove usage of outline="none" and boxShadow="outlineFocus"
  2. Refer to focus outlines for guidance on leveraging Braid's focus outline styles.

  - <Box outline="none" className={styles.customFocusStyles} />
  + <Box />

  For styling the focus outline of an element based on the focus of another element, see outlineStyle.

• seekBusiness: Migrate to updated visual language (#1819)

  Migrate seekBusiness theme to new visual language.
  Adopts the seekJobs theme for the latest design standards, rather than the legacy apac theme, while retaining the seekBusiness brand accent colour.

Patch Changes

• ButtonIcon: Ensure the focus outline is styled consistently with other components. (#1810)

  Fix issue which caused the Braid focus outline to show along with the native browser focus outline.

• apac: Deprecate theme in favour of seekJobs theme (#1820)

  MIGRATION GUIDE:

  # App.tsx
  - import apac from 'braid-design-system/themes/apac';
  + import seekJobs from 'braid-design-system/themes/seekJobs';
  
  - <BraidProvider theme={apac} ...>
  + <BraidProvider theme={seekJobs} ...>

• Migrate from custom focus ring visibility to native :focus-visible behaviour. (#1810)

  Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard,
  to prevent showing focus rings on click.
  With the updated Browser Support Policy, we can now leverage the native :focus-visible pseudo class instead.

• Dialog, Drawer: Ensure the focus outline is correctly applied to the title. (#1810)

  Fix issue where focus outline would not be long enough to wrap the entire title text in certain situations.

@braid-design-system/[email protected]

Patch Changes

• LinkableHeading: Simplify DOM elements and improve focus and scroll styling. (#1810)

[email protected]

Patch Changes

• ButtonIcon, TooltipRenderer: Remove unnecessary intermediary element around the tooltip trigger. (#1814)

• BraidTestProvider: Use stubs instead of mocks to fill missing APIs in jsdom (#1809)

  This change allows the BraidTestProvider to be framework agnostic for tests and discourages testing the stubbed browser APIs directly.

@braid-design-system/[email protected]

Patch Changes

• Bumping ink dependency to v5 (#1809)

[email protected]

Minor Changes

• @braid-design-system/codemod has been moved to its own package. (#1801)

  Note: This is technically a breaking change for local migrations, but we expect minimal impact so are releasing this as a minor version change.

  The braid-upgrade command is now no longer part of the braid-design-system package. Instead, braid-upgrade can be run via the @braid-design-system/codemod package.

  Example

  pnpm dlx @braid-design-system/codemod v31.11 "**/*.{ts,tsx}"

Patch Changes

• BraidTestProvider: Provide ResizeObserver & IntersectionObserver stubs to jsdom (#1811)

  Fixes an issue where rendering certain Braid components within a test environment could throw errors due to missing APIs in jsdom, causing tests to fail with the following error:

  ReferenceError: IntersectionObserver is not defined