| author |  Julius Marminge <julius0216@outlook.com> 2026-09-22 12:22:14-07:00 |
| committer |  GitHub <noreply@github.com> 2026-09-22 12:22:14-07:00 |
| log | 8d02447c36df2cf6cbfe1501738314685a22a1fc |
| tree | eeafdf225486a3d88b1c1f58bcb88c7bbe3286b7 |
| parent | be80e369394f5d0cb771b51669686f2bc916e543 |
| signature | Signed by PGP key B5690EEEBB952194 |
refactor(web): add a label variant to Badge (#13029)
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>6 files changed, 10 insertions(+), 16 deletions(-)
apps
web
src
components
chat
pullRequest
settings
sidebar
scripts
apps/web/src/components/chat/TraitsPicker.tsx+1-4
| ... | ... | @@ -95,10 +95,7 @@ const ULTRATHINK_PROMPT_PREFIX = "Ultrathink:\n"; |
| 95 | 95 | |
| 96 | 96 | function DefaultBadge() { |
| 97 | 97 | return ( |
| 98 | <Badge | |
| 99 | variant="outline" | |
| 100 | className="inline-flex h-4 w-fit min-w-0 items-center justify-center gap-0 border-border/70 bg-muted/60 px-1.5 py-0 font-semibold text-[10px] text-muted-foreground leading-none sm:h-4" | |
| 101 | > | |
| 98 | <Badge variant="outline" size="sm" className="min-w-0"> | |
| 102 | 99 | Default |
| 103 | 100 | </Badge> |
| 104 | 101 | ); |
apps/web/src/components/pullRequest/pullRequestPresentation.tsx+3-9
| ... | ... | @@ -57,14 +57,8 @@ export function PullRequestLabelChip({ |
| 57 | 57 | return ( |
| 58 | 58 | <Badge |
| 59 | 59 | size={size} |
| 60 | variant="secondary" | |
| 61 | className={cn( | |
| 62 | "min-w-0 max-w-40 shrink justify-start gap-1 rounded-full px-2", | |
| 63 | size === "sm" && "h-4 text-[.625rem]", | |
| 64 | color && | |
| 65 | "bg-[color-mix(in_srgb,var(--label)_8%,transparent)] text-[color-mix(in_srgb,var(--label)_30%,var(--color-foreground))] dark:bg-[color-mix(in_srgb,var(--label)_12%,transparent)] dark:text-[color-mix(in_srgb,var(--label)_45%,var(--color-foreground))]", | |
| 66 | className, | |
| 67 | )} | |
| 60 | variant={color ? "label" : "secondary"} | |
| 61 | className={cn("min-w-0 max-w-40 shrink justify-start", className)} | |
| 68 | 62 | {...(color ? { style: { "--label": color } as CSSProperties } : {})} |
| 69 | 63 | > |
| 70 | 64 | <span className="truncate">{label.name}</span> |
| ... | ... | @@ -411,7 +405,7 @@ export function PullRequestReviewOutcomeBadge({ |
| 411 | 405 | }) { |
| 412 | 406 | const presentation = REVIEW_OUTCOME_PRESENTATION[outcome]; |
| 413 | 407 | return ( |
| 414 | <Badge size="sm" variant={presentation.badgeVariant} className={cn("gap-1", className)}> | |
| 408 | <Badge size="sm" variant={presentation.badgeVariant} className={className}> | |
| 415 | 409 | <presentation.Icon aria-hidden className="size-3" /> |
| 416 | 410 | {presentation.label} |
| 417 | 411 | </Badge> |
apps/web/src/components/settings/KeybindingsSettings.tsx+1-1
| ... | ... | @@ -977,7 +977,7 @@ function KeybindingRowMenu({ |
| 977 | 977 | function KeybindingSourceBadge({ source }: { source: KeybindingRow["source"] }) { |
| 978 | 978 | if (source === "Default") return null; |
| 979 | 979 | return ( |
| 980 | <Badge variant="outline" size="sm" className="font-normal text-muted-foreground"> | |
| 980 | <Badge variant="outline" size="sm"> | |
| 981 | 981 | {source} |
| 982 | 982 | </Badge> |
| 983 | 983 | ); |
apps/web/src/components/sidebar/SidebarChrome.tsx+1-1
| ... | ... | @@ -66,7 +66,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({ |
| 66 | 66 | <SidebarBrand onBackdrop={backdropVariant !== null} /> |
| 67 | 67 | {pillLabel ? ( |
| 68 | 68 | <Badge |
| 69 | className="relative z-10 ml-1 hidden rounded-full px-1.5 text-muted-foreground @[15rem]/sidebar-header:inline-flex" | |
| 69 | className="relative z-10 ml-1 hidden @[15rem]/sidebar-header:inline-flex" | |
| 70 | 70 | data-environment-identification="pill" |
| 71 | 71 | size="sm" |
| 72 | 72 | variant="secondary" |
apps/web/src/components/ui/badge.tsx+3
| ... | ... | @@ -34,6 +34,9 @@ const badgeVariants = cva( |
| 34 | 34 | secondary: "bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90", |
| 35 | 35 | success: "bg-success/8 text-success-foreground dark:bg-success/16", |
| 36 | 36 | warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16", |
| 37 | // A code-host label tinted from the --label color the consumer sets in style. | |
| 38 | label: | |
| 39 | "bg-[color-mix(in_srgb,var(--label)_8%,transparent)] text-[color-mix(in_srgb,var(--label)_30%,var(--color-foreground))] dark:bg-[color-mix(in_srgb,var(--label)_12%,transparent)] dark:text-[color-mix(in_srgb,var(--label)_45%,var(--color-foreground))]", | |
| 37 | 40 | }, |
| 38 | 41 | }, |
| 39 | 42 | }, |
scripts/lint-restyle-ceiling.ts+1-1
| ... | ... | @@ -8,7 +8,7 @@ import * as NodeURL from "node:url"; |
| 8 | 8 | // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the |
| 9 | 9 | // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you |
| 10 | 10 | // migrate a file, and delete this script when the rule becomes an error. |
| 11 | export const RESTYLE_CEILING = 1031; | |
| 11 | export const RESTYLE_CEILING = 1008; | |
| 12 | 12 | |
| 13 | 13 | const RULE = "shadcn(no-restyle)"; |
| 14 | 14 |