raystack / raystack/apsara

[AnnouncementBar] Add variants, dismissible support, and fix typo

Open
#596 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.