fix: make sure badge shows as hovered while inside tooltip

Parkreiner · Parkreiner · commit 781a6099b810 · 2024-09-13T21:45:02.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -27,3 +27,19 @@ export const SmallInteractiveExperimental: Story = {
 		variant: "interactive",
 	},
 };
+
+export const LargeInteractiveBeta: Story = {
+	args: {
+		type: "beta",
+		size: "lg",
+		variant: "interactive",
+	},
+};
+
+export const LargeStaticBeta: Story = {
+	args: {
+		type: "beta",
+		size: "lg",
+		variant: "static",
+	},
+};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -43,7 +43,7 @@ const styles = {
 		backgroundColor: theme.roles.preview.background,
 		borderRadius: "6px",
 		transition:
-			"color 0.4s ease-in-out, border-color 0.4s ease-in-out, background-color 0.4s ease-in-out",
+			"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
 	}),
 
 	badgeHover: (theme) => ({
@@ -105,27 +105,35 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	onPointerLeave,
 	...delegatedProps
 }) => {
+	// Not a big fan of having two hover variables, but we need to make sure the
+	// badge maintains its hover styling while the mouse is inside the tooltip
 	const [isBadgeHovering, setIsBadgeHovering] = useState(false);
+	const [isTooltipHovering, setIsTooltipHovering] = useState(false);
+
 	useEffect(() => {
 		const onWindowBlur = () => {
 			setIsBadgeHovering(false);
+			setIsTooltipHovering(false);
 		};
 
 		window.addEventListener("blur", onWindowBlur);
 		return () => window.removeEventListener("blur", onWindowBlur);
 	}, []);
 
 	const featureType = featureBadgeTypes[type];
-	const showHoverStyles =
-		variant === "staticHover" || (variant === "interactive" && isBadgeHovering);
+	const showBadgeHoverStyle =
+		variant === "staticHover" ||
+		(variant === "interactive" && (isBadgeHovering || isTooltipHovering));
 
 	const coreContent = (
 		<span
 			css={[
 				styles.badge,
 				size === "lg" && styles.badgeLargeText,
-				showHoverStyles && styles.badgeHover,
+				showBadgeHoverStyle && styles.badgeHover,
 			]}
+			onPointerEnter={variant === "interactive" ? undefined : onPointerEnter}
+			onPointerLeave={variant === "interactive" ? undefined : onPointerLeave}
 			{...delegatedProps}
 		>
 			<span style={visuallyHidden}> (This is a</span>
@@ -156,14 +164,16 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 			<HelpTooltipContent
 				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
 				transformOrigin={{ vertical: "top", horizontal: "center" }}
+				onPointerEnter={() => setIsTooltipHovering(true)}
+				onPointerLeave={() => setIsTooltipHovering(false)}
 			>
 				<h5 css={styles.tooltipTitle}>
 					{capitalizeFirstLetter(featureType)} Feature
 				</h5>
 
 				<p css={styles.tooltipDescription}>
 					This is {getGrammaticalArticle(featureType)} {featureType} feature. It
-					has not yet been marked for general availability.
+					has not yet reached generally availability (GA).
 				</p>
 
 				<Link
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -5,6 +5,7 @@ import {
 	type FC,
 	type HTMLAttributes,
 	type PointerEvent,
+	type PointerEventHandler,
 	type ReactElement,
 	type ReactNode,
 	type RefObject,
@@ -133,6 +134,8 @@ export type PopoverContentProps = Omit<
 
 export const PopoverContent: FC<PopoverContentProps> = ({
 	horizontal = "left",
+	onPointerEnter,
+	onPointerLeave,
 	...popoverProps
 }) => {
 	const popover = usePopover();
@@ -155,7 +158,7 @@ export const PopoverContent: FC<PopoverContentProps> = ({
 				},
 			}}
 			{...horizontalProps(horizontal)}
-			{...modeProps(popover)}
+			{...modeProps(popover, onPointerEnter, onPointerLeave)}
 			{...popoverProps}
 			id={popover.id}
 			open={popover.open}
@@ -165,14 +168,20 @@ export const PopoverContent: FC<PopoverContentProps> = ({
 	);
 };
 
-const modeProps = (popover: PopoverContextValue) => {
+const modeProps = (
+	popover: PopoverContextValue,
+	externalOnPointerEnter: PointerEventHandler<HTMLDivElement> | undefined,
+	externalOnPointerLeave: PointerEventHandler<HTMLDivElement> | undefined,
+) => {
 	if (popover.mode === "hover") {
 		return {
-			onPointerEnter: () => {
+			onPointerEnter: (event: PointerEvent<HTMLDivElement>) => {
 				popover.setOpen(true);
+				externalOnPointerEnter?.(event);
 			},
-			onPointerLeave: () => {
+			onPointerLeave: (event: PointerEvent<HTMLDivElement>) => {
 				popover.setOpen(false);
+				externalOnPointerLeave?.(event);
 			},
 		};
 	}
