Badge

Apply max width to all inline components

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

Badge: Enable usage inside typographic components

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:

Badge: Ensure label follows correct tone

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.

Badge: Allow Badge to take arrays of values

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.

Badge: Adjust height to support different typographic scales

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.

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:

Badge: Use span element

As the Badge component is not used as a container element, we now use a span. This allows it to be used inside button elements, such as an AccordionItem, without producing invalid html.

Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale

Badge: Use correct text size for bleedY positioning

Add support for data attribute maps on all components.

EXAMPLE USAGE:

Badge: Add support for ref, tabIndex and aria-describedby props

Badge: Ensure ref, title, tabIndex and aria-describedby props are applied to the visual badge element, not its container element

Badge: Add bleedY prop

You can now choose to allow the badge’s background colour to bleed out into the surrounding layout, making it easier to align with other elements.

For example, we can align a badge to a Heading element using an Inline, even though the badge is actually taller than the heading. If we didn’t use the bleedY prop in this case, the badge would introduce unwanted space above and below the heading.

Badge: Allow custom title text

EXAMPLE USAGE