feat(react-components): add size variant to Badge - #148
Open
RomanPogorov wants to merge 1 commit into
Open
Conversation
Badge had its spacing and type hard-coded in the base styles, so the only way to get anything other than text-xs/py-0.5 was to override the class list at the call site — which every consumer then does slightly differently. Move those into a `size` variant with two steps: regular px-2 py-0.5 text-xs (default) large px-2.5 py-1 text-sm `regular` reproduces the previous values exactly and is the default, so this is not a visual change for existing usages. `large` covers badges that sit next to a heading or carry a page-level status, where text-xs reads as a footnote rather than a peer of the title beside it. Icon sizing follows the step (size-3 / size-3.5).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Badgehard-codes its spacing and type in the base styles (px-2 py-0.5 text-xs) and exposes nosizeprop — onlyvariant. Anything larger has to be patched at the call site viaclassName, so each consumer ends up with its own ad-hoc numbers.Concretely: on the Smartbox admin app-review screen, badges sit next to the app name as its status and classification. At
text-xsthey read as a footnote rather than as peers of the heading beside them.Change
Spacing/type move out of the base into a
sizevariant with two steps:regular(default)px-2 py-0.5 text-xs+[&>svg]:size-3largepx-2.5 py-1 text-sm+[&>svg]:size-3.5regularreproduces the previous values exactly and is the default, so existing usages render identically — no visual diff anywhere in any consumer.Naming follows
Button, which already defaults tosize: "regular".Notes
largebadge doesn't stay undersized.Component/Badgegains a row demonstrating both sizes, includinglargewith an icon.biome checkpasses on both touched files.