Skip to content

feat(Badge): support size variants (sm/md/lg) - #658

Merged
nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
Derinsolababy:fix/620-badge-size
Sep 24, 2026
Merged

nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
Derinsolababy:fix/620-badge-size

Conversation

@Derinsolababy

@Derinsolababy Derinsolababy commented Sep 24, 2026 •

Copy link
Copy Markdown

Summary

The Badge component hardcoded its dimensions (px-2.5 py-0.5 text-[10px]), so every badge in the app rendered at the same size regardless of context. This PR adds an optional size prop.

Changes

src/components/Badge.tsx

  • New exported type BadgeSize = 'sm' | 'md' | 'lg' and optional size prop.
  • New SIZE_CLASSES map controlling gap, padding and font size:
    size classes
    sm (default) gap-1 px-2.5 py-0.5 text-[10px]
    md gap-1.5 px-3 py-1 text-xs
    lg gap-2 px-4 py-1.5 text-sm
  • Size classes are no longer hardcoded in the base class string; shape, weight, casing and colour logic are untouched.

src/components/__tests__/Badge.test.tsx

  • Tests that the default is sm and preserves the original classes.
  • Tests for md and lg class application.

Backwards compatibility

size defaults to sm, which produces exactly the previous classes, so all existing call sites (dashboard, policies, pools, oracle, ClaimStatus, PolicyCard, etc.) render identically. No call sites needed changing.

Testing

  • npx vitest run src/components/__tests__/Badge.test.tsx → 6/6 passing (3 existing + 3 new).
  • tsc --noEmit reports no errors in Badge files.

Usage

<Badge label="Active" />            // sm (unchanged)
<Badge label="Active" size="md" />
<Badge label="Active" size="lg" />

Closes #62
Closes #648
Closes #649
Closes #650

Badge previously hardcoded px-2.5 py-0.5 text-[10px]. Add an optional
size prop mapped to spacing/typography classes. Defaults to 'sm', which
reproduces the previous styling so existing call sites are unchanged.
@drips-wave

drips-wave Bot commented Sep 24, 2026

Copy link
Copy Markdown

@Derinsolababy Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for boisterous-sunshine-dd4c4c failed.

Name Link
🔨 Latest commit 3771748
🔍 Latest deploy log https://app.netlify.com/projects/boisterous-sunshine-dd4c4c/deploys/6ab51728e0b1b500088650d3

@nonsobethel0-dev
nonsobethel0-dev merged commit 0e38c06 into Parashield-Protocol:main Sep 24, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants