Skip to content

Wildcard V2: Unset reach-ui styles for selected `MenuItem`

Warren Gifford requested to merge kr/unset-menu-select-styles into main

Created by: courier-new

One of the benefits of Reach UI's collection of Menu components is that they have baked-in accessibility affordances, like being able to use the arrow keys to navigate up and down the children MenuLinks and MenuItems while keeping focus on the parent. However, it seems we weren't overriding Reach UI's default styles that are applied to an item selected in this way, which left us with an ugly dark gray-blue background color that doesn't match anything else in Sourcegraph. This PR unsets that background color, as well as the white font color, and aligns it to our brand's hover style instead.

Before After

Making this change also allows us to remove several custom stylesheets that were overwriting this in individual places. There may be more to be cleaned up there, but I only checked a couple instances.

We also had active/hover styles applying to disabled MenuItems and MenuLinks, which made it confusing whether or not you could interact with them. These styles have also been unset, and elements have been added to the Storybook story to cover them.

Before After

Test plan

Verified visually in Storybook, as well as verifying most instances of the component by hand:

  • ExtensionRegistrySidenav
  • SearchContextOwnerDropdown
  • MenuNavItem
  • UserNavItem
  • NavDropdown
  • OrgMembersListPage settings
  • OrgPendingInvites settings

No current instances of Menu currently had disabled items to test. Elements have been added to the Storybook story to cover this behavior.

I don't have code insights set up locally so I was unable to verify those instances but, inspecting the code, I expect it to be low risk.

Merge request reports