Disabled option for Menu.Item

[going-confetti]

Hi team,

I'd like to discuss the Menu component, specifically a potential addition of the disabled prop for Menu.Item.

Currently, Menu.Item cannot be disabled, so in cases when a particular action is not allowed, hiding the menu item seems to be the only option - I believe it makes sense sometimes, for example if the user can't trigger the action because of RBAC (so the disabled status doesn't change often, if at all).

However, for menu items that change their disabled status often (such as preventing a running test from being deleted in the k6 plugin), it would be good to have the ability to disable them similarly to disabling buttons.

I'm wondering if there are guidelines for this (hiding vs. disabled UI elements) - let me know what you think, and I'll be happy to create a PR, if you consider this a good suggestion

@staton-hyse11 @JoaoSilvaGrafana

[JoaoSilvaGrafana]

Hi @going-confetti ,

Sorry for the late reply. I'd say this is a valuable change for Menu.Item, I think disabled is a better state for this case than hiding the element. Feel free to open a PR for the change, I can help reviewing it!

[going-confetti]

Thank you! I opened a draft PR #58980, which covers the following:

• Disabling all three kinds of menu items: buttons, links, sub-menus
• Taking the disabled state into account when using keyboard navigation and picking an item to be focused when the menu opens
• A Storybook example

I will add tests next week and ask for a review.

[staton-hyse11]

I wonder if we could tack on some documentation around the disabled item pattern here. Try to capture any standards, best practices, important call-outs, and most importantly; a11y requirements. Thoughts?

[going-confetti]

I think it's a great idea! While seemingly simple, the disabled state has quite a few variables (from the cursor type to a11y), so having a defined pattern would be very helpful.

[going-confetti]

@JoaoSilvaGrafana the PR is ready for review: #58980, let me know what you think