TooltipRenderer: Optimise performance by reducing unnecessary recalculations of the trigger position
ButtonIcon: Ensure the focus outline is styled consistently with other components.
Fix issue which caused the Braid focus outline to show along with the native browser focus outline.
Migrate from custom focus ring visibility to native :focus-visible behaviour.
Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard,
to prevent showing focus rings on click.
With the updated Browser Support Policy, we can now leverage the native :focus-visible pseudo class instead.
ButtonIcon, TooltipRenderer: Remove unnecessary intermediary element around the tooltip trigger.
ButtonIcon: Add optional aria-describedby prop
aria-describedby can be used in addition to label to associate additional descriptive elements with the ButtonIcon.
EXAMPLE USAGE:
<ButtonIcon icon={<IconDelete />} label="Delete" aria-describedby="descriptionId" /> <Text id="descriptionId">Deleted items will be permanently removed after 30 days.</Text>
Change id prop from required to optional, allowing simplified usage.
Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.
EXAMPLE USAGE:
- <AccordionItem id="item-1" ... /> + <AccordionItem ... />
Button, ButtonIcon, ButtonLink: Ensure hit area remains consistent size
Fixes an issue where clicking the edge of buttons would trigger the active animation but not the click event
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={...} />