coder · aqandrew · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "components/Avatar/Avatar";
 import { useState } from "react";
 import { action } from "storybook/actions";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, screen, userEvent, within } from "storybook/test";
 import {
 	SelectFilter,
 	type SelectFilterOption,
@@ -88,7 +88,7 @@ export const SelectingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const option = canvas.getByText("Option 25");
+		const option = screen.getByText("Option 25");
 		await userEvent.click(option);
 		await expect(button).toHaveTextContent("Option 25");
 	},
@@ -102,7 +102,7 @@ export const UnselectingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const menu = canvasElement.querySelector<HTMLElement>("[role=menu]")!;
+		const menu = screen.getByRole("menu");
 		const option = within(menu).getByText("Option 26");
 		await userEvent.click(option);
 		await expect(button).toHaveTextContent("All options");
@@ -140,7 +140,7 @@ export const SearchingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const search = canvas.getByLabelText("Search options");
+		const search = screen.getByLabelText("Search options");
 		await userEvent.type(search, "option-2");
 	},
 };
@@ -60,7 +60,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 				</SelectMenuButton>
 			</SelectMenuTrigger>
 			<SelectMenuContent
-				horizontal="right"
+				align="end"
 				css={{
 					"& .MuiPaper-root": {
 						// When including selectFilterSearch, we aim for the width to be as

@@ -3,18 +3,17 @@ import {
 	css,
 	type Interpolation,
 	type Theme,
-	useTheme,
 } from "@emotion/react";
 import Link from "@mui/material/Link";
-import {
-	Popover,
-	PopoverContent,
-	type PopoverContentProps,
-	type PopoverProps,
-	PopoverTrigger,
-	usePopover,
-} from "components/deprecated/Popover/Popover";
+import type { TooltipProps } from "@radix-ui/react-tooltip";
 import { Stack } from "components/Stack/Stack";
+import {
+	Tooltip,
+	TooltipContent,
+	type TooltipContentProps,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
 import {
 	type FC,
@@ -23,31 +22,35 @@ import {
 	type PropsWithChildren,
 	type ReactNode,
 } from "react";
+import { cn } from "utils/cn";
 
 type Icon = typeof CircleHelpIcon;
 
 type Size = "small" | "medium";
 
 export const HelpTooltipIcon = CircleHelpIcon;
 
-export const HelpTooltip: FC<PopoverProps> = (props) => {
-	return <Popover mode="hover" {...props} />;
+export const HelpTooltip: FC<TooltipProps> = (props) => {
+	return (
+		<TooltipProvider>
+			<Tooltip delayDuration={0} {...props} />
+		</TooltipProvider>
+	);
 };
 
-export const HelpTooltipContent: FC<PopoverContentProps> = (props) => {
-	const theme = useTheme();
-
+export const HelpTooltipContent: FC<TooltipContentProps> = ({
+	className,
+	...props
+}) => {
 	return (
-		<PopoverContent
+		<TooltipContent
+			side="bottom"
+			align="start"
 			{...props}
-			css={{
-				"& .MuiPaper-root": {
-					fontSize: 14,
-					width: 304,
-					padding: 20,
-					color: theme.palette.text.secondary,
-				},
-			}}
+			className={cn(
+				"w-[320px] p-5 bg-surface-secondary border-surface-quaternary text-sm",
+				className,
+			)}
 		/>
 	);
 };
@@ -76,7 +79,7 @@ export const HelpTooltipTrigger = forwardRef<
 	});
 
 	return (
-		<PopoverTrigger>
+		<TooltipTrigger asChild>
 			<button
 				{...buttonProps}
 				aria-label="More info"
@@ -102,7 +105,7 @@ export const HelpTooltipTrigger = forwardRef<
 			>
 				{children}
 			</button>
-		</PopoverTrigger>
+		</TooltipTrigger>
 	);
 });
 
@@ -155,18 +158,12 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
 	onClick,
 	ariaLabel,
 }) => {
-	const popover = usePopover();
-
 	return (
 		<button
 			type="button"
 			aria-label={ariaLabel ?? ""}
 			css={styles.action}
-			onClick={(event) => {
-				event.stopPropagation();
-				onClick();
-				popover.setOpen(false);
-			}}
+			onClick={onClick}
 		>
 			<Icon css={styles.actionIcon} />
 			{children}

@@ -3,13 +3,13 @@ import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
 import { Button } from "components/Button/Button";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Loader } from "components/Loader/Loader";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { Loader } from "components/Loader/Loader";
+} from "components/Popover/Popover";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, lazy, Suspense, useState } from "react";
 
