From dd99b6a6d641b658a645b7e9bd8d3cb767c6d5c4 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 26 Nov 2023 15:00:11 -0500 Subject: [PATCH] fix(ButtonIcon): width and height are not always identical --- .../src/components/Button/__tests__/ButtonIcon.test.tsx | 6 +++--- packages/ui-components/src/components/Button/utilities.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx b/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx index ff88914e..257fafd6 100644 --- a/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx +++ b/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx @@ -93,7 +93,7 @@ describe("ButtonIcon modifiers", () => { , ); const button = await screen.findByRole("button"); - expectToHaveClasses(button, ["w-6", "p-0"]); + expectToHaveClasses(button, ["h-6", "w-6", "p-0"]); }); it("should render a size medium button", async () => { @@ -103,7 +103,7 @@ describe("ButtonIcon modifiers", () => { , ); const button = await screen.findByRole("button"); - expectToHaveClasses(button, ["w-8", "p-1"]); + expectToHaveClasses(button, ["h-8", "w-8", "p-1"]); }); it("should render a size large button", async () => { @@ -113,6 +113,6 @@ describe("ButtonIcon modifiers", () => { , ); const button = await screen.findByRole("button"); - expectToHaveClasses(button, ["w-10", "p-2"]); + expectToHaveClasses(button, ["h-10", "w-10", "p-2"]); }); }); diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts index 08dc027d..ed5df4ae 100644 --- a/packages/ui-components/src/components/Button/utilities.ts +++ b/packages/ui-components/src/components/Button/utilities.ts @@ -49,9 +49,9 @@ const getButtonSizesClasses = ({ case TYPE_ICON: return clsx("inline-flex items-center justify-center", { - "w-6 p-0": size === "small" || slim, - "w-8 p-1": size === "medium" && !slim, - "w-10 p-2": size === "large" && !slim, + "h-6 w-6 p-0": size === "small" || slim, + "h-8 w-8 p-1": size === "medium" && !slim, + "h-10 w-10 p-2": size === "large" && !slim, }); } };