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.
<Text - truncate + maxLines={1} />
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.
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:
<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} />
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" />
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>
Heading: Nested icons inherit text colour
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:
<Heading level="1"> Title with <TextLink>link <IconArrow /></TextLink> </Heading> // => Previously, IconArrow was the heading text colour // `neutral`, now inherits the `link` colour.
or equally, when an icon was used inside of a Secondary component within a Heading:
<Heading level="1"> Title with <Secondary>secondary <IconArrow /></Secondary> </Heading> // => Previously, IconArrow was the heading text colour // `neutral`, now inherits the `secondary` colour.
Add wide breakpoint of 1200px
This adds support for wide to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle function, e.g.export const className = style(responsiveStyle({ wide: '...' }));
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.
{ mobile: 'small', tablet: 'medium', desktop: 'large' }
This also means that breakpoints can be skipped.
{ mobile: 'small', desktop: 'large' }
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:
_LEGACY_SPACE_ on a componentStack, 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);
Heading: Add data attribute support