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.
Tag: Add missing click event parameter to onClear prop type
Tag: Introduce "addable" support
Tag actions have been extended to now support being “added”.
A Tag will include a small add icon button when both an onAdd handler and addLabel prop are provided.
EXAMPLE USAGE:
<Tag onAdd={() => {...}} addLabel="Add Tag" />
Move secondary ButtonIcon tone to icons
Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.
Tag: Add small size
Introduce a new small size for Tag component.
This size sits alongside the existing standard size, which is the default.
EXAMPLE USAGE:
<Tag size="small"> Tag </Tag>
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" />
Removes custom icon sizing and layout in favour of new typography icon sizes and layout.
Tag: Add id support
Tag: Add icon support
Provides a designed slot for adding an icon to a Tag
EXAMPLE USAGE:
<Tag icon={<IconPromote />} {...} />
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.
Alert, Autosuggest, Tag, TextField: Use neutral tone button style for clear action
Box, Tag, Toggle: Make borderRadius="full" always circular
Fixes circular border radius bug where non-square elements would result in an ellipse.
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />