chore: remove API for controlling FeatureBadge hover styling externally

Parkreiner · Parkreiner · commit c7308c3f23dd · 2024-09-17T18:51:14.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -1,6 +1,4 @@
-import { useTheme } from "@emotion/react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 import { FeatureBadge } from "./FeatureBadge";
 
 const meta: Meta<typeof FeatureBadge> = {
@@ -45,45 +43,3 @@ export const LargeStaticBeta: Story = {
 		variant: "static",
 	},
 };
-
-export const HoverControlledByParent: Story = {
-	args: {
-		type: "experimental",
-		size: "sm",
-	},
-
-	decorators: (Story, context) => {
-		const theme = useTheme();
-		const [isHovering, setIsHovering] = useState(false);
-
-		return (
-			<button
-				type="button"
-				onPointerEnter={() => setIsHovering(true)}
-				onPointerLeave={() => setIsHovering(false)}
-				css={[
-					{
-						backgroundColor: theme.palette.background.default,
-						color: theme.palette.text.primary,
-						display: "flex",
-						flexFlow: "row nowrap",
-						alignItems: "center",
-						columnGap: "16px",
-					},
-					isHovering && {
-						backgroundColor: "green",
-					},
-				]}
-			>
-				<span>Blah</span>
-				{Story({
-					args: {
-						...context.initialArgs,
-						variant: "static",
-						highlighted: isHovering,
-					},
-				})}
-			</button>
-		);
-	},
-};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -81,39 +81,14 @@ type FeatureBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		type: keyof typeof featureBadgeTypes;
 		size?: "sm" | "lg";
-	} & (
-			| {
-					/**
-					 * Defines whether the FeatureBadge should respond directly
-					 * to user input (displaying tooltips, controlling its own
-					 * hover styling, etc.)
-					 */
-					variant: "static";
-
-					/**
-					 * When used with the static variant, this lets you define
-					 * whether the component should display hover/highlighted
-					 * styling. Useful for coordinating hover behavior with an
-					 * outside component.
-					 */
-					highlighted?: boolean;
-			  }
-			| {
-					variant: "interactive";
-
-					// Had to specify the highlighted key for this union option
-					// even though it won't be used, because otherwise the type
-					// ergonomics for users would be too clunky.
-					highlighted?: undefined;
-			  }
-		)
+		variant: "interactive" | "static";
+	}
 >;
 
 export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	type,
 	size = "sm",
 	variant = "interactive",
-	highlighted = false,
 	onPointerEnter,
 	onPointerLeave,
 	...delegatedProps
@@ -135,8 +110,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 
 	const featureType = featureBadgeTypes[type];
 	const showBadgeHoverStyle =
-		highlighted ||
-		(variant === "interactive" && (isBadgeHovering || isTooltipHovering));
+		variant === "interactive" && (isBadgeHovering || isTooltipHovering);
 
 	const coreContent = (
 		<span
