MenuRenderer, OverflowMenu: Provide improved scroll affordance
Introduce scroll affordance to menus, providing a visual cue that there are more items overflowing vertically.
OverflowMenu: Simplify internal layout.
Refactor the internal layout of OverflowMenu to improve the alignment of the menu with the button.
MenuRenderer, OverflowMenu: Limit the menu height
Limit the menu to show a maximum of around 10 items before scrolling (a little less so it's evident there is more to scroll to).
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" />
MenuRenderer, OverflowMenu: Provide context data to onClose
The onClose handler now receives data to allow consumers to discern why the menu closed — either by exiting or selecting an action. See the documentation for more details.
EXAMPLE USAGE:
<MenuRenderer onClose={(closeReason) => { // ... }} />
MenuRenderer, OverflowMenu: Guard against open/close handlers firing incorrectly
Add guard to ensure open and close handlers are not re-fired when handler instances are updated.
OverflowMenu: Add id support
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.
MenuRenderer, OverflowMenu: Mouse leave no longer affects focus state
Previously, moving the mouse from hovering a menu item to outside of the menu would shift focus the to the menu trigger. This is not a requirement for accessibility and introduces undesired behaviour when the trigger is used in conjunction with TooltipRenderer.
Note: As per the menu accessibility guidelines, focus will still be returned to the trigger when clicking outside the menu, selecting a menu item or pressing the escape key.
MenuRenderer, OverflowMenu: Add menu width and placement support
Provides a set of widths to control how wide the menu is, where content is the default. The available widths are ratioed off the contentWidths specified on the theme.
Additionally the placement of the menu can choose from either top or bottom where the latter remains the default.
EXAMPLE USAGE:
<MenuRenderer // ... width="small" placement="top"> ... </MenuRenderer>
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>
MenuRenderer, OverflowMenu: Ensure layout of the trigger is controlled by the parent
Fixes an issue where the trigger container did not adhere to the parent layout, preventing consumers from providing triggers that take up the full width of their available space. This goes against one of Braid's key layout principles which says spacing between elements is owned entirely by layout components.
OverflowMenu: Use neutral tone button style
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
OverflowMenu, MenuRenderer, MenuItemDivider: Remove horizontal padding
MenuRenderer, OverflowMenu: Fix circular dependency issue
Drop lodash usage to decrease bundle size.
This directly affects MonthPicker and any components using the data prop:
Only show focus rings on buttons for keyboard navigation.
This impacts the following components:
ButtonButtonRendererOverflowMenuBrowsers automatically show focus rings on buttons when clicking on them, even though (for our purposes, at least) they're undesirable from a visual design perspective and redudant from a UX perspective.
We now automatically hide these focus rings if the user has moved their mouse, indicating that they're not navigating via the keyboard. However, to maintain keyboard accessibility, we reinstate these focus rings whenever the keyboard is used. Most typically, this ensures that you'll see focus rings when tabbing around the UI, even if you've previously used the mouse.
MIGRATION GUIDE
No public APIs are affected by this, but you may find that this causes unit test failues that look like this:
Warning: An update to X inside a test was not wrapped in act(...).
If this is the case, you should replace BraidProvider in your tests with BraidTestProvider.
-<BraidProvider theme={wireframe}> +<BraidTestProvider>
MenuRenderer, OverflowMenu: Fixes a bug where menus could be obscured when rendered inside a Dialog or Drawer component.