[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)

[email protected]

Minor Changes

• Add tabIndex support to all form fields (#1697)

  Ensure the tabIndex prop is available on all form fields, enabling greater control over which elements appear in the keyboard navigation flow.

  In line with MDN guidance, the only supported values are 0 and -1 to ensure best practice for keyboard navigation and assistive technologies.

  EXAMPLE USAGE:

  <TextField tabIndex={-1} />

Patch Changes

• Accordion: Fix data prop parsing (#1698)

  Ensure the data prop is correctly passed through to Stack internally, and validate data-* attributes are not being passed in incorrectly.

[email protected]

Minor Changes

• theme: Expose web fonts href on runtime tokens (#1685)

  Extend the webFonts runtime token to include the href property containing the web font URL.
  This enables custom handling of web fonts beyond injecting the pre-constructed link tag(s).

  EXAMPLE USAGE:

  import seekJobs from 'braid-design-system/themes/seekJobs';
  
  const webFontHrefs = seekJobs.webFonts.map(({ href }) => href);
  
  // => [ "https://www.seek.com.au/static/shared-web/seeksans.css" ]

• Rating: Adopt brandAccent tone (#1693)

  The stars in the Rating component now use the brandAccent tone rather than the rating token from the theme.

  As a result the rating variable has been deprecated and will be removed in a future release.

  MIGRATION GUIDE:

  // styles.css.ts
  import { vars } from 'braid-design-system/css';
  
  export const myStyle = style({
  -  color: vars.foreground.rating,
  +  color: vars.foreground.brandAccent,
  });

• Rating: Add tone support (#1693)

  For usages where the Rating component should not be accentuated, the tone prop can be used to apply neutral tone.

  EXAMPLE USAGE:

  <Rating tone="neutral" />

Patch Changes

• AccordionItem: Fix issue that caused data props to be incorrectly parsed. (#1680)

• MenuRenderer, OverflowMenu: Ensure the menu has a maximum height. (#1679)

• Apply import order rules internally (#1689)

• Remove default React import internally (#1690)

@braid-design-system/[email protected]

Patch Changes

• Apply import order rules internally (#1689)

@braid-design-system/[email protected]

Patch Changes

• Apply import order rules internally (#1689)

• Remove default React import internally (#1690)

[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