Standardise icon slot spacing
Normalise the space between the icon slot and component content across the system.
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" />
MenuItem, MenuItemLink, MenuRenderer, OverflowMenu: Add icon support
Provides a designed slot for adding an icon to MenuItem and MenuItemLink. To compliment this we have introduced reserveIconSpace on both MenuRenderer and OverflowMenu so the labels in menu items without icons align with the labels of menu items with an icon.
EXAMPLE USAGE:
<MenuRenderer reserveIconSpace> <MenuItem // ... icon={<IconBookmark />} > Menu Item </MenuItem> </MenuRenderer>
MenuItem, MenuItemLink, MenuItemChecklist: Add badge support
Provides a designed slot for adding a Badge to all the variants of a menu item.
EXAMPLE USAGE:
<MenuRenderer> <MenuItem // ... badge={<Badge>Badge</Badge>} > Menu Item </MenuItem> </MenuRenderer>
MenuItem, MenuItemLink, MenuItemCheckbox: Use span elements internally for more valid HTML.
MenuItem: Prevent click events from bubbling
MenuItem, MenuItemLink: Add support for critical tone
For destructive actions (e.g. "Delete") you can now provide a tone prop with a value of "critical".
EXAMPLE USAGE
<OverflowMenu label="Options"> <MenuItem tone="critical" onClick={() => {}}> Delete </MenuItem> </OverflowMenu>
Added MenuItemLink component
You can now render semantic links within menu components, e.g. OverflowMenu, MenuRenderer
For example:
<OverflowMenu label="Options"> <MenuItem onClick={() => {}}>Button</MenuItem> <MenuItemLink href="...">Link</MenuItemLink> </OverflowMenu>
Note that links are rendered internally using Link. If you want to customise the rendering of these links, you need to provide a custom linkComponent implementation to BraidProvider.