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 => (