From b14a709adbbb2560df45352d271f005284a4306e Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Sat, 31 Jan 2026 12:22:58 +1100 Subject: [PATCH] fix: resolve `` to use `` (#21747) Continuing the work from #21740 This pull-request updates all of our badges to use the `` component. This is inline with our Figma design/guidelines, so going-forth and we're standardised across the application. I've added `` and `` to the `Badges.stories.tsx` so we can track these in future (they were missing previously). In `site/src/components/Form/Form.tsx` we were using these components within a `

` which would cause invalid semantic HTML. I chose the easy route around this and made them sit in their own `
` with a flex. ### Preview | Old | New | | --- | --- | | BADGES_OLD | BADGES_OLD-1 | | DEPRECATED_OLD | DEPRECATED_NEW | | ENTERPRISE_OLD | ENTERPRISE_NEW | --------- Co-authored-by: Ben Potter Co-authored-by: Claude Opus 4.5 --- site/src/components/Badge/Badge.tsx | 2 + site/src/components/Badges/Badges.stories.tsx | 12 ++ site/src/components/Badges/Badges.tsx | 147 +++++------------- site/src/components/Form/Form.tsx | 8 +- 4 files changed, 55 insertions(+), 114 deletions(-) diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 317f1e04e4..df542e4678 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -24,6 +24,8 @@ const badgeVariants = cva( "border border-solid border-border-destructive bg-surface-red text-highlight-red shadow", green: "border border-solid border-border-green bg-surface-green text-highlight-green shadow", + purple: + "border border-solid border-border-purple bg-surface-purple text-highlight-purple shadow", info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow", }, size: { diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx index 36c8fddb37..cde5326a1e 100644 --- a/site/src/components/Badges/Badges.stories.tsx +++ b/site/src/components/Badges/Badges.stories.tsx @@ -2,8 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { AlphaBadge, Badges, + DeprecatedBadge, DisabledBadge, EnabledBadge, + EnterpriseBadge, EntitledBadge, HealthyBadge, NotHealthyBadge, @@ -65,3 +67,13 @@ export const Alpha: Story = { children: , }, }; +export const Enterprise: Story = { + args: { + children: , + }, +}; +export const Deprecated: Story = { + args: { + children: , + }, +}; diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 90ae6dc506..7d6a508494 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 { Badge } from "components/Badge/Badge"; import { Stack } from "components/Stack/Stack"; import { @@ -12,72 +11,50 @@ import { type HTMLAttributes, type PropsWithChildren, } 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", - }, - - 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>; export const EnabledBadge: FC = () => { return ( - + Enabled - + ); }; export const EntitledBadge: FC = () => { - return Entitled; + return ( + + Entitled + + ); }; -interface HealthyBadge { +interface HealthyBadgeProps { derpOnly?: boolean; } -export const HealthyBadge: FC = ({ derpOnly }) => { + +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 + Workspace Proxy has never come online and needs to be started. @@ -90,7 +67,9 @@ export const NotReachableBadge: FC = () => { return ( - Not reachable + + Not reachable + Workspace Proxy not responding to http(s) requests. @@ -100,42 +79,21 @@ export const NotReachableBadge: FC = () => { }; export const DisabledBadge: FC = forwardRef< - HTMLSpanElement, - HTMLAttributes + HTMLDivElement, + HTMLAttributes >((props, ref) => { return ( - ({ - border: `1px solid ${theme.experimental.l1.outline}`, - backgroundColor: theme.experimental.l1.background, - color: theme.experimental.l1.text, - }), - ]} - className="option-disabled" - > + Disabled - + ); }); export const EnterpriseBadge: FC = () => { return ( - ({ - backgroundColor: theme.branding.enterprise.background, - border: `1px solid ${theme.branding.enterprise.border}`, - color: theme.branding.enterprise.text, - }), - ]} - > + Enterprise - + ); }; @@ -147,13 +105,7 @@ export const PremiumBadge: FC = ({ children = "Premium", }) => { return ( - + {children} ); @@ -161,52 +113,25 @@ export const PremiumBadge: FC = ({ 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 - + ); }; diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index d535a63642..e1a31ea653 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -108,11 +108,13 @@ export const FormSection = forwardRef( ]} className={classes.sectionInfo} > -

- {title} +
+

+ {title} +

{alpha && } {deprecated && } -

+
{description}