Fixed come pr comments

gsoft-inc · Nov 5, 2024 · 1a6b0b0 · 1a6b0b0
1 parent 5485bb4
commit 1a6b0b0
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 49 deletions.
diff --git a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
@@ -1,14 +1,15 @@
 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";
 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 => (
+        <TooltipTrigger>
+            <ListBox {...args} selectionMode="multiple">
+                <ListBoxItem id="1" isDisabled position="relative">
+                    <PassiveTrigger data-testid="passive-trigger" width="auto" position="absolute" top="0" bottom="0" right="0" left="0" />
+                    <Text>
+                        Earth
+                    </Text>
+                </ListBoxItem>
+                <ListBoxItem id="2">Mars</ListBoxItem>
+                <ListBoxItem id="3">Saturn</ListBoxItem>
+            </ListBox>
+            <Tooltip>
+                More info
+            </Tooltip>
+        </TooltipTrigger>
+    ),
+    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<ListBoxProps<unknown>> {
     "data-chromatic-force"?: string[];
 }

diff --git 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<HTMLDivElement>) {
     [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
@@ -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 (
             <TooltipTrigger defaultOpen>
                 <PassiveTrigger>
-                    <Avatar name="Fred Allen" />
+                    <SparklesIcon />
                 </PassiveTrigger>
                 <Tooltip {...args} />
             </TooltipTrigger>
@@ -175,43 +173,6 @@ export const DisabledTrigger = {
     }
 } satisfies Story;
 
-export const DisabledListItem = {
-    render: args => (
-        <TooltipTrigger>
-            <ListBox selectionMode="multiple">
-                <ListBoxItem id="1" isDisabled position="relative">
-                    <PassiveTrigger data-testid="passive-trigger" width="auto" position="absolute" top="0" bottom="0" right="0" left="0" />
-                    <Text>
-                        Earth
-                    </Text>
-                </ListBoxItem>
-                <ListBoxItem id="2">Mars</ListBoxItem>
-                <ListBoxItem id="3">Saturn</ListBoxItem>
-            </ListBox>
-            <Tooltip {...args} />
-        </TooltipTrigger>
-    ),
-    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 => (
         <TooltipTrigger>