After exploring possible solutions to make menu-item selection clearer, especially for multi-selection in menus for T345291, here is the proposal:

To reinforce selection, the following elements would be included in the selected menu-item:

• A 16px check icon as the end icon within the menu-item.
• The @color-progressive will be used for labels and icons within the selected menu-item.

The check icon could be implemented as a configurable prop to allow for showing/hiding it as needed for specific menus. By default, the check icon would be visible for both multi-selection and single-selection menus but could be hidden in cases where the menu-item contains too many visible elements.

New menu-item styles

These would be the new menu-item styles proposed, which would make the menu-item selected more prominent as well as will be better aligned with other components such as Accordion (where we use these hover and active bg color styles):

• Default: it will remain the same as it is now
• Hover: update the background to @background-color-interactive-subtle and the text/icon to @color-base--hover
• Active: update the background to @background-color-interactive and the text/icon to @color-base-emphasized
• Selected: the bg color will remain @background-color-progressive-subtle and the text/icon will update to @color-progressive
• Selected Hover: the bg color will remain @background-color-progressive-subtle and the text/icon will update to @color-progressive--hover
• Selected Active: we will implement this new selected-active state using @background-color-progressive-subtle and @color-progressive--active
• Disabled: it will remain the same as it is now

This proposal looks great Bárbara. Thank you for putting this together.

Just reviewed with Bárbara and I think it looks great! A couple of thoughts I shared that shouldn't interrupt this from moving forward...

• The use of blue text and it not being a link is interesting...I think in this context it totally makes sense but I imagine in any other scenario we'd avoid using blue text that wasn't a link.
• Related to above, we now have 3 separate ways to indicate that something is selected (Blue bg, blue text, and checkmark), in general I think 2 contrasting ways (One color + one icon) to show would suffice but if the icon can be optional, this makes sense.
• I like that the checkmark is optional, similar to other decisions recently, we can suggest it or give guidance in the documentation but still allow it to be flexible

El T368022#10036117, @mwilliams escribió:

Just reviewed with Bárbara and I think it looks great! A couple of thoughts I shared that shouldn't interrupt this from moving forward...

• The use of blue text and it not being a link is interesting...I think in this context it totally makes sense but I imagine in any other scenario we'd avoid using blue text that wasn't a link.

@mwilliams thank you for the feedback and good point about the blue text in links. Anyway, we already use blue text in other non-links components, such as Progressive Normal Button and Tabs. Additionally, the menu item will be highlighted in blue when selected and reinforced with a check icon, clearly indicating that the blue signifies selection.

In addition, we are currently using the color blue to indicate the selected menu item in some production use cases, such as the VE menus:

• Related to above, we now have 3 separate ways to indicate that something is selected (Blue bg, blue text, and checkmark), in general I think 2 contrasting ways (One color + one icon) to show would suffice but if the icon can be optional, this makes sense.

Since the check icon would be optional in cases where the menu contains too many items, I would leave these three options available in case the check icon is hidden. This way, the background color and text color still make the selection prominent.

• I like that the checkmark is optional, similar to other decisions recently, we can suggest it or give guidance in the documentation but still allow it to be flexible

Great, we will provide recommendations on when to make it visible or not.

After some consideration, we’ve decided to implement the check icon as a configurable property within the MenuItem component and use it exclusively for indicating multi-selection. The current single-selection works well and will even be reinforced with blue text (so there will be 2 elements to indicate selection: blue background + blue text).

So we will use the following selection indicators:

• Single-selection: blue background (current) + blue text (new)
• Multi-selection: blue background + blue text + check icon (this icon will serve as a clear indicator to differentiate the multi-selection from the single-selection)

This approach effectively differentiates menu types, making it easier for users to understand when multi-selection is available.

For posterity, here's the patchset of the patch that originally added multiselect that contained the check icon (it was removed since we decided to defer adding it until this task was completed)

Now that we have the design decided, I've updated this task to include what needs to be done on the implementation side. Moving back to "Up Next" until we can pick this up to work on it.

As decided today with @lwatson, I will include the new styles of the menu item states in this task and then we will work on the check icon inclusion in this separated task T371998, since the check icon inclusion seems like a more complex work that will only affect the multi-select menu.

@bmartinezcalvo leaving notes here for you:

The MenuItem is a listed item (<li>) element. Since <li> is a non-interactive element, we use props (selected, active, highlighted, and disabled) to create dynamic CSS selectors in MenuItem. For example, when the active prop is true, the <li> element has the .cdx-menu-item--active class which indicates that the menu item is being pressed.

These are the relevant selectors needed to update the styles in this task:

• .cdx-menu-item--highlighted - add a hover state to the menu item [ See example below. ]
• .cdx-menu-item--active
• .cdx-menu-item--selected
• .cdx-menu-item--selected & .cdx-menu-item--highlighted - selected hover state
• For selected active… We want to ensure that when the MenuItem is active and selected it has the Figma spec styles. I’d suggest declaring this rule inside the selected block so it can receive the selected background color styles. Then we only need to specify the text color when active and selected. Since active and selected styles are nested inside enabled, we are targeting an element with cdx-menu-item--enabled, cdx-menu-item--selected, and cdx-menu-item--active selectors to apply the text color.

Inside VSCode, find the selector (using Command + F in Mac) then add the background color and text color according to the Figma spec. You’ll find active and selected nested inside the enabled block. The Less styles are nested and we use & to reference the parent selector.
Tip: when you hover over the selector in VSCode, it provides the long-format output of the selector.

Example

Hover: update the background to @background-color-interactive-subtle and the text/icon to @color-base--hover

Inside .cdx-menu-item, find &--enabled nested styles, then find &.cdx-menu-item--highlighted to apply hover state styles.

.cdx-menu-item {
        // more styles

	&--enabled {
                &.cdx-menu-item--highlighted {
			background-color: @background-color-interactive-subtle;
			color: @color-base--hover;
			cursor: @cursor-base--hover;
                }
        }

// more styles	
}

Edit: Change .cdx-menu-item:hover to .cdx-menu-item--highlighted.

Change #1060858 had a related patch set uploaded (by Bmartinezcalvo; author: Bmartinezcalvo):

[design/codex@main] docs: update MenuItem interaction states

https://gerrit.wikimedia.org/r/1060858

Change #1060858 merged by jenkins-bot:

[design/codex@main] docs: update MenuItem interaction states

https://gerrit.wikimedia.org/r/1060858

Design Review done. The style updates in the MenuItem states look good.

Change #1070656 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.11.1 to v1.12.0

https://gerrit.wikimedia.org/r/1070656

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/6bc5837bc4/w/

Change #1070656 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.11.1 to v1.12.0

https://gerrit.wikimedia.org/r/1070656