chore: add xs size for badge

Parkreiner · Parkreiner · commit 230aa1d7cfb4 · 2024-09-17T19:17:30.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -43,3 +43,14 @@ export const LargeStaticBeta: Story = {
 		variant: "static",
 	},
 };
+
+// While it's possible, we shouldn't use the xs size with the interactive
+// variant, because then the badge might be too small for users with motor
+// control issues to get their hand to hover over the target reliably
+export const ExtraSmallStaticBeta: Story = {
+	args: {
+		type: "beta",
+		size: "xs",
+		variant: "static",
+	},
+};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -55,6 +55,10 @@ const styles = {
 		fontSize: "1rem",
 	},
 
+	badgeExtraSmallText: {
+		fontSize: "0.625rem",
+	},
+
 	tooltipTitle: (theme) => ({
 		color: theme.palette.text.primary,
 		fontWeight: 600,
@@ -80,7 +84,7 @@ const styles = {
 type FeatureBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		type: keyof typeof featureBadgeTypes;
-		size?: "sm" | "lg";
+		size?: "xs" | "sm" | "lg";
 		variant: "interactive" | "static";
 	}
 >;
@@ -116,6 +120,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 		<span
 			css={[
 				styles.badge,
+				size === "xs" && styles.badgeExtraSmallText,
 				size === "lg" && styles.badgeLargeText,
 				showBadgeHoverStyle && styles.badgeHover,
 			]}
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -110,7 +110,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 					onClick={onPopoverClose}
 				>
 					Organizations
-					<FeatureBadge type="beta" size="sm" variant="static" />
+					<FeatureBadge type="beta" size="xs" variant="static" />
 				</MenuItem>
 			)}
 			{canViewAllUsers && (

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({`
`110`	`110`	`onClick={onPopoverClose}`
`111`	`111`	`>`
`112`	`112`	`Organizations`
`113`		`- <FeatureBadge type="beta" size="sm" variant="static" />`
	`113`	`+ <FeatureBadge type="beta" size="xs" variant="static" />`
`114`	`114`	`</MenuItem>`
`115`	`115`	`)}`
`116`	`116`	`{canViewAllUsers && (`