braid-design-system

Patch Changes

• TooltipRenderer: Re-evaluate position when trigger or children changes (#1374)

  Fixes an issue where the tooltip would not re-evaluate its position when the trigger or children prop changed while the tooltip was already open.

Patch Changes

• Preserve new lines in the output code (#1372)

  Before:

  const responsiveValue = useResponsiveValue();
  const isMobile = responsiveValue({
    mobile: true,
    tablet: false,
  });
  const isDesktopOrAbove = responsiveValue({
    mobile: false,
    desktop: true,
  });
  

  After:

  const responsiveValue = useResponsiveValue();
  
  const isMobile = responsiveValue({
    mobile: true,
    tablet: false,
  });
  
  const isDesktopOrAbove = responsiveValue({
    mobile: false,
    desktop: true,
  });
  

Minor Changes

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

Patch Changes

• When animating an SVG circle, it seems that the width changes slightly, which on Loader was causing the right-most one to push off the boundaries of the SVG View Box. (#1370)

  This has been fixed so clipping should no longer occur.

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.

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>
  

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.

Patch Changes

• Update dependencies for codemod (#1353)

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.

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.

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.

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.

Patch Changes

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

  Darken the visited link colour tokens within the seekjobs theme.

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

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.

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

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.

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.

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.

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.