tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix a couple issues with btrix-badge component (#2779)

Browse Source 
Closes #2774

## Changes

- Allows badges to expand in height when necessary
- Fixes `variant` type not including `"blue"` variant
- Fixes missing background for `"neutral"` variant
This commit is contained in:
Emma Segal-Grossman 2025-07-29 18:06:28 -04:00 committed by GitHub
parent 74324cdab4
commit b739de419c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/ui/badge.ts
View File

@ -12,6 +12,7 @@ export type BadgeVariant =
| "neutral" | "neutral"
| "primary" | "primary"
| "cyan" | "cyan"
| "blue"
| "high-contrast"; | "high-contrast";
/** /**
@ -46,7 +47,7 @@ export class Badge extends TailwindElement {
return html` return html`
<span <span
class=${clsx( class=${clsx(
tw`inline-flex h-[1rem] items-center justify-center align-[1px] text-xs`, tw`inline-flex min-h-4 items-center justify-center align-[1px] text-xs leading-none`,
this.outline this.outline
? [ ? [
tw`ring-1`, tw`ring-1`,
@ -54,7 +55,7 @@ export class Badge extends TailwindElement {
success: tw`bg-success-500 text-success-500 ring-success-500`, success: tw`bg-success-500 text-success-500 ring-success-500`,
warning: tw`bg-warning-600 text-warning-600 ring-warning-600`, warning: tw`bg-warning-600 text-warning-600 ring-warning-600`,
danger: tw`bg-danger-500 text-danger-500 ring-danger-500`, danger: tw`bg-danger-500 text-danger-500 ring-danger-500`,
neutral: tw`g-neutral-100 text-neutral-600 ring-neutral-600`, neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-600`,
"high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`, "high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`,
primary: tw`bg-white text-primary ring-primary`, primary: tw`bg-white text-primary ring-primary`,
cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`, cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,