Merge pull request #87 from aversini/fix(ButtonIcon)-width-and-height…

…-are-not-always-identical fix(ButtonIcon): width and height are not always identical
versini-org · Nov 26, 2023 · 9a6c2c0 · 9a6c2c0
2 parents b6104f8 + dd99b6a
commit 9a6c2c0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -93,7 +93,7 @@ describe("ButtonIcon modifiers", () => {
 			</ButtonIcon>,
 		);
 		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", () => {
 			</ButtonIcon>,
 		);
 		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", () => {
 			</ButtonIcon>,
 		);
 		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
@@ -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,
 			});
 	}
 };