DropdownMenu v2: Design tweaks #55933
Description
dropdown.mp4
Some design details may be subject to change, but the full spec for updated MenuItems/MenuItemFlyouts can be found in Figma here.
The prototype in the video above can be tried here.
List of tweaks
Click to expand
- Remove group label
- Expose Help Text subcomponent, including truncation
- Allow nested triggers to have a suffix while preserving the chevron
- Tweak submenus overlap
- Add auto-indent functionality
-
Using context - Using CSS grid
-
- When suffix is not present, children fill all available space
- Add more examples to Storybook:
- Indented / unintended
- Review sizes:
- label font size
- help text font size
- chevron size
- check and radio size
- icon size
- Review spacing:
- menu padding
- item spacing
- divider spacing
- min and max menu widths
- prefix spacing
- suffix spacing
- chevron spacing
- Review all text/bg colors on
- Label:
- resting
- hover
- focus
- disabled
- active flyout
- Help text
- resting
- hover
- focus
- disabled
- active flyout
- Prefix
- resting
- hover
- focus
- disabled
- active flyout
- Suffix
- resting
- hover
- focus
- disabled
- active flyout
- Chevron
- resting
- hover
- focus
- disabled
- active flyout
- Bg color
- resting
- hover
- focus
- disabled
- active flyout
- Label:
- Review border and separator color, including drop shadow
- Truncate label text
Questions:
- are there reusable line-height variables?
- Box shadows: spec vs existing popover box shadow?
- border colors: spec vs existing variables?
- toolbar variable?