dequelabs / dequelabs/cauldron

Handling Action(s) with Overlays

Open
#1,705 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.