Text

Text, Heading: Support long, unbroken text content when using the maxLines prop

Support null for badge and icon slots, in addition to undefined.

Previously, badge and icon props could only be explicitly omitted with undefined. This change allows passing null.

EXAMPLE USAGE:

Standardise icon slot spacing

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

Text, Heading: Remove deprecated truncate prop

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

MIGRATION GUIDE:

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

Text, Heading: Fix maxLines cropping of decending characters

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.

seekJobs: Change link colour to neutral

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)

Text, Heading: Only show truncate deprecation message when true

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

Text, Heading: Add maxLines support

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:

Support data attribute boolean values

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:

Text, Heading: Increase icon size inside typographic elements

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.

Text, Heading: Add icon slots

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

EXAMPLE USAGE:

or with a Heading:

Text: Improve contrast of caution, positive, info, promote and link tones

When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.

Text: Improve contrast of brandAccent, critical and formAccent tones

When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.

Add wide breakpoint of 1200px

This adds support for wide to the following touchpoints:

• Responsive values, e.g.

  { mobile: 'small', wide: 'large' }
  

• Responsive range props, e.g.

  <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
  

• The responsiveStyle function, e.g.

  export const className = style(responsiveStyle({ wide: '...' }));
  

• The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.

  {
    mobile: 0,
    tablet: 740,
    desktop: 940,
    wide: 1200
  }
  

Support object notation for responsive props

Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.

This also means that breakpoints can be skipped.

Text, Icons: Add brandAccent tone to Text and Icons

EXAMPLE USAGE:

Improved trimming of white space around text

Migrated from our custom Basekick implementation to 🛶 Capsize to more accurately trim the white space around text. This will have subtle white space changes throughout the UI, but will largely just be improvements to the balance of space around text.

BREAKING CHANGES

Heading/Text: Removed LEGACY_SPACE

The _LEGACY_SPACE_ prop was provided to support consumers migrating to v14 when the white space cropping and layout components were originally introduced. This has now been removed to allow us to further improve on our approach.

Migrating off this prop will require consumers to perform the following steps:

• Remove the usage of _LEGACY_SPACE_ on a component
• Conduct a visual review of the impact (component will appear closer to neighbouring elements)
• Use existing layout components, e.g. Stack, to define/control the reintroduction of the desired space.

Any issues, please reach out to the team as we are happy to help support consumers in migrating.

Theme Tokens: Text and Heading definitions

There have been strutural theme changes for heading and text definitions to support the defining of capHeight in the system. Previously a definition contained size that was the specified font size inclusive of surrounding white space.

A definition now has capHeight which is representative of the visual height, supporting improved alignment with other elements like, icons etc.

This is not likely to affect consumers, unless these theme values are used explicitly in custom treat files.

Theme Tokens: Descender and Cap Height scales

Instead of the calculated values of capHeightScale and decenderHeightScale, a theme now accepts fontMetrics—a structure that represents the metadata from the font itself.

Text: Add data attribute support