fix: actions height in components

- remove theme override & fallback on button sizes - it's the default (sm) in all the use cases (AFAIK) - covers HvActionsGeneric, HvSnackbar, HvBanner, HvBulkActions
lumada-design · Jun 21, 2023 · b9b386a · b9b386a
1 parent 22a1f36
commit b9b386a
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 516 deletions.
diff --git a/packages/core/src/components/ActionsGeneric/ActionsGeneric.test.tsx b/packages/core/src/components/ActionsGeneric/ActionsGeneric.test.tsx
@@ -4,8 +4,7 @@ import {
   Preview,
   Upload,
 } from "@hitachivantara/uikit-react-icons";
-import { fireEvent, render } from "@testing-library/react";
-import { HvProvider } from "@core/providers";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { HvActionsGeneric } from "./ActionsGeneric";
 
@@ -17,47 +16,25 @@ const actions = [
 ];
 
 describe("ActionsGeneric", () => {
-  it("should be defined", () => {
-    const { container } = render(<HvActionsGeneric actions={actions} />);
-    expect(container).toBeDefined();
-  });
-
-  it("should render correctly", () => {
-    const { container } = render(<HvActionsGeneric actions={actions} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it("should only show maxVisibleActions actions", () => {
-    const { queryAllByRole, getByLabelText } = render(
-      <HvProvider>
-        <HvActionsGeneric actions={actions} maxVisibleActions={2} />
-      </HvProvider>
-    );
-    expect(queryAllByRole("button").length).toBe(3);
+    render(<HvActionsGeneric actions={actions} maxVisibleActions={2} />);
+    expect(screen.queryAllByRole("button").length).toBe(3);
 
-    expect(getByLabelText("Dropdown menu")).toBeInTheDocument();
+    expect(screen.getByLabelText("Dropdown menu")).toBeInTheDocument();
   });
 
   it("should call actionsCallback on button click", () => {
     const mockFn = vi.fn();
-    const { queryAllByRole } = render(
-      <HvProvider>
-        <HvActionsGeneric actions={actions} actionsCallback={mockFn} />
-      </HvProvider>
-    );
-    const button = queryAllByRole("button")[1];
+    render(<HvActionsGeneric actions={actions} actionsCallback={mockFn} />);
+    const button = screen.queryAllByRole("button")[1];
     fireEvent.click(button);
     expect(mockFn).toHaveBeenCalled();
   });
 
   it("should not call actionsCallback if the button is disabled", () => {
     const mockFn = vi.fn();
-    const { queryAllByRole } = render(
-      <HvProvider>
-        <HvActionsGeneric actions={actions} actionsCallback={mockFn} />
-      </HvProvider>
-    );
-    const button = queryAllByRole("button")[0];
+    render(<HvActionsGeneric actions={actions} actionsCallback={mockFn} />);
+    const button = screen.queryAllByRole("button")[0];
     fireEvent.click(button);
     expect(mockFn).not.toHaveBeenCalled();
   });

diff --git a/packages/core/src/components/ActionsGeneric/ActionsGeneric.tsx b/packages/core/src/components/ActionsGeneric/ActionsGeneric.tsx
@@ -1,9 +1,5 @@
 import { clsx } from "clsx";
-import {
-  HvButtonSize,
-  HvButtonVariant,
-  HvDropDownMenu,
-} from "@core/components";
+import { HvButtonVariant, HvDropDownMenu } from "@core/components";
 import { setId } from "@core/utils";
 import React, { isValidElement } from "react";
 import { HvBaseProps } from "@core/types";
@@ -73,15 +69,12 @@ export const HvActionsGeneric = ({
         variant={category}
         className={clsx(actionsGenericClasses.button, classes?.button)}
         disabled={actDisabled ?? disabled}
-        onClick={(event: React.SyntheticEvent) =>
-          actionsCallback?.(event, id || "", action)
-        }
+        onClick={(event) => actionsCallback?.(event, id || "", action)}
         startIcon={renderedIcon}
         $baseColor={
           activeTheme?.colors?.modes[selectedMode].base_light ||
           theme.colors.base_light
         }
-        size={(activeTheme?.actionsGeneric?.buttonSize as HvButtonSize) || "md"}
         {...other}
       >
         {label}

diff --git a/packages/core/src/components/ActionsGeneric/__snapshots__/ActionsGeneric.test.tsx.snap b/packages/core/src/components/ActionsGeneric/__snapshots__/ActionsGeneric.test.tsx.snap
diff --git a/packages/core/src/components/BulkActions/BulkActions.test.tsx b/packages/core/src/components/BulkActions/BulkActions.test.tsx
@@ -46,18 +46,6 @@ const WithActions = () => {
 
 describe("BulkActions", () => {
   describe("Without actions", () => {
-    it("should be defined", () => {
-      const { container } = render(<WithoutActions />);
-
-      expect(container).toBeDefined();
-    });
-
-    it("should render correctly", () => {
-      const { container } = render(<WithoutActions />);
-
-      expect(container).toMatchSnapshot();
-    });
-
     it("should render select all component correctly", async () => {
       const { getByRole, getByLabelText } = render(<WithoutActions />);
 
@@ -67,7 +55,7 @@ describe("BulkActions", () => {
       expect(getByLabelText("All (8)")).toBeInTheDocument();
 
       // Select all
-      await fireEvent.click(checkbox);
+      fireEvent.click(checkbox);
 
       expect(checkbox).toBeChecked();
       expect(getByLabelText("8 / 8")).toBeInTheDocument();
@@ -89,7 +77,7 @@ describe("BulkActions", () => {
       const selectAll = checkboxes[0];
 
       // Select all
-      await fireEvent.click(selectAll);
+      fireEvent.click(selectAll);
 
       expect(onSelectAllMock).toBeCalledTimes(1);
     });
@@ -108,18 +96,6 @@ describe("BulkActions", () => {
   });
 
   describe("With actions", () => {
-    it("should be defined", () => {
-      const { container } = render(<WithActions />);
-
-      expect(container).toBeDefined();
-    });
-
-    it("should render correctly", () => {
-      const { container } = render(<WithActions />);
-
-      expect(container).toMatchSnapshot();
-    });
-
     it("should render the actions correctly", async () => {
       const { getAllByRole, getByRole } = render(<WithActions />);
 
@@ -138,14 +114,14 @@ describe("BulkActions", () => {
       const checkbox = getByRole("checkbox");
 
       // Select all
-      await fireEvent.click(checkbox);
+      fireEvent.click(checkbox);
 
       expect(button1).toBeEnabled();
       expect(button2).toBeEnabled();
       expect(button3).toBeEnabled();
 
       // Open tooltip
-      await fireEvent.click(button3);
+      fireEvent.click(button3);
 
       const tooltip = getByRole("tooltip");
 

diff --git a/packages/core/src/components/BulkActions/BulkActions.tsx b/packages/core/src/components/BulkActions/BulkActions.tsx
@@ -2,7 +2,6 @@ import { HvBaseProps } from "@core/types";
 import {
   HvButton,
   HvButtonProps,
-  HvButtonSize,
   HvCheckBox,
   HvCheckBoxProps,
   HvActionGeneric,
@@ -184,9 +183,6 @@ export const HvBulkActions = ({
               )}
               variant={isSemantic ? "semantic" : "secondaryGhost"}
               onClick={onSelectAllPages}
-              size={
-                (activeTheme?.bulkActions?.buttonSize as HvButtonSize) || "md"
-              }
             >
               {selectAllPagesLabel ??
                 `Select all ${numTotal} items across all pages`}