DropdownMenu: Design feedback

[ciampo]

Tracked by #50459

Two little bits of feedback / points of discussion.

From an alignment perspective I feel like the dropdown divider should either align with the content of the menu items or go full width. This is related to our previous conversations about site editor sidebar where menu item hover state has negative margin similar to the examples below.

Mac

Todoist

Notion

Plain

What our site editor sidebar menu's might be

Current dropdown

The other bit of feedback is around colour of hover state. I would love for us to start standardising around around how colour is used across across different UI states. I like Radix colour system for this reason (see below). In this case we have a hover state for menu items which should be consistent with how we treat hover states in the site editor sidebar (using a lighter gray).

so something like this

Originally posted by @SaxonF in #50459 (comment)

[ciampo]

Hey @SaxonF !

From an alignment perspective I feel like the dropdown divider should either align with the content of the menu items or go full width.

I will go full width for now (à la Notion), I think it looks better.

The other bit of feedback is around colour of hover state. [...] In this case we have a hover state for menu items which should be consistent with how we treat hover states in the site editor sidebar (using a lighter gray).

I will change the hover status to gray, although we'd need to also consider:

• focus state
• "expanded" state (ie. the state that a subtrigger is in, when its corresponding submenu is open)

I would love for us to start standardising around around how colour is used across across different UI states. I like Radix colour system for this reason (see below).

IMO, this is more about us adopting clear design specs, and less about exactly which library we employ to expose those colors (although we could definitely take inspiration from the guidelines in Radix color).

Finally, I just wanted to note that the design spec that I followed so far while working on DropdownMenu seems to be out of date with the latest guidance provided:

• blue is used as the hover color
• separators that neither go full width, nor align with the content

[ciampo]

Opened #50967 with the suggested tweaks