Added disabled listItem with tooltip

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

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/components/src/Tooltip/src/PassiveTrigger.tsx b/packages/components/src/Tooltip/src/PassiveTrigger.tsx
@@ -44,7 +44,7 @@ function PassiveTrigger(props: PassiveTriggerProps, ref: ForwardedRef<HTMLDivEle
         GlobalPassiveTriggerCssSelector,
         cssModule(
             styles,
-            "hop-FloatingBadge"
+            "hop-PassiveTrigger"
         ),
         stylingProps.className
     );

diff --git a/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx b/packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
@@ -5,7 +5,9 @@ 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";
@@ -173,6 +175,43 @@ 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>