Skip to content

batches: clean up dropdown menu buttons

Administrator requested to merge kr/dropdown-cleanup into main

Created by: courier-new

Note: This branch is temporarily based on kr/unset-menu-select-styles, which applies general style fixes to the underlying Reach UI components that power the set of Menu Wildcard components and thus impacts the areas of work for this PR.

A small collection of accessibility, consistency, and visual polish tweaks to our "dropdown button"-style components.

  • Adds a custom CSS variable for the darker border color per Rob's request in Figma
  • Replaces Menu usage with Popover for execution options dropdown to improve accessibility
    • MenuList doesn't allow you to tab to its children. It works more like a native dropdown selector where the parent holds focus so long as it's open and you have to use the arrow keys to navigate options and ultimately select one. That doesn't work so well when we have checkboxes rather than items to select.
    • I was aware of this earlier but originally thought this was a bug in MenuList. Now I understand it's more like expected behavior.
    • Switching to Popover gives us the same floating menu effect, but without locking focus to the parent.
  • Swaps .dropdown-toggle for ChevronDownIcon instead -- see my reasoning (tldr; we're inconsistent with this everywhere, but this icon is the simplest in terms of implementation, matches Wildcard, and looks the best!!)
  • Updates DropdownButton to use MenuList (ah, it's intended purpose!) and unifies style to match ExecutionOptions

https://user-images.githubusercontent.com/8942601/154394301-b77932cf-4129-4018-82f2-a02faf442a50.mov

https://user-images.githubusercontent.com/8942601/154394307-4bb019ce-1f91-4006-b29f-6a77df950b08.mov

Here's the Storybook story for this branch to play with the updated DropdownButton.

Test plan

Verified visually in Storybook stories. Manually tested both instances of DropdownButton (bulk actions and publish-from-preview). Walked through flow with keyboard navigation and regular mouse usage for all components.

Merge request reports

Loading