From 2e6fdf2344d7704179e3380c7465bc557a417d93 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Thu, 9 Apr 2026 19:55:59 +1000 Subject: [PATCH] fix: resolve `` incorrect sizes (#22539) This pull-request makes a few changes to our `` component to bring it inline with Figma. * Added all variants to the stories of Figma (they can vary per badge-type, so its better we track everything). * Removed the `border` variant of the component, border variants should be on all `sm` and `md`. * Added a hover effect to the `default` variant (per-design). * Resolved issue with sizings of `xs` and `sm` plus resolved iconography. * Resolved issue with icons not showing at all on `xs` variants. --- site/src/components/Badge/Badge.stories.tsx | 150 ++++++++++++++---- site/src/components/Badge/Badge.tsx | 36 ++--- site/src/components/Badges/Badges.tsx | 38 +---- .../DynamicParameter/DynamicParameter.tsx | 6 +- .../ExternalAuthButton.tsx | 6 +- .../AIGovernanceAddOnCard.tsx | 2 +- .../WorkspacesPage/BatchUpdateModalForm.tsx | 4 +- 7 files changed, 151 insertions(+), 91 deletions(-) diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx index 9754262742..d1478630ae 100644 --- a/site/src/components/Badge/Badge.stories.tsx +++ b/site/src/components/Badge/Badge.stories.tsx @@ -1,56 +1,150 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { Settings, TriangleAlert } from "lucide-react"; +import { Database, Settings, TriangleAlert } from "lucide-react"; +import { Badges } from "#/components/Badges/Badges"; import { Badge } from "./Badge"; const meta: Meta = { title: "components/Badge", - component: Badge, - args: { - children: "Badge", - }, }; export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + render: () => ( + + + + Text + + + + Text + + + + Text + + + ), +}; export const Warning: Story = { - args: { - variant: "warning", - }, + render: () => ( + + + Warning + + + + + Warning + + + + Warning + + + ), }; export const Destructive: Story = { - args: { - variant: "destructive", - }, + render: () => ( + + + Destructive + + + + + Destructive + + + + Destructive + + + ), }; export const Info: Story = { - args: { - variant: "info", - }, + render: () => ( + + + Info + + + Info + + + Info + + + ), }; export const Green: Story = { - args: { - variant: "green", - }, + render: () => ( + + + Green + + + Green + + + Green + + + ), +}; + +export const Purple: Story = { + render: () => ( + + + Purple + + + Purple + + + Purple + + + ), +}; + +export const Magenta: Story = { + render: () => ( + + + Magenta + + + Magenta + + + Magenta + + + ), }; export const SmallWithIcon: Story = { - args: { - variant: "default", - size: "sm", - children: <>{} Preset, - }, + render: () => ( + + + Preset + + ), }; export const MediumWithIcon: Story = { - args: { - variant: "warning", - size: "md", - children: <>{} Immutable, - }, + render: () => ( + + + Immutable + + ), }; diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 889b37f41c..417ddc24c5 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -1,5 +1,5 @@ /** - * Copied from shadc/ui on 11/13/2024 + * Copied from shadcn/ui on 11/13/2024 * @see {@link https://ui.shadcn.com/docs/components/badge} */ import { cva, type VariantProps } from "class-variance-authority"; @@ -8,35 +8,31 @@ import { cn } from "#/utils/cn"; const badgeVariants = cva( ` - inline-flex items-center rounded-md border px-2 py-1 text-nowrap - transition-colors - [&_svg]:pointer-events-none [&_svg]:pr-0.5 [&_svg]:py-0.5 [&_svg]:mr-0.5 + inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-nowrap + transition-colors [&_svg]:py-0.5 border-solid + [&_svg]:pointer-events-none `, { variants: { variant: { default: - "border-transparent bg-surface-secondary text-content-secondary shadow", + "border-surface-secondary bg-surface-secondary text-content-secondary shadow", warning: - "border border-solid border-border-warning bg-surface-orange text-content-warning shadow", + "border-border-warning bg-surface-orange text-content-warning shadow", destructive: - "border border-solid border-border-destructive bg-surface-red text-highlight-red shadow", + "border-border-destructive bg-surface-red text-highlight-red shadow", green: - "border border-solid border-border-green bg-surface-green text-highlight-green shadow", + "border-border-green bg-surface-green text-highlight-green shadow", purple: - "border border-solid border-border-purple bg-surface-purple text-highlight-purple shadow", + "border-border-purple bg-surface-purple text-highlight-purple shadow", magenta: - "border border-solid border-border-magenta bg-surface-magenta text-highlight-magenta shadow", - info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow", + "border-border-magenta bg-surface-magenta text-highlight-magenta shadow", + info: "border-border-pending bg-surface-sky text-highlight-sky shadow", }, size: { - xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5", - sm: "text-2xs font-regular h-5.5 [&_svg]:size-icon-xs", - md: "text-xs font-medium [&_svg]:size-icon-sm", - }, - border: { - none: "border-transparent", - solid: "border border-solid", + xs: "border-0 text-2xs font-normal h-[18px] [&_svg]:size-icon-xs rounded", + sm: "text-2xs font-normal h-5.5 py-1 [&_svg]:size-icon-xs", + md: "text-xs font-normal py-1 [&_svg]:size-icon-xs", }, hover: { false: null, @@ -58,7 +54,6 @@ const badgeVariants = cva( defaultVariants: { variant: "default", size: "md", - border: "none", hover: false, }, }, @@ -73,7 +68,6 @@ export const Badge: React.FC = ({ className, variant, size, - border, hover, asChild = false, ...props @@ -83,7 +77,7 @@ export const Badge: React.FC = ({ return ( ); }; diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index be2b77da1b..35b52cefb8 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -3,18 +3,14 @@ import { Stack } from "#/components/Stack/Stack"; export const EnabledBadge: React.FC = () => { return ( - + Enabled ); }; export const EntitledBadge: React.FC = () => { - return ( - - Entitled - - ); + return Entitled; }; export const DisabledBadge: React.FC> = ({ @@ -28,11 +24,7 @@ export const DisabledBadge: React.FC> = ({ }; export const EnterpriseBadge: React.FC = () => { - return ( - - Enterprise - - ); + return Enterprise; }; interface PremiumBadgeProps { @@ -42,35 +34,19 @@ interface PremiumBadgeProps { export const PremiumBadge: React.FC = ({ children = "Premium", }) => { - return ( - - {children} - - ); + return {children}; }; export const PreviewBadge: React.FC = () => { - return ( - - Preview - - ); + return Preview; }; export const AlphaBadge: React.FC = () => { - return ( - - Alpha - - ); + return Alpha; }; export const DeprecatedBadge: React.FC = () => { - return ( - - Deprecated - - ); + return Deprecated; }; export const Badges: React.FC = ({ children }) => { diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index c415c536cc..dab8eec0b8 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -141,7 +141,7 @@ const ParameterLabel: FC = ({ - + Immutable @@ -159,7 +159,7 @@ const ParameterLabel: FC = ({ - + Ephemeral @@ -211,7 +211,7 @@ const ParameterLabel: FC = ({ - + Required diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx index 69e0047951..fe4dc10dc0 100644 --- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx +++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx @@ -38,11 +38,7 @@ export const ExternalAuthButton: FC = ({ )}

{auth.display_name}

{!auth.authenticated && !auth.optional && ( - + Required )} diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx index 1a1da43fdf..648d29d55b 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx @@ -52,7 +52,7 @@ export const AIGovernanceAddOnCard: FC = ({ - + AI add-on diff --git a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx index 37dea0ea31..95ebcf9ecb 100644 --- a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx +++ b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx @@ -116,12 +116,12 @@ const ReviewPanel: FC = ({ {workspaceName} {running && ( - + Running )} {transitioning && ( - + Getting latest status )}