Handling Action(s) with Overlays

[scurker]

The existing OptionsMenu component is one of the more established components before some of the more modern practices have been put into place in Cauldron. There's some fairly outdated patterns and the inflexibility of the component has led to various bugs and very restricted usage.

Changes to the component patterns would very likely require very significant breaking changes. As such, usage of OptionsMenu should be deprecated and implemented as a new set of components that provide similar capabilities with better design patterns. This ensures we don't require all existing usages of OptionsMenu to adhere to new patterns while providing a smoother transition path towards improved component apis.

Inspiration

The typical terminology with these types of controls is usually "ActionMenu" or "DropdownMenu" as outlined by some of the examples from other design systems below:

• https://primer.style/components/action-menu/react/beta
• https://getbootstrap.com/docs/5.0/components/dropdowns/
• https://opensource.adobe.com/spectrum-web-components/components/action-menu/
• https://carbondesignsystem.com/components/menu/usage/

These components are anchored with some other control that can be optionally configured, and overlay other content on the page when expanded.

There appears to be 2 potential opposing patterns:

• True menus that contain some list(s) of items that perform an action once clicked, may contain sub-menus
• Overlays that contain a variety of actions, can include static content and/or form controls

Component Structure

There is a lot of similarity between the opposing patterns with the main opposition being a controlled list of items vs less structured content. We would likely want to structure the components separately to enforce some rigidity when necessary (as with an action menu) while encapsulation similar functionality.

• AnchoredOverlay - Container element to display the overlay of its contents anchored to a trigger
  • ActionMenu - Composed with AnchorOverlay to style and contain the action menu and its list of items
    • ActionMenuList - Borrowing behaviors from Listbox to implement the list
      • ActionMenuItem - Borrowing behaviors from ListboxOption to implement the list items
  • ActionPanel - Composed with AnchorOverlay to style and contain items within the panel

AnchoredOverlay would be responsible for managing behaviors for with any attributes for displaying, such as aria-expanded. While each of the components could manage individual behaviors for its respective components. We'd likely want to replace/share some of the existing functionality that exists within Combobox with AnchoredOverlay so that we can consolidate these patterns within a single component.

Implementations

Components

Beta Give feedback

1. Create AnchoredOverlay Component #1715
   rfc rocket +2
2. Create ActionMenu Component #1716
   info needed rfc +2
3. Create ActionList Component #1717
   info needed rfc +2
4. Create ActionListItem Component #1718
   info needed rfc +2
5. Create ActionPanel Component #1719
   info needed rfc rocket +3
6. Create ActionListGroup component #1740
   info needed rocket +2
7. Refactor Combobox to use AnchoredOverlay #1720
   info needed +1