braid-design-system@32.20.0

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.

braid-design-system@32.19.1

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.

braid-design-system@32.19.0

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

braid-design-system@32.18.1

Patch Changes

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

braid-design-system@32.18.0

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/source.macro@0.1.2

Patch Changes

• Update Crackle CLI dependency (#1480)

@braid-design-system/docs-ui@2.1.1

Patch Changes

• Update Crackle CLI dependency (#1480)

• MenuButton: 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@32.17.0

Minor Changes

• Update semantic icon assets. (#1481)

  IconCritical: Move from circle to diamond outline. Increase the visual distinction from IconInfo.
  IconLanguage: Move from globe to characters. Better represents the concept of language. Previous asset available as IconGlobe.

  MIGRATION GUIDE

  As the above are updates to semantics icons, consumers are unaffected if their usage follows the icon's semantic intent.
  For those choosing the icon based on its visual appearance, please review the usage and consider decoupling from the semantic system icon for safer upgrades.

• Add new icons to the library (#1481)

Patch Changes

• Update Capsize dependencies (#1477)

braid-design-system@32.16.3

Patch Changes

• Update Capsize dependencies (#1456)

• Checkbox: Improve tri-state handling (#1458)

  Fixes a bug in tri-state Checkbox where transitioning from mixed to checked could result in the visual presentation being out of sync with the desired state.

braid-design-system@32.16.2

Patch Changes

• Text, Heading: Fix maxLines cropping of decending characters (#1451)

  Fixes a bug when using -webkit-box, where the descender on the last line of text could be cropped based on the combination of line height and font size.