Skip to content

Wildcard: Add `<Menu />`, `<MenuItem />` components

Administrator requested to merge tr/wildcard-menu-menuitem into main

Created by: umpox

Closes https://github.com/sourcegraph/sourcegraph/issues/27700

Implementation This PR adds styled wrappers around our @reach Menu components. We are already using these in many places across the app, I've looked into them and they are abstract enough that is seems preferable to continue using these and get the accessibility benefits they provide.

image

Migration The migration for this component will be done in https://github.com/sourcegraph/sourcegraph/issues/27701

Here are my thoughts of how we can do this:

  1. Migrate all usage of the @reach components to use these styled wrapper components.
  2. Migrate all usage of the dropdown-menu | dropdown-item | dropdown-header | dropdown-item CSS classes to instead use these new components. Remove the dropdown Bootstrap import. replicate styles through a CSS module for these new components
  3. Migrate all usage of the Dropdown | DropdownMenu | DropdownItem | DropdownToggle Reactstrap components to instead use these new components.
  4. (Larger stretch migration): Address menus across our entire application. We will need to do this for accessibility and these components might be able to help with some adjustment. See this Figma investigation by @quinnkeast. This should be a separate issue.

Merge request reports