search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[material-ui][Menu] Let buttons opening menus have an activated state #44285

Open fredrikcarlbom opened 3 weeks ago

fredrikcarlbom commented 3 weeks ago

Summary

If having a couple of buttons, each opening a menu. It is confusing to me which button the menu is connected to as they do not have any visual indication.

Examples

Material Design has an Activated state which could be used to cover this.

Here is a sandbox with how this could be visualized: https://codesandbox.io/p/sandbox/menu-buttons-activated-state-yfpm57

Images from the sandbox above:

Activated state styling image image

Compared to existing default styling image image

Motivation

I want to make the connection between the button and the menu easier to understand, this might be useful if there are multiple menus next to each other, especially if they use icons instead of text.

While it is easy to implement in an application using MUI, I think the concept is important enough to warrant including it in MUI itself.

Search keywords: button menu activated

DiegoAndai commented 2 weeks ago

Thanks for the report @fredrikcarlbom! I added the waiting for šŸ‘šŸ¼ label so the community can vote for this new feature. If you want to see this implemented, please add a šŸ‘šŸ¼ reaction to the issue's description.

@zanivan @aarongarciah, what do you think? Should we provide this out of the box? or would it be better to just have a demo on achieving it?

zanivan commented 2 weeks ago

@DiegoAndai I think this should be provided out of the box. Iā€™m not sure if it should be done now or wait for the next version, but my main argument is that the WAI-ARIA examples align with the proposed behavior.

aarongarciah commented 2 weeks ago

@DiegoAndai @zanivan if it's trivial to implement, I'd advocate for implementing it in v6.