Nov 9, 2022
  • 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" />
Mar 7, 2022
  • 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>
Dec 7, 2021
  • MenuItem, MenuItemLink, MenuItemCheckbox: Use span elements internally for more valid HTML.

May 24, 2021
  • MenuItem: Prevent click events from bubbling

Dec 16, 2020
  • 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>
Aug 14, 2020
  • 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.