Skip to content

refactor: migrate Badges to Tailwind #19246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+60 −125
Open

refactor: migrate Badges to Tailwind #19246

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7aa9ec
refactor: migrate Badges.tsx from emotion to Tailwind styling
aslilac Aug 7, 2025
026a166
style: apply code formatting to Badges.tsx
aslilac Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 60 additions & 125 deletions site/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,96 @@
import type { Interpolation, Theme } from "@emotion/react";
import Tooltip from "@mui/material/Tooltip";
import { type VariantProps, cva } from "class-variance-authority";
import { Stack } from "components/Stack/Stack";
import {
type FC,
type HTMLAttributes,
type PropsWithChildren,
forwardRef,
} from "react";
import { cn } from "utils/cn";

const styles = {
badge: {
fontSize: 10,
height: 24,
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.085em",
padding: "0 12px",
borderRadius: 9999,
display: "flex",
alignItems: "center",
width: "fit-content",
whiteSpace: "nowrap",
const badgeVariants = cva(
"text-[10px] h-6 font-semibold uppercase tracking-[0.085em] px-3 rounded-full flex items-center w-fit whitespace-nowrap",
{
variants: {
variant: {
enabled:
"border border-success-outline bg-success-background text-success-text",
error:
"border border-error-outline bg-error-background text-error-text",
warn: "border border-warning-outline bg-warning-background text-warning-text",
neutral: "border border-l1-outline bg-l1-background text-l1-text",
enterprise:
"border border-enterprise-border bg-enterprise-background text-enterprise-text",
premium:
"border border-premium-border bg-premium-background text-premium-text",
preview:
"border border-preview-outline bg-preview-background text-preview-text",
danger:
"border border-danger-outline bg-danger-background text-danger-text",
},
},
defaultVariants: {
variant: "neutral",
},
},
);

enabledBadge: (theme) => ({
border: `1px solid ${theme.roles.success.outline}`,
backgroundColor: theme.roles.success.background,
color: theme.roles.success.text,
}),
errorBadge: (theme) => ({
border: `1px solid ${theme.roles.error.outline}`,
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,
}),
warnBadge: (theme) => ({
border: `1px solid ${theme.roles.warning.outline}`,
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,
}),
} satisfies Record<string, Interpolation<Theme>>;
interface BadgeProps
extends HTMLAttributes<HTMLSpanElement>,
VariantProps<typeof badgeVariants> {}

const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
({ className, variant, ...props }, ref) => {
return (
<span
{...props}
ref={ref}
className={cn(badgeVariants({ variant }), className)}
/>
);
},
);

export const EnabledBadge: FC = () => {
return (
<span css={[styles.badge, styles.enabledBadge]} className="option-enabled">
<Badge variant="enabled" className="option-enabled">
Enabled
</span>
</Badge>
);
};

export const EntitledBadge: FC = () => {
return <span css={[styles.badge, styles.enabledBadge]}>Entitled</span>;
return <Badge variant="enabled">Entitled</Badge>;
};

interface HealthyBadge {
derpOnly?: boolean;
}
export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
return (
<span css={[styles.badge, styles.enabledBadge]}>
<Badge variant="enabled">
{derpOnly ? "Healthy (DERP only)" : "Healthy"}
</span>
</Badge>
);
};

export const NotHealthyBadge: FC = () => {
return <span css={[styles.badge, styles.errorBadge]}>Unhealthy</span>;
return <Badge variant="error">Unhealthy</Badge>;
};

export const NotRegisteredBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy has never come online and needs to be started.">
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
<Badge variant="warn">Never seen</Badge>
</Tooltip>
);
};

export const NotReachableBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy not responding to http(s) requests.">
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
<Badge variant="warn">Not reachable</Badge>
</Tooltip>
);
};
Expand All @@ -88,117 +100,40 @@ export const DisabledBadge: FC = forwardRef<
HTMLAttributes<HTMLSpanElement>
>((props, ref) => {
return (
<span
<Badge
{...props}
ref={ref}
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.experimental.l1.outline}`,
backgroundColor: theme.experimental.l1.background,
color: theme.experimental.l1.text,
}),
]}
className="option-disabled"
variant="neutral"
className={cn("option-disabled", props.className)}
>
Disabled
</span>
</Badge>
);
});

export const EnterpriseBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.branding.enterprise.background,
border: `1px solid ${theme.branding.enterprise.border}`,
color: theme.branding.enterprise.text,
}),
]}
>
Enterprise
</span>
);
return <Badge variant="enterprise">Enterprise</Badge>;
};

export const PremiumBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.branding.premium.background,
border: `1px solid ${theme.branding.premium.border}`,
color: theme.branding.premium.text,
}),
]}
>
Premium
</span>
);
return <Badge variant="premium">Premium</Badge>;
};

export const PreviewBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Preview
</span>
);
return <Badge variant="preview">Preview</Badge>;
};

export const AlphaBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Alpha
</span>
);
return <Badge variant="preview">Alpha</Badge>;
};

export const DeprecatedBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.danger.outline}`,
backgroundColor: theme.roles.danger.background,
color: theme.roles.danger.text,
}),
]}
>
Deprecated
</span>
);
return <Badge variant="danger">Deprecated</Badge>;
};

export const Badges: FC<PropsWithChildren> = ({ children }) => {
return (
<Stack
css={{ margin: "0 0 16px" }}
direction="row"
alignItems="center"
spacing={1}
>
<Stack className="mb-4" direction="row" alignItems="center" spacing={1}>
{children}
</Stack>
);
Expand Down
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy