Opened 2 years ago

Closed 2 years ago

#10692 closed bug (fixed)

Menu: Use consistent styling for focused and "active" items

Reported by: Jörn Zaefferer Owned by:
Priority: major Milestone: 1.12.0
Component: Version: 1.11.2
Keywords: Cc:
Blocked by: Blocking:


We currently style active parent menu items with "ui-state-active", while everything else gets "ui-state-focus" (or hover, which we style the same as focus). When a menu item in a submenu has focus, the parent menu item gets "ui-state-active", which is inconsistent and confusing.

We probably shouldn't use "ui-state-active" in menu at all.

From this discussion:

Change History (6)

comment:1 Changed 2 years ago by Jörn Zaefferer

Milestone: none1.12.0
Priority: minormajor
Status: newopen

comment:2 Changed 2 years ago by Jörn Zaefferer

Somewhat related, the documentation mentions "active item" a lot. Maybe we should apply "ui-state-active" everywhere? If not, maybe we need to change the documentation to use "focus" or "focused" consistently.

comment:3 Changed 2 years ago by Jörn Zaefferer

This is what the menu, with the new base theme applied, currently looks like:

If we were to use ui-state-focus consistently, we'd get this: (here the triangle icon switches to white, which looks bad)

If we'd use ui-state-active instead, we'd get this:

I prefer the last option. It matches the menus on OSX.

comment:4 Changed 2 years ago by Jörn Zaefferer

I brought this up in the #css-chassis channel. After some discussion, the consensus was to use ui-state-active for both parent and child. I'll look into implementing that. Its definitely more than just replacing ui-state-focus with ui-state-active everywhere in menu.js.

comment:5 Changed 2 years ago by Jörn Zaefferer

Also discussed this at the weekly meeting last Wednesday, also agreed to use ui-state-active there. Created a PR to implement that:

comment:6 Changed 2 years ago by Jörn Zaefferer

Resolution: fixed
Status: openclosed

Menu: Use ui-state-active consistently

So far we were using ui-state-active on active parent items, ui-state-focus on active child items. The theme update highlighted the visual inconsistency. With this change, only ui-state-active is used.

Fixes #10692

Changeset: 0bbd1569182bc03e8dc4f5f8aa203e8edbe15f99

Note: See TracTickets for help on using tickets.