element-hq / element-hq/compound
Show 'more info' hint on toast when used as a popover trigger
- Dominant language
- MDX
- Stars
- 24
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
Toasts on Web now have a new variant for when they can be clicked to reveal more info in a popover or menu. The toast has an outward-facing chevron which inverts in color when hovered or the popover is open.
https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=3627-42621
We should implement this in our [Toast](https://compound.element.io/?path=/docs/compound-web_toast--docs) component by making it automatically apply clickable styles and show the 'more info' hint whenever `aria-haspopup` is set. It should additionally react to the state of `aria-expanded`. That way a `` can be used as the `trigger` of a `` without any additional configuration.
- [ ] Component has unit tests
- [ ] Component has visual regression tests
- [ ] Component passes accessibility requirements
- [ ] Component is documented in component library
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked Toast component and its component-library documentation, then inspect the existing unit and visual regression test setup. Implement the aria-haspopup and aria-expanded behavior, and consider the issue complete when the requested tests, accessibility checks, and documentation are in place.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100