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

[email protected]

Minor Changes

• IconEnlarge: Add new component (#1320)

  EXAMPLE USAGE:

  <IconEnlarge />

  The active prop can be used to toggle the icon into the "reduce" state:

  <IconEnlarge active={true} />

[email protected]

Minor Changes

• Drawer, Dialog: Support validation blocking closure of modal (#1318)

  To prevent a Dialog or Drawer from closing, e.g. due to validation, the onClose function can now return false.

  EXAMPLE USAGE:

  <Drawer
    open={open}
    onClose={() => {
      const valid = runValidation();
      if (!valid) {
        return false;
      }
  
      setOpen(false);
    }}
  />

Patch Changes

• TooltipRenderer: Fix arrow overlapping tooltip corner radius (#1316)

  Fix for an edge case where the arrow on a small tooltip could the overlap the corner radius of the tooltip.

• Drawer: Darken backdrop in dark mode (#1316)

  Increase the weight of the backdrop in dark mode to ensure the content is suffiently obscured.

• Drawer: Fix entrance animation from left position (#1316)

  Apply the entrance animation correctly for a Drawer using the left position.
  Also reduced the horizontal overshoot for the transition for a smoother feel.

• Drawer: Increase space between title and description on tablet (#1316)

• Drawer: Align horizontal gutters with PageBlock (#1316)

  Given a Drawer is full width on a mobile device, applying the same horizontal gutter rules as PageBlock makes sense.
  This ensures content on a mobile will have the same available space whether its in the page, or inside a Drawer.

[email protected]

Minor Changes

• PageBlock: Add new component (#1307)

  Provides a top-level page container, constraining the content width (using ContentBlock) while establishing common screen gutters on smaller devices.

  EXAMPLE USAGE:

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

• Button, TextLinkButton: Add aria-label support (#1304)

  Provide support for aria-label, enabling additional context to be given to assistive technologies where context is typically visual.

  EXAMPLE USAGE:

  <Button aria-label="Save job">Save</Button>

• IconMessage: Add new component (#1303)

  Add new IconMessage component.

  EXAMPLE USAGE:

  <IconMessage />

[email protected]

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.

[email protected]

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.