@braid-design-system/[email protected]

Minor Changes

• Initial release of the source.macro package (#1362)

[email protected]

Minor Changes

• Button, ButtonLink: Default to neutral ghost in non-legacy themes (#1363)

  By default, a button now has a neutral tone and uses the ghost variant, allowing the visual prominence to be increased or decreased as required, enabling colour to be applied as accents and with purpose, rather than by default.

  <Button />
  // => tone="neutral" & variant="ghost"

  To compliment this, when a tone is purposefully applied, the default variant becomes solid to maximise its impact — allowing the visual prominence to be reduced as needed.

  <Button tone="brandAccent" />
  // => tone="brandAccent" & variant="solid"

  No change for apac and seekBusiness consumers

  Given the fundamental change in approach to colour and usage of such a core component, this change has been isolated to newer themes and does not impact apac and seekBusiness consumers.

  These themes will continue to have a tone of formAccent and a solid variant by default, allowing consumers to adopt this new approach as part of the design uplift when migrating to an updated theme, e.g. seekJobs.

[email protected]

Minor Changes

• Button, ButtonLink: Provide formAccent as the name for undefined tone (#1359)

  Formalise the name of the undefined tone as formAccent, making it more discoverable as an accent available for increased prominence.

  Note: Consumers should only apply this tone where an action should be emphasized explicitly. The undefined value is still valid for buttons that should follow the default button style of the theme.

  EXAMPLE USAGE:

  <Button tone="formAccent">...</Button>

[email protected]

Patch Changes

• Update dependencies for codemod (#1353)

[email protected]

Minor Changes

• seekJobs: Change link colour to neutral (#1347)

  Changing the foregroundColor token for link on the seekJobs theme to align with neutral text.
  Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.

  This affects the following usages across the system:

  • vars.foregroundColor.link
  • Text (using tone="link")
  • TextLink and (TextLinkButton)

Patch Changes

• TextLink, TextLinkButton: Underline regular links in non-legacy themes (#1347)

  To improve affordance beyond primarily being colour, a TextLink (and TextLinkButton) will now always be underlined, in line with best practice accessibility guidelines.

  Given this has not been the case previously, this decision has been applied to non-legacy themes only, as such only affecting consumers of seekJobs, docs and wireframe.

• TextLink, TextLinkButton: Apply themed focus outline (#1347)

  Apply a focus outline using the relevant focus attributes from the theme, bringing TextLink (and TextLinkButton) into line with the focus treatment applied to rest of the system.

• TextLink, TextLinkButton: Reduce weak links to regular font weight (#1347)

  The font weight of a weak link is now reduced to regular weight, reducing the link's visual prominence in addition to following the neutral text colour.

• docs: Lighten soft background tokens (#1347)

  Lighten the brandAccentSoft and formAccentSoft background tokens for the docs theme.

• Dialog, Drawer: Adapt max height to available viewport space (#1352)

  Make use of the new dynamic viewport units for applying a max height to modal elements such as Dialog and Drawer. These new units take into account dynamic browser toolbars that expand and contract as the user scrolls, ensuring the browser interface never obscures the web site content.

  Fix also incorporates fallback for older browsers to use regular viewport units.

[email protected]

Patch Changes

• Drawer: Prevent close button protruding in left position (#1351)

  Fixes an issue where the close button could protrude from a Drawer.
  This was only visible when setting position to left and between a small range of screen widths — above 660px (small content width) and below 768px (tablet breakpoint).

• RadioGroup: Ensure reserveMessageSpace prevents layout shift correctly (#1349)

  Consider the reserveMessageSpace prop as well as message when conditionally applying internal padding between radio list and field message.

[email protected]

Minor Changes

• Page: Add component (#1343)

  The new Page component establishes a consistent page-level layout by managing the relationship between the footer and the main content.

  By default, for pages with limited content the footer will at a minimum be placed at the bottom of the screen, pushed beyond as the page content grows.

  For pages with dynamic content, it is recommended to place the footer out of view by setting the footerPosition prop to belowFold to prevent the footer from popping in and out of view when the page content changes, e.g. toggling between a loading indicator and content.

  EXAMPLE USAGE:

  <Page footer={<Footer />}>
    <Header />
    {/* page content... */}
  </Page>

Patch Changes

• TabPanel: Align focus outline radius to scale (#1345)

  Increase the radius of the focus outline to better align to the scale. A TabPanel is typically a "large" element containing entire sections of UI, so using the large radius to better align to the radius scale.

[email protected]

Patch Changes

• apac, seekBusiness: Increase medium font weight (#1331)

  The unicode range of Thai characters is not satisfied by the preferred fonts specified for the apac theme, resulting in these characters falling through and being rendered by sans-serif — which applies a platform-specific font.
  These system fonts do not have support for the semi-bold weight chosen for medium, resulting in the visual weight of medium text being rounded down to regular — providing no differentiation relative to other text in the UI.

  In addition, due to both Helvetica and Arial not having a medium weight, these fallbacks also have the same problem, even for Latin characters.

  By increasing the value of medium, it will now round to strong when the rendered font cannot satisfy medium — preventing the loss of hierarchy.

  This only affects apac-based themes, namely apac and seekBusiness.

[email protected]

Patch Changes

• Drawer, Dialog: Increase gutter around close button (#1328)

  Fix for a regression where the gutter around the close button was reduced — resulting in visually clashing with the content when scrolling.

[email protected]

Patch Changes

• seekJobs: Update visited link colour tokens (#1323)

  Darken the visited link colour tokens within the seekjobs theme.