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:
<Badge>{jobs.length} Jobs</Badge> // Error: Type '{ children: string[]; }' is not assignable to type 'BadgeProps'.
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:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
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:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
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.
<Inline alignY="center" space="xsmall"> <Heading level="4">Heading</Heading> <Badge bleedY tone="positive"> New </Badge> </Inline>
Badge: Allow custom title text
EXAMPLE USAGE
<Badge tone="positive" title="3 new jobs">3</Badge>