ButtonIcon: Remove deprecated secondary tone
Remove the deprecated secondary tone from ButtonIcon in favour of providing the tone directly to the Icon itself.
<ButtonIcon - tone="secondary" - icon={<IconAdd />} + icon={<IconAdd tone="secondary" />} />
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.
ButtonIcon: Add formAccent tone
Introduces support for the formAccent tone on ButtonIcon.
The new tone sits alongside the existing neutral tone, while the secondary tone is now deprecated and will be removed in a future version (see Migration Guide below).
EXAMPLE USAGE:
<ButtonIcon tone="formAccent" icon={<IconAdd />} />
MIGRATION GUIDE:
For consumers of the now deprecated secondary tone, you can pro-actively migrate away from it by moving the tone to the icon itself:
<ButtonIcon - tone="secondary" - icon={<IconAdd />} + icon={<IconAdd tone="secondary" />}
ButtonIcon: Add small size
Introduce a new small size for ButtonIcon component.
This size sits alongside the existing standard and large sizes.
EXAMPLE USAGE:
<ButtonIcon size="small" icon={<IconEdit />} label="Small size" />
Improve virtual touch target positioning for narrow elements
To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.
Add optional tooltipPlacement prop to ButtonIcon
The tooltipPlacement prop allows you to specify the placement of the tooltip to either top or bottom.
The default value is top.
EXAMPLE USAGE:
<ButtonIcon tooltipPlacement="bottom" />
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" />
ButtonIcon: Increase standard icon size
Adopt the increased standard icon size.
Note this does not affect overall dimensions of ButtonIcon, or the layout of surrounding components.
ButtonIcon: Add component
See documentation for full feature set.
EXAMPLE USAGE:
<ButtonIcon icon={<IconShare/>} label="Share" id="share" onClick={...} />