Ensure content is left aligned by default
Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.
Card: Add full height support
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>
Alert, Card, useToast: Decouple keyline width from space scale
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
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.
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" />
Alert, Card, Toast: Improve highlight keyline
Ensures that components using a highlight keyline have the correct border radius and mask their overflow correctly.
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
Card: Add component support
The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, details, main and section.
EXAMPLE USAGE:
<Card component="article"> ... </Card>
Card: Add tone support
Specifying a tone will now add a keyline down the left hand side of the container. The supported tones are promote and formAccent.
As a result, Cards are now position relative containers.
EXAMPLE USAGE:
<Card tone="formAccent"> ... </Card>
Card: Add rounded and roundedAbove support
Card corners can be rounded by providing the rounded prop.
Alternatively, rounding may be applied responsively using the roundedAbove prop, and providing either mobile or tablet. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.
EXAMPLE USAGE:
<Card rounded> ... </Card>
or
<Card roundedAbove="mobile"> ... </Card>