[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
  

@braid-design-system/[email protected]

Major 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}"

[email protected]

Minor Changes

• MenuRenderer, OverflowMenu: Add automatic menu positioning to ensure menus are placed within viewport bounds. (#1738)

  Menus now detect when they would render outside window boundaries and automatically adjust their position.
  This includes flipping their vertical placement and/or aligning to window edges as needed to ensure menus remain fully visible.

• Autosuggest: Add entrance animation to suggestions dropdown. (#1738)

• TooltipRenderer: Improve tooltip positioning at viewport edges. (#1738)

  Subtly adjusts tooltip edge padding and minimum arrow margins when triggered near window boundaries to ensure optimal arrow placement.

• ButtonIcon: Add optional aria-describedby prop (#1785)

  aria-describedby can be used in addition to label to associate additional descriptive elements with the ButtonIcon.

  EXAMPLE USAGE:

  <ButtonIcon icon={<IconDelete />} label="Delete" aria-describedby="descriptionId" />
  <Text id="descriptionId">Deleted items will be permanently removed after 30 days.</Text>

Patch Changes

• Ensure the input element fills the visual field boundary. (#1738)

  Previously, when a field action such as "clear" or "toggle password visibility" was present, the native input element would shrink to accommodate.

  This change ensures the input does not change size, instead applying padding to prevent the field value from colliding with the action.
  The native browser styles for features such as [:autofill] now visually fill the field.

• Autosuggest, MenuRenderer, OverflowMenu, TooltipRenderer: Refactor the internal layout of floating elements for improved consistency. (#1738)

• Dialog, Drawer: Ensure that only elements outside the Dialog or Drawer are aria-hidden when open (#1792)

  Fixes an issue where the close button inside the Dialog or Drawer was incorrectly inside an aria-hidden region.

• useToast: Simplify internal logic, refining how the theme is applied to Toasts (#1797)

• Autosuggest: Ensure suggestions dropdown is visible, even when Autosuggest is inside a container with overflow hidden. (#1738)

[email protected]

Minor Changes

• Change id prop from required to optional, allowing simplified usage. (#1743)

  Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.

  EXAMPLE USAGE:

  - <AccordionItem id="item-1" ... />
  + <AccordionItem ... />

• Add ref support to table components (#1744)

Patch Changes

• Autosuggest: Fix layout issue causing minor content overflow in certain scenarios (#1746)

• Text, Heading: Support long, unbroken text content when using the maxLines prop (#1739)

• Dialog, Drawer: Ensure MenuRenderer with top placement is positioned correctly (#1779)

  Ensures the menu is correctly positioned when using a MenuRenderer with top placement inside of a Dialog or Drawer.

• MenuItem, MenuItemCheckbox, MenuItemLink: Fixes an issue which could cause MenuItems to require multiple taps to trigger on iOS (#1777)

• TooltipRenderer: Support long, unbroken text content (#1739)

• Support null for badge and icon slots, in addition to undefined. (#1753)

  Previously, badge and icon props could only be explicitly omitted with undefined.
  This change allows passing null.

  EXAMPLE USAGE:

  <Button icon={null} />;

• PageBlock: Ensure component is full width when used inside other layout components (#1754)

• Button, ButtonIcon, ButtonLink: Ensure hit area remains consistent size (#1742)

  Fixes an issue where clicking the edge of buttons would trigger the active animation but not the click event

• Ensure content is not clipped when used inside nested flex containers with stretched sibling elements (#1771)

@braid-design-system/[email protected]

Major Changes

• Run prettier on macro code output (#1770)

  BREAKING CHANGE:

  The code string returned by the macro is now formatted with prettier by default. The resulting code string may be different relative to previous versions of the macro, so please ensure it aligns with your expectations.

  Prettier formatting can be disabled via the formatWithPrettier configuration option2️⃣:

  const babelTransformOptions = {
    plugins: [
      [
        require.resolve('babel-plugin-macros'),
        { source: { formatWithPrettier: false } },
      ],
    ],
  };

[email protected]

Minor Changes

• Add new icons to represent other list types. (#1711)
  Sits alongside IconChecklist which already exists.

  <IconBulletList />
  <IconNumberedList />

  As a result we have deprecated IconList in favour of the more specific list types. IconList will be removed in a future major version.

  MIGRATION GUIDE

  -<IconList />
  +<IconBulletList />

• Add new icons to support rich text editors and formatting. (#1711)

  <IconBold />
  <IconItalic />
  <IconTitle />
  <IconRedo />
  <IconUndo />

Patch Changes

• IconHeart, IconLink, IconLinkBroken: Update design (#1711)