Menu: Add "destructive" state

[t-hamano]

What problem does this address?

In WordPress core and Gutenberg, a button typically appears red if its action is destructive.

Delete Template:

Move Post to Trash:

Move Post to Trash (Classic Editor):

On the other hand, in the UI already implemented with DropdownMenuItemV2 components, these action buttons are not red.

Delete template:

Move Post to Trash:

What is your proposed solution?

As far as I know, no option exists to make the DropdownMenuItemV2 color red. I imagine that something like the isDestructive prop of the button component could be used for these use cases.

Below is a list of the states I would expect.

Default:

Hovered:

Focused:

[mirka]

My gut feeling is to avoid adding isDestructive as a prop, since that can lead to prop bloat like we can see in the current Button API. This is just a color variant, so ideally it would be done through a color-related API.

However, there is still a lot of uncertainty around how we want to deal with colors in a systematic way. The components package has an experimental way of doing that, based on CSS variables. But I know @SaxonF has also been working on a color token system.

For the time being, especially since DropdownMenuV2 is still private, I wonder if we should stick to directly overriding CSS variables from the consumer code, rather than adding a new API to DropdownMenuItem.

cc @DaniGuardiola

[ciampo]

FWIW, I would also be very cautious with adding props for the same reasons listed by @mirka — especially if what differentiates a "destructive" item from a standard one is just the text color.

Until we have more clarity on a few aspects (theming, specs of destructive menu items), I would suggest applying the text color directly to Menu.Item or Menu.ItemLabel

[ciampo]

Also, if I'm understanding correctly from the conversation in #58390, we may be leaning towards having "destructive" actions requiring a confirmation dialog, meaning that the menu item would not need to have any distinctive "destructive" styles (since those styles should be applied to the button in the confirm dialog)