Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate DropdownMenu instances to DropdownMenu V2 #61094

Open
19 tasks
jameskoster opened this issue Apr 25, 2024 · 1 comment
Open
19 tasks

Migrate DropdownMenu instances to DropdownMenu V2 #61094

jameskoster opened this issue Apr 25, 2024 · 1 comment
Labels
[Feature] UI Components Impacts or related to the UI component system General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Apr 25, 2024

DropdownMenu V2 includes several benefits like support for flyout menus, improved accessibility, and consistent treatment of checkbox/radio groups. It would be good to migrate instances of DropdownMenu to the new component to make use of those benefits, and visually align menus across.

Editor

  • Block toolbar menus, e.g. text alignment
  • Block options menus (appears in block toolbar and List View) Devise a mechanism by which the block options menu can scale more elegantly #49271
  • Editor modes
  • Inserter -> Pattern filter menu
  • View menu in top toolbar
  • Options menu in top toolbar
  • Document actions menu in Inspector
  • Toolspanel ellipsis menu
  • Ellipsis menu in global styles panel header
  • Block transforms
  • Navigation menu switcher/tools
  • Media replacement (see Site Logo block inspector/toolbar)
  • Aspect ratio (in block toolbar when cropping an image)
  • Template menu in page details
  • Quick Inserter

Admin

  • Add pattern menu
  • Navigation menu actions (in details panel)
  • Template actions (in details panel)
  • Template part actions (in details panel)

Many of these menus can be replicated 1:1 with the new component, so hopefully a lot of the work will be straight-forward. Some will however require some design attention. As time allows let's mock these up in Figma here.


Some initial exploration around this took place in #57996.

@jameskoster jameskoster added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. [Feature] UI Components Impacts or related to the UI component system labels Apr 25, 2024
@jameskoster
Copy link
Contributor Author

I've mocked up the menus in Figma based on the existing DropdownMenu V2 component.

Here's a sample (current menus are on the left):

Export

Generally I think the migration should be quite smooth, but some questions arose out of this exercise:

  • Do we need a version of DropdownRadioItem where the radio indicator is an icon? If yes, how do we differentiate that from regular menu items with icons, and how do we mark the selected item?
  • Should we utilise the ellipsis suffix on menu items that have subsequent steps, e.g. "Rename..." vs "Rename"?
  • Can we get away without group headings?
  • Are there design details in DropdownMenu V2 that need to change?

Also worth noting: Transforms and Toolspanel will need further investigation as these are more involved menus.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

1 participant