From f7aa9ece8b1960306ba1717837b76704d95ee6cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= Date: Thu, 7 Aug 2025 21:30:49 +0000 Subject: [PATCH 1/2] refactor: migrate Badges.tsx from emotion to Tailwind styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes include: - Removed @emotion/react dependency in Badges.tsx - Created badge variants using class-variance-authority - Created a reusable Badge component with Tailwind classes - Updated all badge components to use the new Badge component - Used cn utility for conditional class merging 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- site/src/components/Badges/Badges.tsx | 167 ++++++++++---------------- 1 file changed, 61 insertions(+), 106 deletions(-) diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 278eb890cd2ee..0f6a541473ab8 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Tooltip from "@mui/material/Tooltip"; import { Stack } from "components/Stack/Stack"; import { @@ -7,49 +6,57 @@ import { type PropsWithChildren, forwardRef, } from "react"; +import { type VariantProps, cva } from "class-variance-authority"; +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>; +interface BadgeProps + extends HTMLAttributes, + VariantProps { +} + +const Badge = forwardRef( + ({ className, variant, ...props }, ref) => { + return ( + + ); + }, +); export const EnabledBadge: FC = () => { return ( - + Enabled - + ); }; export const EntitledBadge: FC = () => { - return Entitled; + return Entitled; }; interface HealthyBadge { @@ -57,20 +64,20 @@ interface HealthyBadge { } export const HealthyBadge: FC = ({ derpOnly }) => { return ( - + {derpOnly ? "Healthy (DERP only)" : "Healthy"} - + ); }; export const NotHealthyBadge: FC = () => { - return Unhealthy; + return Unhealthy; }; export const NotRegisteredBadge: FC = () => { return ( - Never seen + Never seen ); }; @@ -78,7 +85,7 @@ export const NotRegisteredBadge: FC = () => { export const NotReachableBadge: FC = () => { return ( - Not reachable + Not reachable ); }; @@ -88,113 +95,61 @@ export const DisabledBadge: FC = forwardRef< HTMLAttributes >((props, ref) => { return ( - ({ - 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 - + ); }); export const EnterpriseBadge: FC = () => { return ( - ({ - backgroundColor: theme.branding.enterprise.background, - border: `1px solid ${theme.branding.enterprise.border}`, - color: theme.branding.enterprise.text, - }), - ]} - > + Enterprise - + ); }; export const PremiumBadge: FC = () => { return ( - ({ - backgroundColor: theme.branding.premium.background, - border: `1px solid ${theme.branding.premium.border}`, - color: theme.branding.premium.text, - }), - ]} - > + Premium - + ); }; export const PreviewBadge: FC = () => { return ( - ({ - border: `1px solid ${theme.roles.preview.outline}`, - backgroundColor: theme.roles.preview.background, - color: theme.roles.preview.text, - }), - ]} - > + Preview - + ); }; export const AlphaBadge: FC = () => { return ( - ({ - border: `1px solid ${theme.roles.preview.outline}`, - backgroundColor: theme.roles.preview.background, - color: theme.roles.preview.text, - }), - ]} - > + Alpha - + ); }; export const DeprecatedBadge: FC = () => { return ( - ({ - border: `1px solid ${theme.roles.danger.outline}`, - backgroundColor: theme.roles.danger.background, - color: theme.roles.danger.text, - }), - ]} - > + Deprecated - + ); }; export const Badges: FC = ({ children }) => { return ( = ({ children }) => { {children} ); -}; +}; \ No newline at end of file From 026a1661e5b28a10eae52c2057c498ad877784b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= Date: Thu, 7 Aug 2025 21:49:28 +0000 Subject: [PATCH 2/2] style: apply code formatting to Badges.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- site/src/components/Badges/Badges.tsx | 62 +++++++++------------------ 1 file changed, 21 insertions(+), 41 deletions(-) diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 0f6a541473ab8..3c63ce70f05ad 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -1,4 +1,5 @@ import Tooltip from "@mui/material/Tooltip"; +import { type VariantProps, cva } from "class-variance-authority"; import { Stack } from "components/Stack/Stack"; import { type FC, @@ -6,7 +7,6 @@ import { type PropsWithChildren, forwardRef, } from "react"; -import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "utils/cn"; const badgeVariants = cva( @@ -14,14 +14,20 @@ const badgeVariants = cva( { variants: { variant: { - enabled: "border border-success-outline bg-success-background text-success-text", - error: "border border-error-outline bg-error-background text-error-text", + 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", + 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: { @@ -32,8 +38,7 @@ const badgeVariants = cva( interface BadgeProps extends HTMLAttributes, - VariantProps { -} + VariantProps {} const Badge = forwardRef( ({ className, variant, ...props }, ref) => { @@ -107,54 +112,29 @@ export const DisabledBadge: FC = forwardRef< }); export const EnterpriseBadge: FC = () => { - return ( - - Enterprise - - ); + return Enterprise; }; export const PremiumBadge: FC = () => { - return ( - - Premium - - ); + return Premium; }; export const PreviewBadge: FC = () => { - return ( - - Preview - - ); + return Preview; }; export const AlphaBadge: FC = () => { - return ( - - Alpha - - ); + return Alpha; }; export const DeprecatedBadge: FC = () => { - return ( - - Deprecated - - ); + return Deprecated; }; export const Badges: FC = ({ children }) => { return ( - + {children} ); -}; \ No newline at end of file +};