[v4] MenuItem active + hover state styling looks off

[adidahiya]

Environment

• Package version(s): core v4.0.0-beta.5, select v4.0.0-beta.5
• Operating System: macOS
• Browser name and version: Chrome

Steps to reproduce

1. Visit v4 select docs
2. Select an item in dropdown
3. Open the dropdown again, hover through items

Actual behavior

The active MenuItem goes from dark bg -> light bg, kind of an unexpected interaction:

Expected behavior

??

Possible solution

Use a slightly lighter or darker bg, but don't invert the colors when hovering over an active MenuItem

[aycai]

Sorry, scratch my previous comment - for the select component specifically, using the new hover state for the selected state (the light background with blue text) is the intended static state, and it will still have an :active state that matches the primary intent - this allows multi-select menus to retain feedback when clicking on selected menu items.

[adidahiya]

Ok, cool, the design proposed in your second comment makes more sense. I'll go head and implement that.

We have some unfortunate prop naming at the moment; <MenuItem active={true} /> actually represents the "selected" appearance. I can also go ahead and add selected?: boolean as a replacement and deprecate active?: boolean (although it won't fully go away until Blueprint 5.x; I don't want to add in additional breaking changes to v4.0 last minute).

[adidahiya]

There are some further complications -- currently, we apply the primary intent class to the MenuItem when active={true} and intent is undefined... I think we should stop doing that and instead set up the styles differently to achieve the design in your screenshot.