diff --git a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
index 811779915..1a75fe000 100644
--- a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
+++ b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
@@ -1,7 +1,7 @@
import { SparklesIcon } from "@hopper-ui/icons";
import { Div } from "@hopper-ui/styled-system";
import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/test";
+import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
import { Avatar } from "../../../Avatar/index.ts";
import { Badge } from "../../../Badge/index.ts";
@@ -9,6 +9,7 @@ import { Header } from "../../../Header/index.ts";
import { IconList } from "../../../IconList/index.ts";
import { Inline, Stack } from "../../../layout/index.ts";
import { Section } from "../../../Section/index.ts";
+import { PassiveTrigger, Tooltip, TooltipTrigger } from "../../../Tooltip/index.ts";
import { Text } from "../../../typography/Text/index.ts";
import { ListBox, ListBoxItem, type ListBoxProps } from "../../index.ts";
@@ -734,6 +735,45 @@ export const InputMultiSelect = {
}
} satisfies Story;
+export const DisabledListItemWithTooltip = {
+ render: args => (
+
+
+
+
+
+ Earth
+
+
+ Mars
+ Saturn
+
+
+ More info
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ let trigger;
+ let trigger2;
+ await waitFor(async () => {
+ trigger = canvas.getAllByTestId("passive-trigger")[0];
+ trigger2 = canvas.getAllByTestId("passive-trigger")[1];
+ });
+ // For some reason, we need to hover over the second trigger first
+ if (trigger2) {
+ await userEvent.hover(trigger2);
+ }
+ if (trigger) {
+ await userEvent.hover(trigger);
+ }
+ await waitFor(async () => {
+ await expect(screen.getByText("More info")).toBeVisible();
+ });
+ }
+} satisfies Story;
+
interface StateTemplateProps extends Partial> {
"data-chromatic-force"?: string[];
}
diff --git a/packages/components/src/Tooltip/src/PassiveTrigger.tsx b/packages/components/src/Tooltip/src/PassiveTrigger.tsx
index 3a792f9b0..b4c0ff4dc 100644
--- a/packages/components/src/Tooltip/src/PassiveTrigger.tsx
+++ b/packages/components/src/Tooltip/src/PassiveTrigger.tsx
@@ -18,12 +18,7 @@ export interface PassiveTriggerProps extends StyledSystemProps, BaseComponentDOM
*/
children?: ReactNode;
}
-/**
- * A PassiveTrigger wraps a trigger element and Tooltip, handling visibility and positioning.
- *
- * [View Documentation](TODO)
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
function PassiveTrigger(props: PassiveTriggerProps, ref: ForwardedRef) {
[props, ref] = useContextProps(props, ref, PassiveTriggerContext);
diff --git a/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx b/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
index 29b79edf6..ca88741aa 100644
--- a/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
+++ b/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
@@ -1,13 +1,11 @@
+import { SparklesIcon } from "@hopper-ui/icons";
import type { Meta, StoryObj } from "@storybook/react";
import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
-import { Avatar } from "../../../Avatar/index.ts";
import { Button } from "../../../buttons/index.ts";
import { Flex, Grid, Stack } from "../../../layout/index.ts";
import { Link } from "../../../Link/index.ts";
-import { ListBox, ListBoxItem } from "../../../ListBox/index.ts";
import { H1 } from "../../../typography/Heading/index.ts";
-import { Text } from "../../../typography/Text/index.ts";
import { PassiveTrigger } from "../../src/PassiveTrigger.tsx";
import { Tooltip } from "../../src/Tooltip.tsx";
import { TooltipTrigger } from "../../src/TooltipTrigger.tsx";
@@ -115,12 +113,12 @@ export const LinkTrigger = {
)
} satisfies Story;
-export const AvatarTrigger = {
+export const IconTrigger = {
render: function Render(args) {
return (
-
+
@@ -175,43 +173,6 @@ export const DisabledTrigger = {
}
} satisfies Story;
-export const DisabledListItem = {
- render: args => (
-
-
-
-
-
- Earth
-
-
- Mars
- Saturn
-
-
-
- ),
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
- let trigger;
- let trigger2;
- await waitFor(async () => {
- trigger = canvas.getAllByTestId("passive-trigger")[0];
- trigger2 = canvas.getAllByTestId("passive-trigger")[1];
- });
- // For some reason, we need to hover over the second trigger first
- if (trigger2) {
- await userEvent.hover(trigger2);
- }
- if (trigger) {
- await userEvent.hover(trigger);
- }
- await waitFor(async () => {
- await expect(screen.getByText(childrenText)).toBeVisible();
- });
- }
-} satisfies Story;
-
export const Focus = {
render: args => (