Skip to content

Add a Badge/Pill primitive to the design system and adopt it for counts and tiers #312

Description

@1nonlypiece

📌 Description

Count and tier indicators (urgency badges in VaultCard.tsx, the planned unread
count on the notification bell, queue counts) are styled inline and inconsistent.
StatusChip covers statuses, but there's no generic small Badge primitive for
numbers and labels.

This issue adds a Badge primitive and adopts it for count/tier indicators.

🎯 Requirements and Context

  • Add src/components/Badge.tsx with tone (neutral/info/success/warning/
    danger) and size props mapped to tokens.
  • Adopt it for the urgency badge in VaultCard.tsx.
  • Accessible: numeric badges expose an aria-label describing the count.
  • Token-styled; no hardcoded colors.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/badge-primitive

2. Implement changes

  • Create src/components/Badge.tsx; adopt in VaultCard.tsx.
  • Add src/components/__tests__/Badge.test.tsx.
  • Document it in design-system/documentation/status-chip.md.

3. Test and commit

  • Run npm test.
  • Cover edge cases: each tone/size, numeric aria-label, zero-count handling.

Example commit message

feat: add Badge primitive and adopt for urgency badge

✅ Guidelines

  • Minimum 95% test coverage on new/changed lines.
  • No regressions in VaultCard tests.
  • Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

  • Join the Disciplr contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/xvNAvMJf
  • Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
  • Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

Metadata

Metadata

Assignees

No one assigned

    Labels

    GRANTFOX OSSGrantFox open-source campaignMAYBE REWARDEDEligible for GrantFox rewardOFFICIAL CAMPAIGNOfficial GrantFox campaign issueStellar WaveIssues in the Stellar wave programarea-frontendFrontend / UI worktype-enhancementImprovement to existing functionalitytype-featureNew feature work

    Fields

    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions