From 799f61e046c5a7a096d1947ad3d0df978258782b Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 10 Apr 2025 21:59:32 +0000
Subject: [PATCH 1/3] feat: update badge to support icons and warning variant

---
 site/src/components/Badge/Badge.tsx | 43 +++++++++++++++++------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index 453e852da7a37..a3531fc917f5c 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -3,20 +3,25 @@
  * @see {@link https://ui.shadcn.com/docs/components/badge}
  */
 import { type VariantProps, cva } from "class-variance-authority";
-import type { FC } from "react";
+import  { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "utils/cn";
 
 export const badgeVariants = cva(
-	"inline-flex items-center rounded-md border px-2 py-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	`inline-flex items-center rounded-md border px-2 py-1 transition-colors
+	focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+	[&_svg]:pointer-events-none [&_svg]:pr-0.5 [&_svg]:py-0.5 [&_svg]:mr-0.5`,
 	{
 		variants: {
 			variant: {
 				default:
 					"border-transparent bg-surface-secondary text-content-secondary shadow",
+				warning:
+					"border-transparent bg-surface-orange text-content-warning shadow",
 			},
 			size: {
-				sm: "text-2xs font-regular",
-				md: "text-xs font-medium",
+				sm: "text-2xs font-regular h-5.5 [&_svg]:size-icon-xs",
+				md: "text-xs font-medium [&_svg]:size-icon-sm",
 			},
 		},
 		defaultVariants: {
@@ -28,18 +33,20 @@ export const badgeVariants = cva(
 
 export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {}
+		VariantProps<typeof badgeVariants> {
+			asChild?: boolean;
+		}
 
-export const Badge: FC<BadgeProps> = ({
-	className,
-	variant,
-	size,
-	...props
-}) => {
-	return (
-		<div
-			className={cn(badgeVariants({ variant, size }), className)}
-			{...props}
-		/>
-	);
-};
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "div"
+
+		return (
+			<Comp
+				{...props}
+				ref={ref}
+				className={cn(badgeVariants({ variant, size }), className)}
+			/>
+		);
+	},
+);

From a07d4d0843f78f39412a850c0910fdeda7fa3053 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 10 Apr 2025 22:09:13 +0000
Subject: [PATCH 2/3] fix: format

---
 site/src/components/Badge/Badge.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index a3531fc917f5c..7ee7cc4f94fe0 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -2,9 +2,9 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/badge}
  */
-import { type VariantProps, cva } from "class-variance-authority";
-import  { forwardRef } from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { cn } from "utils/cn";
 
 export const badgeVariants = cva(
@@ -34,12 +34,12 @@ export const badgeVariants = cva(
 export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
 		VariantProps<typeof badgeVariants> {
-			asChild?: boolean;
-		}
+	asChild?: boolean;
+}
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "div"
+		const Comp = asChild ? Slot : "div";
 
 		return (
 			<Comp

From 2e26fc27df4d75e894ef588e7b91210a6816054a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 10 Apr 2025 22:09:29 +0000
Subject: [PATCH 3/3] chore: add stories

---
 site/src/components/Badge/Badge.stories.tsx | 23 +++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
index 939e1d20f8d21..7d900b49ff6f6 100644
--- a/site/src/components/Badge/Badge.stories.tsx
+++ b/site/src/components/Badge/Badge.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { Settings, TriangleAlert } from "lucide-react";
 import { Badge } from "./Badge";
 
 const meta: Meta<typeof Badge> = {
@@ -13,3 +14,25 @@ export default meta;
 type Story = StoryObj<typeof Badge>;
 
 export const Default: Story = {};
+
+export const Warning: Story = {
+	args: {
+		variant: "warning",
+	},
+};
+
+export const SmallWithIcon: Story = {
+	args: {
+		variant: "default",
+		size: "sm",
+		children: <>{<Settings />} Preset</>,
+	},
+};
+
+export const MediumWithIcon: Story = {
+	args: {
+		variant: "warning",
+		size: "md",
+		children: <>{<TriangleAlert />} Immutable</>,
+	},
+};