[AnnouncementBar] Add variants, dismissible support, and fix typo
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Improvements to the AnnouncementBar component to fix accessibility issues, add missing features, and improve consistency.
Improvements
2. Add dismissible / onDismiss support
No way to dismiss/close the bar. A common pattern is an onDismiss callback with a close button.
3. Accept ReactNode for text prop
The text prop only accepts string. It could accept ReactNode for richer content (e.g., links, bold text).
4. Add warning, success, info variants
Only 3 variants exist (normal, gradient, error). Common additions: warning, success, info.
6. Fix announementBar typo
The CVA variable name announementBar is missing a c — should be announcementBar.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (#672)
- Accessibility baseline (#673)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the AnnouncementBar component and inspect its existing variants, text prop, dismiss behavior, and CVA variable. The work is done when dismissible/onDismiss, ReactNode text, warning/success/info variants, and the corrected announcementBar name are supported, with the existing behavior preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100