element-hq / element-hq/compound

Show 'more info' hint on toast when used as a popover trigger

Open
#403 0 comments 0 reactions 0 assignees View on GitHub
P-Web T-Component-Development
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

Image

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.