Feb 18, 2024
  • 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.

Sep 4, 2023
  • 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)
Apr 21, 2023
  • Text, Heading: Only show truncate deprecation message when true

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

Apr 19, 2023
  • Text, Heading: Add maxLines support

    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}
     />
Nov 9, 2022
  • 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:

    <Component
      data={{
        'custom-attribute': true,
      }}
    />
    // => <div data-custom-attribute="true" />
Oct 21, 2022
  • 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.

    Icons used outside of typographic elements are not affected by this change.

  • Text, Heading: Add icon slots

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

    EXAMPLE USAGE:

    <Text icon={<IconPromote />}>{...}</Text>

    or with a Heading:

    <Heading level="3" icon={<IconPromote />}>{...}</Heading>
Dec 7, 2021
  • 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.

Nov 23, 2021
  • 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.

Jul 8, 2021
  • 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
      }
Jun 21, 2021
  • Support object notation for responsive props

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

    { mobile: 'small', tablet: 'medium', desktop: 'large' }

    This also means that breakpoints can be skipped.

    { mobile: 'small', desktop: 'large' }
Feb 11, 2021
  • Text, Icons: Add brandAccent tone to Text and Icons

    EXAMPLE USAGE:

    <Text tone="brandAccent">...</Text>
Jul 31, 2020
  • 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.

    {
      text: {
        standard: {
          mobile: {
    -        size: 16,
    +        capHeight: 11.43,
            rows: 6
          }
        }
      }
    }

    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.

    -const capHeight = 24 * theme.typography.capHeightScale;
    +const capHeight = 24 * (theme.typography.fontMetrics.capHeight / theme.typography.fontMetrics.unitsPerEm);
    -const descender = 24 * theme.typography.decenderHeightScale;
    +const descender = 24 * (Math.abs(theme.typography.fontMetrics.descent) / theme.typography.fontMetrics.unitsPerEm);
Apr 21, 2020
  • Text: Add data attribute support