[email protected]

Patch Changes

• RadioItem: Improve checked visual affordance when disabled (#1564)

  Improve the visual affordance of the checked state when disabled across all themes and colour modes.

• MenuRenderer, OverflowMenu: Limit the menu height (#1567)

  Limit the menu to show a maximum of around 10 items before scrolling (a little less so it's evident there is more to scroll to).

• TextLink: Default to weak inside secondary tone (#1561)

  Align the secondary tone with other non-neutral text tones, making the foreground color of links inherit the tone of the wrapping Text component.

  EXAMPLE USAGE:
  In the following example the TextLink will now follow the secondary tone from the wrapping Text component:

  <Text tone="secondary">
    <TextLink href="#">Link</TextLink>
  </Text>

  Previously this would have retained the default link colour from the theme.

• Standardise disabled & critical state across form fields (#1564)

  Improves the consistency of form fields when combining both disabled and critical tone, which includes:

  • Hiding critical borders
  • Hiding message and not reserving space for it unless explicitly providing the reserveMessageSpace prop.

[email protected]

Minor Changes

• Spread: Add component prop support (#1559)

  Enable support for changing the underlying HTML element of the Spread component.

  EXAMPLE USAGE:

  <Spread component="span">...</Spread>

• Spread: Add data prop support (#1559)

  EXAMPLE USAGE:

  <Spread data={{ test: 123 }}>...</Spread>

[email protected]

Minor Changes

• Column: Add support for hide above/below breakpoint (#1553)

  Introduce new hideAbove and hideBelow props on column for responsively hiding columns across breakpoint.

  These props can be used either separately or in combination to optimise content display across different screen sizes.

  EXAMPLE USAGE:

  <Columns space="small">
    <Column>
      <Placeholder height={60} label="Always visible" />
    </Column>
    <Column hideBelow="tablet">
      <Placeholder height={60} label="Tablet and above" />
    </Column>
    <Column hideAbove="mobile">
      <Placeholder height={60} label="Mobile Only" />
    </Column>
  </Columns>

• Badge: Enable usage inside typographic components (#1547)

  A Badge can now be nested inside typographic components, e.g. Text and Heading, as an inline element alongside text.
  Previously a Badge had to be aligned against text using an Inline component, which would result in the Badge dropping below the text when the copy wrapped.

  EXAMPLE USAGE:

  <Text>
    Lorem ipsum velit in <Badge>amet</Badge>.
  </Text>

• Tabs: Add size support (#1550)

  Introduces the ability to customise the size of the Tab components in the tab list.
  Available sizes are standard (default) and small.

  EXAMPLE USAGE:

  <Tabs size="small">
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </Tabs>

• Spread: Add new layout component (#1554)

  Introduce a new layout component, Spread, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.

  EXAMPLE USAGE:

  The Spread component works horizontally by default:

  <Spread space="small" alignY="center">
    <Heading level="4">Heading</Heading>
  
    <OverflowMenu label="Options">
      <MenuItem>First</MenuItem>
      <MenuItem>Second</MenuItem>
    </OverflowMenu>
  </Spread>

  But can be switched to vertical via the direction prop:

  <Spread space="large" direction="vertical">
    <Stack space="small">
      <Heading level="4">Heading</Heading>
      <Text>Text</Text>
    </Stack>
  
    <Text size="small" tone="secondary">
      Date
    </Text>
  </Spread>

Patch Changes

• Move badge slot inside label (#1547)

  Relocate the badge slot inside the label slot enabling the Badge to sit alongside the last word in wrapping lines of text.

[email protected]

Minor Changes

• IconHash: Add component (#1543)

  EXAMPLE USAGE:

  <IconHash />

• Improve internal form field spacing (#1541)

  Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.

  This change impacts the Stack spacing between label and description, the form field itself and the message slots.

• Autosuggest: Add suggestionHighlight prop (#1536)

  Introduces the suggestionHighlight prop, which uses the input value to automatically highlight either the matching or remaining portion of each suggestion.

  EXAMPLE USAGE:

  <Autosuggest suggestionHighlight="matching">

Patch Changes

• Refine the Checkbox, Radio, Toggle & MenuItemCheckbox size (#1541)

  Refines the size of the inline field elements including the RadioItem, Checkbox, Toggle and MenuItemCheckbox components.

  Primarily impacts consumers of the seekJobs theme, seeing a reduction across all sizes.

• Ensure no space above field with undefined label (#1541)

  Fixes an issue where passing undefined as the label to a form field would result in an unwanted space above the field.

• Badge: Ensure label follows correct tone (#1544)

  Ensure that the foreground text of a Badge always follows the correct tone for the background colour.
  Fixes a bug where using a Badge in a List that overrides the default tone would result in the Badge text following the List tone instead of the Badge tone.

• Fix warning in React 18.3.0 when using useToast. (#1534)

• MonthPicker: Reduce space between month and year fields (#1541)

  Reducing the space between month and year fields to improve correlation between the two fields within the greater context of a form.

[email protected]

Minor Changes

• Toggle: Add togglePosition prop (#1509)

  Introduces the togglePosition prop, enabling the toggle to either be leading or trailing its label text.

  EXAMPLE USAGE:

  <Toggle togglePosition="trailing" label="Label" />

• Toggle: Add bleedY prop (#1519)

  Introduces the bleedY prop, enabling vertical bleed for the Toggle component. This removes excess vertical space created by the Toggle input.

  EXAMPLE USAGE:

  <Toggle label="Label" bleedY />

  MIGRATION GUIDE:

  Vertical bleed will become standard for the Toggle component in a future version. Please use the bleedY prop with a value of true and update your layout accordingly.

• Tag: Introduce "addable" support (#1521)

  Tag actions have been extended to now support being “added”.
  A Tag will include a small add icon button when both an onAdd handler and addLabel prop are provided.

  EXAMPLE USAGE:

  <Tag onAdd={() => {...}} addLabel="Add Tag" />

• seekJobs: Use Tahoma for Thai fallback font (#1527)

  Currently in the seekJobs theme, the fallback font for the Thai character set resolves to the default system font which differs by operating system.
  By choosing a deterministic fallback that is available across operating systems, we can use Capsize to improve the alignment with the SEEK Sans web font, and reduce Cumulative Layout Shift for experiences that use Thai.

  Additionally, adding sans-serif as an ultimate fallback in the event that we ever fall all the way through the stack on an obscure operating system.

Patch Changes

• Tag: Add missing click event parameter to onClear prop type (#1516)

• Toggle: Improve label text vertical alignment at small size (#1518)

• Toggle: Remove tick icon & fix antialias haze when selected (#1525)

  Simplying the selected state design by removing the tick icon from the toggle thumb.

  Also fixes the antialias haze that appears around the thumb when selected.

[email protected]

Patch Changes

• Move secondary ButtonIcon tone to icons (#1512)

  Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.

[email protected]

Minor Changes

• PageBlock: Add small and full width options (#1504)

  Add small to available width options of PageBlock to support narrower max width for page content.

  Also introducing full as a width option to enable full width content, while still maintaining consistent screen gutters.

  EXAMPLE USAGE:

  <PageBlock width="small">...</PageBlock>

• ContentBlock: Add support for left alignment (#1507)

  Introduces horizontal alignment support for ContentBlock, enabling content to be constrained to a max width and aligned to the left.

  Useful inside of larger PageBlock or ContentBlock elements when constraining the content for readability or length of form fields.

  EXAMPLE USAGE:

  <ContentBlock align="left">...</ContentBlock>

• ButtonIcon: Add formAccent tone (#1508)

  Introduces support for the formAccent tone on ButtonIcon.

  The new tone sits alongside the existing neutral tone, while the secondary tone is now deprecated and will be removed in a future version (see Migration Guide below).

  EXAMPLE USAGE:

  <ButtonIcon tone="formAccent" icon={<IconAdd />} />

  MIGRATION GUIDE:

  For consumers of the now deprecated secondary tone, you can pro-actively migrate away from it by moving the tone to the icon itself:

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

[email protected]

Patch Changes

• Dependency updates: (#1502)
  • dedent: ^1.5.1
  • clsx: ^2.1.1
  • is-mobile: ^4.0.0

[email protected]

Minor Changes

• IconPromote: Update semantic icon from sparkles to a megaphone (#1500)

  With the introduction of IconAI recently adopting the sparkles artwork (aligning with the industry trend), the IconPromote semantic is now updated to use a megaphone instead of sparkles.

  This change will run through all semantic usages, for example Alert, Notice, etc.

• ButtonIcon: Add small size (#1496)

  Introduce a new small size for ButtonIcon component.
  This size sits alongside the existing standard and large sizes.

  EXAMPLE USAGE:

  <ButtonIcon size="small" icon={<IconEdit />} label="Small size" />

• Add exit animation to Dialog which mirrors the existing entrance animation. (#1489)

• Tag: Add small size (#1497)

  Introduce a new small size for Tag component.
  This size sits alongside the existing standard size, which is the default.

  EXAMPLE USAGE:

  <Tag size="small">Tag</Tag>

Patch Changes

• Ensure all paths through AutoSuggest state updates are handled. (#1486)

• Fix minor bug which prevented the Drawer exit animation from occurring. (#1489)

• Update Capsize dependencies (#1484)

• Adopt small sized ButtonIcon for field actions (#1496)

  Switch over to small (previously standard) sized ButtonIcon for field actions such as clear field, or toggle password visibility.

• Update Crackle CLI dependency (#1480)

• Improve virtual touch target positioning for narrow elements (#1493)

  To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area.
  This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.

@braid-design-system/[email protected]

Patch Changes

• Update Crackle CLI dependency (#1480)