dequelabs / dequelabs/cauldron
Handling Action(s) with Overlays
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
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
- [ ] https://github.com/dequelabs/cauldron/issues/1715
- [x] https://github.com/dequelabs/cauldron/issues/1716
- [x] https://github.com/dequelabs/cauldron/issues/1717
- [x] https://github.com/dequelabs/cauldron/issues/1718
- [ ] https://github.com/dequelabs/cauldron/issues/1719
- [x] https://github.com/dequelabs/cauldron/issues/1740
- [ ] https://github.com/dequelabs/cauldron/issues/1720
Contributor guide
Research direction
Start by reviewing the existing OptionsMenu component and the linked implementation issues for AnchoredOverlay, ActionMenu, ActionMenuList, ActionMenuItem, and ActionPanel. Compare the proposed patterns with the cited design-system examples, then clarify the component APIs, accessibility behaviors, and scope before implementation; done requires an agreed replacement path for OptionsMenu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100