MenuRenderer: Ensure menu is visible, even when its trigger element is inside a container with overflow hidden. (#1658)

MenuRenderer, OverflowMenu: Provide improved scroll affordance (#1661)

Introduce scroll affordance to menus, providing a visual cue that there are more items overflowing vertically.

OverflowMenu: Simplify internal layout. (#1658)

Refactor the internal layout of OverflowMenu to improve the alignment of the menu with the button.

Update the following icon assets: (#1655)

Button, ButtonLink: Ensure label is vertically centered (#1656)

Fixes a bug where a ButtonLink label would not be vertically centered inside containers that stretch elements to fill the available space, such as Tiles. While the issue did not affect Button, the fix was applied to both components to ensure there is no reliance on browser default styling.

Autosuggest: Ensure content is left aligned (#1642)

Applies left alignment to Autosuggest dropdown content to ensure consistent alignment, even when inside centered layout containers.

IconLicence: Add component (#1640)

Add IconLicence to icon suite

EXAMPLE USAGE:

IconAttachment: Add component (#1635)

Add IconAttachment to icon suite

EXAMPLE USAGE:

Disclosure: Add size support (#1633)

Introduce the size prop to the Disclosure component, providing the same options as the Text component.

EXAMPLE USAGE:

Standardise icon slot spacing (#1638)

Normalise the space between the icon slot and component content across the system.

Rating: Simplify internal layout (#1638)

Simplify the internal HTML and layout of the Rating component. This change should not affect the appearance or behavior of the component.

Remove lodash dependency (#1639)

useToast: Ensure content is left aligned (#1630)

Applies left alignment to Toast content to ensure intended alignment, regardless of other styles applied.

IconRocket: Update design (#1636)

Update the design asset for IconRocket

Stack, Inline: Consumers need to render li elements (#1626)

When setting component to ul or ol on Stack or Inline, consumers need to ensure they render children as li elements. Previously Braid owned an intermediate HTML element, ensuring it was an li when required. Moving to CSS gap means child elements are no longer being wrapped, requiring consumers to update their child elements to the correct HTML element, e.g. li.

MIGRATION GUIDE:

Autosuggest: Remove deprecated message syntax from suggestions prop (#1626)

Remove the deprecated message syntax from the suggestions prop in favour of the noSuggestionsMessage prop.

MIGRATION GUIDE:

Text, Heading: Remove deprecated truncate prop (#1626)

Remove the deprecated truncate prop in favour of the maxLines prop which accepts a number of lines to truncate the text to.

MIGRATION GUIDE:

Stack, Tiles: Remove divider support (#1626)

As part of migrating our layout components to leverage flex gap, the Stack & Tiles components no longer iterate over their children, making dividers no longer feasible to implement centrally.

While we could have exposed an API to apply this behaviour conditionally, there are edge cases that cannot be handled correctly without consumer-side rendering logic, such as when child components render nothing or a hidden element.

MIGRATION GUIDE:

For Stacks with static children you can manually interleave Divider components:

Or for conditionally rendering children you can return a [React Fragment], including the Divider and child:

For Stacks with iterable children you can return a [React Fragment] and conditionally render the Divider component as the first child, before each item (except the first):

For Tiles the dividers prop was only applied when showing a single column.

For this you can conditionally render the Divider in a Stack with the same spacing as specified on the Tiles instance, and hide it on breakpoints showing more than one column.

Here is an example of this with static children:

Here is an example of this with iterable children:

Drop support for React 17.x (#1626)

To enable Braid to leverage newer React APIs, we are no longer providing support for React v17.x. React 18 was released in March 2022 and consumers were encouraged to upgrade to this as part of the Braid v32 release in Feb 2023 (which dropped React 16 support).

Removing support for React 17 allows us to simplify and streamline a lot of our component APIs, which will have downstream improvements on consumer codebases.

MIGRATION GUIDE:

Consumers still on v17 should follow the How to Upgrade to React 18 guide.

For sku consumers who upgraded to Braid v32 and added the "jsx-runtime workaround for ESM incompatibility", this can now be safely removed from their webpack configuration once updated to React 18:

Button, ButtonLink: Remove deprecated bleedY prop (#1626)

Remove the deprecated bleedY prop from the Button and ButtonLink components. Consumers should use the bleed prop instead, which bleeds based on the selected variant.

MIGRATION GUIDE:

Radio: Remove deprecated component (#1626)

Remove deprecated Radio component in favour of RadioGroup with RadioItem children.

MIGRATION GUIDE:

Column: Prevent growing when content width specified (#1626)

Ensure that when a column width is specified, the column does not grow or shrink. Only a column with no width specified will fluidly adapt to the available space.

Fixes a bug when all Column components have a defined width, a column specifying content width would incorrectly grow to consume the available space.

Hidden: Hide content by default. (#1626)

Hidden will now hide content if no hidden conditions are specified, i.e. if no above, below, or print props are provided. Consumers should review usage of the component without these props to ensure Hidden behaves as expected.

ButtonIcon: Remove deprecated secondary tone (#1626)

Remove the deprecated secondary tone from ButtonIcon in favour of providing the tone directly to the Icon itself.

MIGRATION GUIDE:

useColor: Align background tokens with Box and vars (#1626)

Align the available background tokens between Box, vars, and the useColor Hook. Removes the surfaceDark and bodyDark tokens that were mistakenly exposed in the useColor Hook.

useBreakpoint: Remove deprecated Hook (#1626)

This Hook has been deprecated since v30.1.0 in favour of useResponsiveValue, to prevent consumers from inadvertently coupling themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.

See the migration guide for more information.

Rating: Remove deprecated showTextRating prop (#1626)

Remove the deprecated showTextRating prop in favour of variant="starsOnly".

MIGRATION GUIDE:

Stack: Set default text alignment based on align (#1626)

As a convenience, the align prop sets the text alignment for the container, meaning any nested Text or Heading components will inherit this alignment by default.

This can be overridden by setting the alignment explicitly on the relevant Text or Heading component.

Columns, Inline: Only respect reverse in combination with collapseBelow (#1626)

The reverse prop is only respected in combination with collapseBelow. This ensures the content is reversed on the same row, but follows the document order when collapsed.

If content needs to be reversed without collapseBelow then it should be reversed in the document/source order directly.

Spread: Narrow component options to valid layout elements (#1626)

Not all HTML elements make sense to be a layout container, e.g. input, so scoping the component prop to only surface relevant element types.

Migrate to CSS gap internally. (#1626)

With the browser support policy now enabling adoption of CSS gap, Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management.

Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding. The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or returned null, requiring developers to hoist logic to the parent component.

Toggle: Enable bleedY by default, and deprecate bleedY prop. (#1626)

Deprecate the bleedY prop on Toggle component, and enable bleedY by default. Consumers should remove use of the bleedY prop, and if previously not setting bleedY to true, should update their layout accordingly.

MIGRATION GUIDE:

List: Reduce default space between list items (#1626)

Reduce the default space between list items from medium to small or xsmall if the size prop is set to either small or xsmall.

Tiles: Remove columns limit (#1626)

The columns prop was previously limited from 1 to 6. With the migration to CSS Grid this limit no longer applies.

Note: Responsive values are also still supported, e.g. columns={{ mobile: 1, tablet: 8 }}.

EXAMPLE USAGE:

Column: Add component support (#1626)

With Columns no longer adding intermediary elements, consumers are free to control the underlying HTML element of the Column themselves via the component prop. Valid options are kept to a white list of elements relevant to Column that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.

EXAMPLE USAGE:

seekJobs: Reduce size of gutter token (#1626)

The size of the gutter token on the seekJobs theme will be reduced from large (i.e. 32px), to medium (i.e. 24px). This is a semantic token that runs through many system components, and consumers are encouraged to perform a visual design audit to ensure experiences are laid out as intended.

Box, atoms: Add content to maxWidth (#1626)

Add the content option to the maxWidth property on the styling atoms. This will ensure an element is only as wide as its content.

EXAMPLE USAGE:

IconSocialTwitter: Remove deprecated icon. (#1626)

Remove the deprecated IconSocialTwitter icon. Consumers should use the IconSocialX icon instead.

MIGRATION GUIDE:

PageBlock, Drawer: Increase screen gutter on mobile (#1626)

Increase the horizontal screen gutter from xsmall (i.e. 12px) to small (i.e. 16px) on mobile devices.

Remove sku peer dependency (#1626)

Braid no longer has a peer dependency on sku, however there are build-time requirements that remain — which are now documented. SEEK consumers should continue to use sku for building Braid-based web experiences.

Hidden: Deprecate screen prop. (#1626)

Deprecate screen prop. To provide content to screen readers without rendering it to the screen, consumers should use HiddenVisually instead.

MIGRATION GUIDE:

Stack, Inline, Columns: Widen component support (#1626)

With Stack, Columns and Inline no longer adding intermediary elements, the component prop can now accept a wider range of elements. Valid options are kept to a white list of elements relevant to Stack that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.

Box, atoms: Add responsive gap support (#1626)

Add the gap property to the available styling atoms, inclusive of responsive spacing values.

EXAMPLE USAGE:

Ensure content is left aligned by default (#1626)

Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.

Apply max width to all inline components (#1626)

Apply a maxWidth of content to ensure component widths are controlled by their content — not growing to the size of their container.

BraidTestProvider: Provide scrollIntoView stub function for jsdom (#1590)

Fixes an issue where scrollIntoView is not defined in jsdom, causing tests to fail with the following error:

Autosuggest: Update suggestion group heading design (#1581)

Updating the design of the suggestion group headings, moving from formAccent to secondary tone, from all caps to provided casing, and from xsmall to small size.

Text, Heading: Ensure maxLines truncates correctly when used as the direct child of a flex container. (#1580)

Validate accessible field labels in development (#1591)

Introduce development-time validation for the label prop on form fields to guard against blank values and guide towards the alternative labelling options that are available. This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.

Spread: Apply content width to children (#1583)

Align the behaviour of children in Spread to be the same as Inline children. This makes their behaviour more predicatable when spreading full width elements, while also ensuring child elements are not stretched vertically.

Icons: Support rendering inline as child of a flex container (#1585)

Stack, Tiles: Deprecate dividers prop (#1574)

In preparation for migrating Braid layout components to use CSS gap, the dividers prop has been deprecated on Stack and Tiles.

Consumers are encouraged to migrate now in advance of its removal in v33.

Migration Guide

See migration guide for details on how to migrate off the dividers prop.

Autosuggest: Improve handling of suggestionHighlight prop when set to remaining (#1572)

Fixes a bug in Autosuggest when using suggestionHighlight prop set to remaining. If the input contained multiple words, the highlighted portion would be appended to the end of matching suggestions.

Divider: Ensure full width in flex container (#1574)

Ensures the Divider component remains full width when used as a flex child inside a flex container.

RadioItem: Improve checked visual affordance when disabled (#1564)

Improve the visual affordance of the checked state when disabled across all themes and colour modes.

MenuRenderer, OverflowMenu: Limit the menu height (#1567)

Limit the menu to show a maximum of around 10 items before scrolling (a little less so it's evident there is more to scroll to).

TextLink: Default to weak inside secondary tone (#1561)

Align the secondary tone with other non-neutral text tones, making the foreground color of links inherit the tone of the wrapping Text component.

EXAMPLE USAGE: In the following example the TextLink will now follow the secondary tone from the wrapping Text component:

Previously this would have retained the default link colour from the theme.

Standardise disabled & critical state across form fields (#1564)

Improves the consistency of form fields when combining both disabled and critical tone, which includes:

Spread: Add component prop support (#1559)

Enable support for changing the underlying HTML element of the Spread component.

EXAMPLE USAGE:

Spread: Add data prop support (#1559)

EXAMPLE USAGE:

Column: Add support for hide above/below breakpoint (#1553)

Introduce new hideAbove and hideBelow props on column for responsively hiding columns across breakpoint.

These props can be used either separately or in combination to optimise content display across different screen sizes.

EXAMPLE USAGE:

Badge: Enable usage inside typographic components (#1547)

A Badge can now be nested inside typographic components, e.g. Text and Heading, as an inline element alongside text. Previously a Badge had to be aligned against text using an Inline component, which would result in the Badge dropping below the text when the copy wrapped.

EXAMPLE USAGE:

Tabs: Add size support (#1550)

Introduces the ability to customise the size of the Tab components in the tab list. Available sizes are standard (default) and small.

EXAMPLE USAGE:

Spread: Add new layout component (#1554)

Introduce a new layout component, Spread, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.

EXAMPLE USAGE:

The Spread component works horizontally by default:

But can be switched to vertical via the direction prop:

Move badge slot inside label (#1547)

Relocate the badge slot inside the label slot enabling the Badge to sit alongside the last word in wrapping lines of text.

IconHash: Add component (#1543)

EXAMPLE USAGE:

Improve internal form field spacing (#1541)

Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.

This change impacts the Stack spacing between label and description, the form field itself and the message slots.

Autosuggest: Add suggestionHighlight prop (#1536)

Introduces the suggestionHighlight prop, which uses the input value to automatically highlight either the matching or remaining portion of each suggestion.

EXAMPLE USAGE:

Refine the Checkbox, Radio, Toggle & MenuItemCheckbox size (#1541)

Refines the size of the inline field elements including the RadioItem, Checkbox, Toggle and MenuItemCheckbox components.

Primarily impacts consumers of the seekJobs theme, seeing a reduction across all sizes.

Ensure no space above field with undefined label (#1541)

Fixes an issue where passing undefined as the label to a form field would result in an unwanted space above the field.

Badge: Ensure label follows correct tone (#1544)

Ensure that the foreground text of a Badge always follows the correct tone for the background colour. Fixes a bug where using a Badge in a List that overrides the default tone would result in the Badge text following the List tone instead of the Badge tone.

Fix warning in React 18.3.0 when using useToast. (#1534)

MonthPicker: Reduce space between month and year fields (#1541)

Reducing the space between month and year fields to improve correlation between the two fields within the greater context of a form.

Toggle: Add togglePosition prop (#1509)

Introduces the togglePosition prop, enabling the toggle to either be leading or trailing its label text.

EXAMPLE USAGE:

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:

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:

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.

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.

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.

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:

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:

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:

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:

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:

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:

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.

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)

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.

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.

Tab: Remove cropping of the icon slot (#1447)

Previously the icon slot on a Tab was cropped on the left to improve alignment with the active tab indicator. For most icons in a Tab, this was subtle polish, but for others it had the undesirable side effect of clipping the side of the icon.

Removing the cropping until we have a better solution for trimming whitespace around icons.

Badge: Allow Badge to take arrays of values (#1443)

Previously, Badge only accepted a string as children, to prevent the use of other components inside a Badge.

However, when a variable is included with text inside the Badge, the children property is interpreted as an array. This prevents a very reasonable use case from being allowed:

This change allows Badge to accept a string, number, or array thereof.

Fix circular dependencies (#1444)

IconSocialX: Add new icon (#1438)

Add the new IconSocialX component to the suite of social icons, enabling teams to migrate across from IconSocialTwitter which has now been marked as deprecated.

EXAMPLE USAGE:

MIGRATION GUIDE: Teams should migrate from IconSocialTwitter to IconSocialX at their earliest convenience. The IconSocialTwitter component will be removed in a future release.

IconSort: Add new icon (#1438)

EXAMPLE USAGE:

Icons: Update social icons (#1438)

Update the suite of social icons to be more uniformly sized alongside each other as well as updating the Medium icon to reflect the latest branding.

IconMoney: Update artwork to be currency agnostic (#1438)

Rating: Add weight support (#1430)

Provide a weight prop to customise the weight of the text rating alongside the stars.

EXAMPLE USAGE:

Autosuggest: Fix aria-label and aria-labelledby features (#1420)

Fixes an issue where the aria-label and aria-labelledby props provided by a consumer were being overidden internally by the Autosuggest component.

TooltipRenderer: Fix useLayoutEffect warnings during SSR (#1407)

Tabs: Improve positioning of the active underline (#1407)

Fixes a bug where the reset module mistakenly included all the tokens for all the themes. (#1405)

Additionally, this includes significant compilation improvements to ensure that only styles for the components being used are included — speeding up build times and reducing the overall CSS bundle size.

Add optional tooltipPlacement prop to ButtonIcon (#1390)

The tooltipPlacement prop allows you to specify the placement of the tooltip to either top or bottom. The default value is top.

EXAMPLE USAGE:

seekJobs: Update formAccent colour (#1387)

The formAccent tone, used through our form fields and buttons, is being updated to a derivative of the SEEK brand blue.

As this update only relates to the seekJobs theme, consumers of other themes will not be affected.

The Braid Provider contains some code to check that it's running in a browser context (otherwise a BraidTestProvider should be used). (#1382)

Part of this check was looking to see if there was a navigator object, which was not available in Node. If there were, it would check the userAgent to determine if it was inside jsdom.

Node 21 has a navigator object, but it doesn't have a userAgent property, so this check was failing (cannot read property 'indexOf' of undefined).

The "are we in JSDom" check in the BraidProvider has now been reworked slightly to account for the potentially existing but empty navigator object.

TextLink, TextLinkButton: Ensure consistent underline thickness on weak links (#1380)

A subtle bug affecting weak links was resulting in a change in underline thickness on hover. This bug has been fixed such that weak links now always have the same underline thickness regardless of hover state.

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.

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.

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.

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.

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.

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:

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:

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.

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.

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:

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.

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.

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.

seekJobs: Update visited link colour tokens (#1323)

Darken the visited link colour tokens within the seekjobs theme.

IconEnlarge: Add new component (#1320)

EXAMPLE USAGE:

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

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:

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.

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:

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:

IconMessage: Add new component (#1303)

Add new IconMessage component.

EXAMPLE USAGE:

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:

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.

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.

Text, Heading: Add maxLines support (#1286)

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

EXAMPLE USAGE:

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:

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:

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.

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.

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:

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:

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:

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:

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

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.

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:

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:

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

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.

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

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:

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.

EXAMPLE USAGE:

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.

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:

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:

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:

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:

Use theme tokens for shape of font metrics (#1214)

Internally some theme utilities were using Capsize’s FontMetrics as their expected payload, rather than correctly using the shape of the theme tokens. This makes Braid compatible with Capsize v3.x.

Whitelist only the required FontMetrics for theme tokens (#1212)

The latest version of FontMetrics type in Capsize adds more properties, and we only populate the properties we require on the theme. Whitelisting the required properties to keep the themes explicit.

Accordion, AccordionItem: Add weight support (#1211)

Add support for customising the weight of AccordionItems. This can be either at an Accordion level or on a standalone AccordionItem based on design requirements.

Note, in order to maintain visual consistency, the weight prop can only be specified on an AccordionItem when outside of an Accordion.

EXAMPLE USAGE:

or

CheckboxStandalone: Enable alignment with Text (#1209)

Enables CheckboxStandalone to be wrapped in a Text component, ensuring it only occupies the same layout as text. This is useful for visually aligning checkboxes in a custom layout alongside other text-based components, e.g. AccordionItem.

EXAMPLE USAGE:

color-mode: Add query-param entry (#1205)

Add new query-param entry, providing a script for resolving the color mode preference from query string, as well as a utility function for retrieving the preference for constructing subsequent links.

Tab, Tabs: Updated visual design (#1180)

The appearance of a Tab has been updated. Changes include:

The braid-upgrade command now tries to preserve newlines as best as possible (#1194)

Expose Playroom config (#1190)

This allows consuming packages (e.g. Metropolis) to enhance the Playroom experience by leveraging Braid's internal Playroom configuration.

EXAMPLE USAGE:

TextLink, TextLinkButton: Add icon support (#1184)

Provides a designed slot for adding an icon to a TextLink or TextLinkButton. This solves for the problem of underlining the space between the icon and text.

EXAMPLE USAGE:

IconRenderer: Support the sizing and alignment of custom icons (#1185)

Provides support for sizing and aligning custom icons with Braid’s typographic components. The new IconRenderer component supports being used within Text and Heading components as well as inside icon slots of other components.

Uses the render prop pattern to provide the required classes to style and align a custom icon.

EXAMPLE USAGE:

Link: Support custom data prop format for attributes (#1182)

While Link already supports the native HTML syntax for data attributes, e.g. data-testid="123", it now supports the data prop too. This allows data attributes to be provided consistently to all components.

EXAMPLE USAGE:

The above example results in the following HTML attribute being set on the element: data-testId="myComponent".

Bleed: Add data attribute support (#1182)

EXAMPLE USAGE:

Support data attribute boolean values (#1182)

The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

EXAMPLE USAGE:

TextLink: Allow native data attributes with anchor api (#1182)

Disables the validation against the use of data attributes on TextLink. Given it exposes the full native anchor tag api, it is not invalid to use the native syntax.

TextField: Add inputMode and step support (#1174)

Provide support for the native inputMode and step attributes.

The inputMode will also be defaulted based on the specified type. For example: <TextField type="number" /> will default the inputMode to numeric.

EXAMPLE USAGE:

Rating: Only fill star for scores .75 and above (#1176)

A star is only filled when the score is .75 and above. Fixes an issue where all scores .5 or above are shown as half filled stars.

EXAMPLE USAGE: Now when a rating reaches .75 it will round up to a full star.

ButtonLink: Allow native data attributes with anchor api (#1178)

Disables the validation against the use of data attributes on ButtonLink. Given it exposes the full native anchor tag api, it is not invalid to use the native syntax.

Box, atoms: Remove native buttons on number input field (#1174)

Extends the CSS reset behaviour of HTML input fields where type="number" to remove the native increment and decrement buttons.

EXAMPLE USAGE: The following will now render a HTML input of type number without native buttons:

Additionally, if using the atoms function to build styles, when resetting an input field, the native buttons will also be removed.

Button, ButtonLink: Improve alignment of transparent buttons with icons against Text with icons (#1170)

To improve optical balance of a Button with an icon, the icon container is bled to the left to balance against the larger horizontal inset of a standard button. This alignment correction is now only applied on standard sized buttons that are not using the transparent variant.

Isolating this alignment correction enables transparent buttons to better align with other components with icon slots, for example:

Icons and text will now be perfectly aligned between Button components and others icon slots with the same text size.

Box: Support custom data prop format for attributes (#1168)

While Box already supports the native HTML syntax for data attributes, e.g. data-testid="123", it now supports the data prop too. This allows data attributes to be provided consistently to all components.

EXAMPLE USAGE:

The above example results in the following HTML attribute being set on the element: data-testId="myComponent".

Text, Heading: Add icon slots (#1160)

Provides a designed slot for adding an icon to Text and Heading components

EXAMPLE USAGE:

or with a Heading:

useToast: Add data attribute support (#1168)

Support applying custom data attributes to Toast elements.

EXAMPLE USAGE:

The above example results in the following HTML attribute being set on the toast element: data-testId="myToastMessage".

Provide dev time validation/warnings when the native data attribute format is provided to components that do not support it. (#1168) This is required as TypeScript does not validate kebab cased properties, and Braid components do not spread abritrary props.

This validation will prevent silent failures where attributes are seemingly provided, but not applied.

For example:

However, now the following console warning will guide users to use the data prop:

Pagination: Increase chevron spacing on prev/next links (#1160)

Increases the space between the "Previous" and "Next" text and their chevron icons to balance with the larger icon size.

MenuItemCheckbox: Align with increased icon size (#1160)

Ensure menu item text has uniform spacing to the checkbox of MenuItemCheckbox and the icon slot of MenuItem.

Text, Heading: Increase icon size inside typographic elements (#1160)

The size of icons has been increased by 20% when used inside of Text and Heading components. There is no layout impact expected for consumers, with only the visual ratio of icon to text size changing.

This applies to icons using the new icon slots, as well as inline icons within the text content.

ButtonIcon: Increase standard icon size (#1160)

Adopt the increased standard icon size.

Removes custom icon sizing and layout in favour of new typography icon sizes and layout. (#1162)

Update @vanilla-extract/css dependency (#1158)

This fixes a type error that was occurring with typescript versions >=4.5.0

Heading: Nested icons inherit text colour (#1153)

When using icons inside of a Heading, the default tone was always neutral, rather than inheriting the colour of the nearest component.

For example, when an icon was used inside of a TextLink within a Heading: