MenuRenderer: Hide overflow on menu
Fixes a bug where the selection/highlight for a MenuItem could extend outside of the menu itself.
Add xxxlarge to the space scale
Extends the range of the space scale to include xxxlarge.
This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
Note, the new value is also available as a responsive property.
EXAMPLE USAGE:
<Stack space="xxxlarge">...</Stack> {/* Or responsively: */} <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>
import { atoms } from 'braid-design-system/css'; atoms({ paddingY: 'xxxlarge' })
import { vars } from 'braid-design-system/css'; const space = vars.space.xxxlarge;
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.
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.
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
Add wide breakpoint of 1200px
This adds support for wide to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle function, e.g.export const className = style(responsiveStyle({ wide: '...' }));
breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.{ mobile: 0, tablet: 740, desktop: 940, wide: 1200 }
Support object notation for responsive props
Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.
{ mobile: 'small', tablet: 'medium', desktop: 'large' }
This also means that breakpoints can be skipped.
{ mobile: 'small', desktop: 'large' }
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:
MenuRenderer: Add support for configuring the menu offset from the trigger
FEATURES
MenuRenderer
Configure the offset distance between the menu trigger and menu using the offsetSpace prop. As with all space values in the system, this accepts a responsive prop.
<MenuRenderer + offsetSpace="small" trigger={(triggerProps, { open }) => ( <button {...triggerProps}>Menu</button> )} > <MenuItem onClick={...}>Option</MenuItem> </MenuRenderer>
Add customisable MenuRenderer component
BREAKING CHANGES
OverflowMenuItem to MenuItem.type="link" from OverflowMenuItem due to an accessibility issue with the approach (based on review of consumer usage, it did not seem to be used).FEATURES
MenuRenderer
Encapsulates all the behaviours of an accessible menu button, allowing consumers to define a custom trigger to open the menu. The trigger function receives two arguments:
open state.<MenuRenderer trigger={(triggerProps, { open }) => ( <button {...triggerProps}>Menu</button> )} > <MenuItem onClick={...}>Option</MenuItem> </MenuRenderer>
MIGRATION GUIDE
OverflowMenuItem
Rename OverflowMenuItem to MenuItem.
<OverflowMenu label="Overflow"> - <OverflowMenuItem onClick={...}>Option</OverflowMenuItem> + <MenuItem onClick={...}>Option</MenuItem> </OverflowMenu>
Changing the type is no longer supported due to an accessibility issue with the previous implementation. Please get in contact via Slack if you depended on this.
<OverflowMenu label="Overflow"> - <OverflowMenuItem type="link" onClick={...}>Option</OverflowMenuItem> + <MenuItem onClick={...}>Option</MenuItem> </OverflowMenu>