search

palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.75k stars 2.18k forks source link

[FR] Ability to use current `active` style as `selected` in first class way for `MenuItem` #7100

Open evansjohnson opened 3 days ago

evansjohnson commented 3 days ago

Feature request

The current "selected" styling adds a checkmark icon which takes up space. This can be seen as undesirable in menus that already add icons to menu items.

Allowing this to be configured in a first class way would mean we could still lean on BP for the aria-selected attribute that gets added.

This would be a breaking change to outright change, but it would be nice to have a way to opt into an alternate menu item styling where selected is styled the way active currently is, and active would style with something that resembles a focus outline.

I suspect there are many uses of MenuItem that ignore the docs guidance, and abuse the active prop for selected styling.

Examples

desired behavior:

Screenshot 2024-11-25 at 3 02 50 PM

current behavior:

Screenshot 2024-11-25 at 3 02 45 PM
evansjohnson commented 3 days ago

One reason this may be abused so often (hard to back this claim up so feel free to object - in my experience this is happening in practice) is that I think the Menu component as currently implemented makes it difficult to actually get a proper active state for MenuItems. I see this was implemented in BP's QueryList component, but it seems quite non trivial to expect something similar to be set up for every Menu.