fix(components): Fix typo in the DataList.ItemAction logic (#2395)

GetJobber · Feb 24, 2025 · fc30eb4 · fc30eb4
1 parent ddce093
commit fc30eb4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx b/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx
@@ -136,36 +136,42 @@ describe("DataListActions", () => {
     const label = "Foo";
     const moreLabel = "More actions";
 
+    const setupAlwaysVisible = (alwaysVisible = true) => {
+      render(
+        <DataListActions>
+          <DataListAction
+            alwaysVisible={alwaysVisible}
+            icon="edit"
+            label={label}
+            visible={() => true}
+          />
+        </DataListActions>,
+      );
+    };
+
     describe("is true", () => {
       it("should not render the more actions icon", () => {
-        render(
-          <DataListActions>
-            <DataListAction
-              alwaysVisible
-              icon="edit"
-              label={label}
-              visible={() => true}
-            />
-          </DataListActions>,
-        );
+        setupAlwaysVisible();
 
         expect(screen.queryByLabelText(moreLabel)).not.toBeInTheDocument();
         expect(screen.getByLabelText(label)).toBeInTheDocument();
       });
+
+      it("should not render the tooltip", async () => {
+        setupAlwaysVisible();
+
+        const actionButton = screen.getByLabelText(label);
+        await userEvent.hover(actionButton);
+
+        expect(
+          document.querySelector("div[role='tooltip']"),
+        ).not.toBeInTheDocument();
+      });
     });
 
     describe("is false", () => {
       it("should render the more actions icon", () => {
-        render(
-          <DataListActions>
-            <DataListAction
-              alwaysVisible={false}
-              icon="edit"
-              label={label}
-              visible={() => true}
-            />
-          </DataListActions>,
-        );
+        setupAlwaysVisible(false);
 
         expect(screen.getByLabelText(moreLabel)).toBeInTheDocument();
       });
@@ -177,6 +183,17 @@ describe("DataListActions", () => {
 
         expect(screen.getByLabelText("More actions")).toBeInTheDocument();
       });
+
+      it("should render the tooltip", async () => {
+        renderComponent();
+
+        const moreButton = screen.getByLabelText("More actions");
+        await userEvent.hover(moreButton);
+
+        expect(
+          document.querySelector("div[role='tooltip']"),
+        ).toBeInTheDocument();
+      });
     });
   });
 });

diff --git a/packages/components/src/DataList/components/DataListActions/DataListActions.tsx b/packages/components/src/DataList/components/DataListActions/DataListActions.tsx
@@ -46,7 +46,7 @@ export function DataListActions<T extends DataListObject>({
         const actionLabel = getActionLabel();
 
         // If the action is always visible, we don't want a tooltip.
-        if (props.alwaysVisibled) {
+        if (props.alwaysVisible) {
           return (
             <Button
               ariaLabel={actionLabel}