chore(deps): Update dependency braid-design-system to v32.x

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
braid-design-system (source)	^31.0.0 -> ^32.0.0

---

Release Notes

seek-oss/braid-design-system

v32.5.0

Compare Source

Minor Changes

• Hide field borders in dark containers (#​1294)

  Reduce visual noise when a form field is displayed in a dark container by hiding the default border.
  As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.

• Add seekJobs theme (#​1281)

  The seekJobs theme encapsulates the system changes necessary to apply and deliver the updated visual design language for SEEK Jobs.
  Through the development of this theme, we have been able improve the fidelity of the various scales in our tokens, while also ensuring that the tokens themselves are consumed and applied more consistently throughout the system itself.

  EXAMPLE USAGE:

  import seekJobs from 'braid-design-system/themes/seekJobs';
  
  <BraidProvider theme={seekJobs}>...</BraidProvider>;

  MIGRATION

  Consumers of the apac theme are not recommended to migrate independently. The seekJobs theme represents an uplifted visual identity that is part of a wider visual uplift.
  Instead, we’ll be guiding the initial teams through a staged migration in coordination with the centralised team process.
  There are some differences in how certain concepts are applied, whether it's the space scale, or Card usage, etc., and we will be documenting these in due course.

  If you would like to talk about migrating, please reach out to us in our #braid-support channel on slack.

v32.4.1

Compare Source

Patch Changes

• Text, Heading: Only show truncate deprecation message when true (#​1289)

  Only show the truncate deprecation message when truncate is provided and set to true

• TextLink, TextLinkButton: Improve underline position for wrapping text (#​1290)

  Refine the underline position to be consistent across the whole typographic hierarchy, ensuring it does not interfere with wrapping lines of text.

v32.4.0

Compare Source

Minor Changes

• Text, Heading: Add maxLines support (#​1286)

  Provide support for limiting the number of lines shown by a Text or Heading component.

  EXAMPLE USAGE:

  <Text maxLines={3}>...</Text>

  MIGRATION:

  With the addition of this feature, the truncate prop is now deprecated and will be removed in a future release.
  Existing consumers should start migrating as below:

   <Text
  -   truncate
  +   maxLines={1}
   />

• Card: Add full height support (#​1285)

  Provide support for making a Card use all available vertical space.
  This is useful when laying out rows of Card elements and having them all be equal height.

  EXAMPLE USAGE:

  <Card height="full">...</Card>

Patch Changes

• TextLink, TextLinkButton: Update underline design (#​1288)

  Uplift the design of the the text underline used on TextLink and TextLinkButton components.

• Column: Support full height content (#​1285)

  Provide support for full height content by growing all Column elements to be uniform in height.

  This will have no effect on the content itself, but enables consumers to create designs of uniform content, such as rows of Card elements.

v32.3.1

Compare Source

Patch Changes

• RadioItem, Checkbox: Fix stacking context behaviour (#​1284)

  A RadioItem and Checkbox previously created a new stacking context with an elevated z-index applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when toggling nested content.

  For example, toggling nested content containing an Autosuggest, would see the list of suggestions list would be overlayed by the next RadioItem on hover.

  To fix this, the z-index is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is checked.

• Textarea: Adjust highlightRange background to support different line heights (#​1279)

  Remove the vertical padding on the highlight element to prevent the background colour overlapping the wavy underline in themes with tighter line heights.

• MenuItemCheckbox: Align checkbox size with a small Checkbox (#​1276)

  Align the size of a MenuItemCheckbox with a small sized Checkbox.

• Checkbox, RadioItem: Fix alignment with updated Badge layout (#​1280)

  Improve layout to work with updated Badge layout which is no longer driven by line height.

• MonthPicker: Reduce space between fields (#​1277)

  Reduce the space between the month and year fields.

v32.3.0

Compare Source

Minor Changes

• Box, atoms: Add borderBrandAccent variants to available boxShadows (#​1274)

  Add borderBrandAccent and borderBrandAccentLight to the available boxShadows, combining the brandAccent and brandAccentLight border colours with the standard border width token.
  Previously, brandAccent was only available with the large border width.

  EXAMPLE USAGE:

  <Box boxShadow="borderBrandAccent" />;
  {
    /* or */
  }
  <Box boxShadow="borderBrandAccentLight" />;

  import { atoms } from 'braid-design-system/css';
  
  atoms({ boxShadow: 'borderBrandAccent' });
  atoms({ boxShadow: 'borderBrandAccentLight' });

• useToast: Design uplift with increased page contrast (#​1269)

  As a means to increase constrast against page content, the design has been updated to be presented on inverted backgrounds based on the color mode.
  The design has also be refined to remove the sidebar/keyline (consistent with Alert), while also applying the tone to the provided message.

• Textarea: Add support for disabling built-in spell checker (#​1272)

  Provide support for disabling the built-in browser spell checker using the native HTML attribute spellCheck.

  When highlighting ranges you may choose to turn spell check off to prevent colliding highlights. This can be done be setting spellCheck to false.

  EXAMPLE USAGE:

  <Textarea spellCheck={false} />

• Add support for caution tone to form fields (#​1271)

  Provide support for applying a caution tone to form fields.
  Specifying this tone will show the IconCaution alongside the provided message.

  EXAMPLE USAGE:

  <TextField tone="caution" message="Caution message" />

• Textarea: Add support for caution highlightRanges (#​1272)

  Providing a tone of caution along with a set of highlightRanges will now apply the caution tone to the text being highlighted.
  To complement this feature, the design has been uplifted to work consistently across both the critical and caution tones.

  EXAMPLE USAGE:

  <Textarea
    tone="caution"
    message="Caution message"
    highlightRanges={...}
  />

• Alert: Design uplift (#​1269)

  Refine the design to use consistent horizontal container inset, aligning content with elements like Card, as well as simplifying the design by removing the sidebar/keyline (consistent with useToast).

Patch Changes

• Button, ButtonLink: Align ghost border width with field border width (#​1274)

  Align the border width of ghost variants with the border width of fields.
  This is the final re-alignment piece to ensure all components use theme scales consistently, improving the ability of Braid themes to deliver cohesive design uplift.

• Stepper: Reduce size of Step indicators (#​1275)

  Refine the design of Step indicators by reducing their size.

• TooltipRenderer: Remove custom background (#​1268)

  Use the correct semantic token for the background of tooltips.
  While there is no visual change, this is just a clean up to ensure the palette usage remains consistent.

v32.2.0

Compare Source

Minor Changes

• Box, atoms, vars: Add small to border radius scale (#​1253)

  Extends the border radius scale to include small as a step below standard.
  This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
  Note, the new value is also available as a responsive property.

  EXAMPLE USAGE:

  <Box borderRadius="small" />;
  
  {
    /* Or responsively: */
  }
  <Box borderRadius={{ mobile: 'small', tablet: 'standard' }} />;

  import { atoms } from 'braid-design-system/css';
  
  atoms({ borderRadius: 'small' });

  import { vars } from 'braid-design-system/css';
  
  const radius = vars.borderRadius.small;

• theme: Add support for defining line heights with lineGap (#​1267)

  Provide support for themes to define their typographic line heights via lineGap.
  This allows us to reason about the white space between wrapping lines of text in the same way we think about Stack spacing.

  For a visual preview of this mental model head over to the Capsize website.

• Add xxxlarge to the space scale (#​1262)

  Extends the range of the space scale to include xxxlarge.
  This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
  Note, the new value is also available as a responsive property.

  EXAMPLE USAGE:

  <Stack space="xxxlarge">...</Stack>;
  
  {
    /* Or responsively: */
  }
  <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>;

  import { atoms } from 'braid-design-system/css';
  
  atoms({ paddingY: 'xxxlarge' });

  import { vars } from 'braid-design-system/css';
  
  const space = vars.space.xxxlarge;

Patch Changes

• theme: Add support for webfonts beyond Google Fonts (#​1255)

  Previously the webFont on the theme was the familyName and was being used to construct a link tag to a Google Fonts stylesheet and provide to consumers via a runtime token.
  To enable fonts beyond Google Fonts, we are changing webFont to be a URL.

  This does not impact existing themes (as there are no themes currently with a web font), and the contract of the runtime token (a constructed link tag) remains unchanged.

• MenuRenderer: Hide overflow on menu (#​1264)

  Fixes a bug where the selection/highlight for a MenuItem could extend outside of the menu itself.

• Badge: Adjust height to support different typographic scales (#​1257)

  Adjusts the height of Badge to be driven by the capHeight of xsmall text plus vertical padding, rather than xsmall line height.
  This enables different typographic scales across themes, while ensuring the Badge height is relative.

• RadioItem, Toggle: Use formAccent border when selected (#​1251)

  Switch to using the formAccent border colour, rather than the field border color, when in the selected state (e.g. checked for RadioItem, on for Toggle).

• Fix error reading standard of undefined (#​1256)

  The use of dynamic property access left some styles exposed to being marked as unused and tree shaken away.

  Refactoring these styles to be explicitly referenced to ensure this will not be the case.

• TooltipRenderer: Refine padding to complement radius scale (#​1263)

  Removes the custom padding on tooltips in favour of using the space scale.
  Previously, a custom value was used to complement the over sized radius which has now be reduced.

• Button, ButtonLink: Improve support for different typographic scales (#​1259)

  Ensure the height of a small sized Button is not reliant on the text line height.

  This enables different typographic scales across themes, while ensuring the Button height is relative.

• Alert, Card, useToast: Decouple keyline width from space scale (#​1266)

  Previously the keyline width on the left determined its width using the space scale.
  Re-aligning this to use the grid unit to enable themes with larger space scales.

• Improve consistency of border radius usage across components (#​1253)

  Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.

  Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.

• Dialog, Drawer: Reduce space between title and description (#​1265)

  Reducing the space between title and description to small to improve association of the header block content

v32.1.1

Compare Source

Patch Changes

• Prevent wrong entry point paths from appearing as suggestions in VS Code. (#​1247)

  For example, wanting to use Braid's CSS variables (vars) VS Code would suggest braid-design-system/dist/css instead of braid-design-system/css.

v32.1.0

Compare Source

Minor Changes

• Disclosure: Add weight support (#​1240)

  Provides support for reducing the visual weight of the Disclosure's call to action. Follows the same contextual styling rules as TextLink.

  EXAMPLE USAGE:

  <Disclosure weight="weak">...</Disclosure>

• Disclosure: Add inline content support (#​1240)

  Provides support for using a Disclosure within a sentence by allowing it to be nested within a typographic component, i.e. Text.

  All size and weight properties will inherit from the parent component.

  EXAMPLE USAGE:

  <Text>
    Preceding text content that is followed by a Disclosure.
    <Disclosure expandLabel="Read more">...</Disclosure>
  </Text>

• Button, ButtonLink, TextLink, TextLinkButton: Add support for trailing icons (#​1242)

  Provide support for choosing the position of the icon slot within a Button or TextLink.

  By default, the iconPosition will be leading the label, but optionally, can be set to trailing.

  EXAMPLE USAGE:

  <Button icon={<IconArrow direction="right" />} iconPosition="trailing">
    Next
  </Button>

Patch Changes

• Show description on form fields when no label provided (#​1239)

  Previously, a FieldLabel without a label would return nothing. However, now that form fields can opt for indirect or hidden labels (via aria-label or aria-labelledby), the description should still be shown if provided.

  Note: The secondaryLabel and tertiaryLabel remain conditional based on the presence of a label. This is due to their location in the layout being anchored off the label.

  EXAMPLE USAGE:

  <FieldLabel description="Description now visible without label" />

• TextLink, TextLinkButton: Increase text weight of weak links (#​1237)

  Increases the text weight of weak links to medium, increasing the affordance against standard text.
  As a result, this makes the weight of all text links consistent.

• Disclosure: Ensure chevron does not wrap alone (#​1240)

  Fixes the scenario where based on copy length and container size, the chevron could wrap independently of the rest of the label. By using a zero-width, non-breaking space, the chevron will now wrap together with the last word of the label.

v32.0.0

Compare Source

The is a huge enablement release that sees the removal of legacy themes and treat our previous styling solution, as well as a migration to our new build tool Crackle.

By moving to Crackle, Braid will now be published as a pre-compiled artefact, no longer requiring TypeScript to be transpiled by consumers. This should see faster build times and clearer boundaries between Braid and consuming applications.

Outside of the removal of treat and the legacy themes, there is no impact on the public API of Braid. However, if a consuming web app is reaching into Braid internals, this will no longer work and require code changes.

For these cases, to support teams in upgrading we have provided a Compiled Braid Migration Guide based on patterns observed in code bases.

For more detail on the specific changes in this release, please read on.

Major Changes

• Drop support for React 16. (#​1229)

  To support the pre-compilation of Braid, it is now a requirement that consumers are on React 17 or later.
  Originally the plan was to drop React 17 as well, however the team has been able to maintain support for a little longer — but there is a catch (see migration guide below).

  MIGRATION GUIDE:

React 16 consumers

As this version is no longer supported it is a requirement that consumers upgrade.
For more information on the differences between v16 and v17, see the React blog.
We strongly encourage teams to take this opportunity to upgrade to v18 as well.

React 17 consumers

The way React 17 exposes the jsx-runtime is not compatible with ESM, which means the bundler will need instructions on how to resolve the import.
This can be done by adding a fallback module resolve rule to the webpack configuration.

For sku consumers, this can be done as follows:

// sku.config.ts
{
  dangerouslySetWebpackConfig: (config) =>
    webpackMerge(config, {
      resolve: {
        fallback: {
          'react/jsx-runtime': require.resolve('react/jsx-runtime'),
        },
      },
    }),
}

We recommend using webpack-merge to ensure both configurations are deep merged correctly.

Note: This rule can be removed after upgrading to React 18, which has ESM support.

React 18 consumers

No action required.

• Playroom imports are now formalised entrypoints rather than path imports, and as such no longer require the file path extensions to be provided. (#​1229)

  EXAMPLE USAGE:

  // playroom.config.js
  module.exports = {
    frameComponent: require.resolve(
      'braid-design-system/playroom/FrameComponent',
    ),
    components: require.resolve('braid-design-system/playroom/components'),
    snippets: require.resolve('braid-design-system/playroom/snippets'),
    scope: require.resolve('braid-design-system/playroom/scope'),
  };

• Remove legacy themes: catho, occ and seekAnz (#​1229)

  The seekAnz theme facilitated consumers migrating like-for-like from seek-style-guide, while the catho and occ themes intended to enable a specific use case that never eventuated.

  Removing these themes allows us to move faster with upcoming theme uplift work.

  MIGRATION GUIDE:

  Any remaining consumers of the catho, occ or seekAnz themes should migrate to the apac theme like so:

  -import seekAnz from 'braid-design-system/themes/seekAnz';
  +import apac from 'braid-design-system/themes/apac';

• Remove treat support (#​1229)

  Treat has been deprecated for nearly 2 years, superseded by vanilla-extract.
  .treat.ts files can no longer be used for styling and should be converted to .css.ts (vanilla-extract) stylesheets.

• Remove experimental color-mode check script (#​1229)

  The experimental script for checking which color mode to render has been formalised to an entrypoint specific to the mechanism that is being used — in this case the query parameter.
  In the future we may add other mechanisms, such as local storage for example, but for now all existing consumers should have been migrated to the query-param check.

  MIGRATION GUIDE:

  - import { __experimentalDarkMode__ } from 'braid-design-system/color-mode'
  + import { colorModeQueryParamCheck } from 'braid-design-system/color-mode/query-param'

---

Configuration

📅 Schedule: Branch creation - "before 8am on the first day of the month" in timezone Australia/Melbourne, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3483ac7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

[askoufis]

We've swapped to macos-13 github agents. The reasoning behind this is as follows:

• Braid v32 ships with a bit more CSS than v31
• This has brought the CSS above VE's compression threshold
• The CSS is compressed with gzip which includes some bytes in the file header for the OS
• This causes the bundle to differ between MacOS and Ubuntu (the OS of the agents), causing a different chunk hash in the braid-design-system fixture snapshot
• AFAIK there is no way to workaround this, other than using MacOS on the github agent

[askoufis]

Still hesitant to merge this. The fact that there's so much more CSS in the build output is suspicious.

[michaeltaranto]

👏

[askoufis]

The extra CSS is being caused by a combination of compiled Braid and webpack. We're accepting this tradeoff for now, but may revisit it in the future.