@@ -80,24 +80,21 @@ export const IconField: FC<IconFieldProps> = ({
 
 			<Global
 				styles={css`
-          em-emoji-picker {
-            --rgb-background: ${theme.palette.background.paper};
-            --rgb-input: ${theme.palette.primary.main};
-            --rgb-color: ${theme.palette.text.primary};
-
-            // Hack to prevent the right side from being cut off
-            width: 350px;
-          }
-        `}
+					em-emoji-picker {
+						--rgb-background: ${theme.palette.background.paper};
+						--rgb-input: ${theme.palette.primary.main};
+						--rgb-color: ${theme.palette.text.primary};
+					}
+				`}
 			/>
 			<Popover open={open} onOpenChange={setOpen}>
-				<PopoverTrigger>
+				<PopoverTrigger asChild>
 					<Button variant="outline" size="lg" className="flex-shrink-0">
 						Emoji
 						<ChevronDownIcon />
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent id="emoji" horizontal="right">
+				<PopoverContent id="emoji" side="bottom" align="end" className="w-min">
 					<Suspense fallback={<Loader />}>
 						<EmojiPicker
 							onEmojiSelect={(emoji) => {

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
+import { expect, screen, userEvent, waitFor } from "storybook/test";
 import { InfoTooltip } from "./InfoTooltip";
 
 const meta = {
@@ -16,13 +16,13 @@ export default meta;
 type Story = StoryObj<typeof InfoTooltip>;
 
 export const Example: Story = {
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(meta.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					meta.args.message,
+				),
 			);
 		});
 	},
@@ -33,13 +33,13 @@ export const Notice = {
 		type: "notice",
 		message: "Unfortunately, there's a radio connected to my brain",
 	},
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(Notice.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					Notice.args.message,
+				),
 			);
 		});
 	},
@@ -50,13 +50,13 @@ export const Warning = {
 		type: "warning",
 		message: "Unfortunately, there's a radio connected to my brain",
 	},
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(Warning.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					Warning.args.message,
+				),
 			);
 		});
 	},

@@ -23,6 +23,7 @@ export const PopoverContent = forwardRef<
 			ref={ref}
 			align={align}
 			sideOffset={sideOffset}
+			collisionPadding={16} // 1rem
 			className={cn(
 				`z-50 w-72 rounded-md border border-solid bg-surface-primary
 				text-content-primary shadow-md outline-none

@@ -1,11 +1,15 @@
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
+import type {
+	PopoverContentProps,
+	PopoverTriggerProps,
+} from "@radix-ui/react-popover";
 import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
+} from "components/Popover/Popover";
 import {
 	SearchField,
 	type SearchFieldProps,
@@ -26,9 +30,21 @@ const SIDE_PADDING = 16;
 
 export const SelectMenu = Popover;
 
-export const SelectMenuTrigger = PopoverTrigger;
+export const SelectMenuTrigger: FC<PopoverTriggerProps> = (props) => {
+	return <PopoverTrigger asChild {...props} />;
+};
 
-export const SelectMenuContent = PopoverContent;
+export const SelectMenuContent: FC<PopoverContentProps> = (props) => {
+	return (
+		<PopoverContent
+			className={cn(
+				"bg-surface-secondary border-surface-quaternary overflow-y-auto",
+				props.className,
+			)}
+			{...props}
+		/>
+	);
+};
 
 type SelectMenuButtonProps = ButtonProps & {
 	startIcon?: React.ReactNode;

@@ -12,11 +12,15 @@ export const Tooltip = TooltipPrimitive.Root;
 
 export const TooltipTrigger = TooltipPrimitive.Trigger;
 
+export type TooltipContentProps = React.ComponentPropsWithoutRef<
+	typeof TooltipPrimitive.Content
+> & {
+	disablePortal?: boolean;
+};
+
 export const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-		disablePortal?: boolean;
-	}
+	TooltipContentProps
 >(({ className, sideOffset = 4, disablePortal, ...props }, ref) => {
 	const content = (
 		<TooltipPrimitive.Content