[patch] Fix Action Icon size

packages/lib/src/action-icon/ActionIcon.test.tsx

@@ -1,8 +1,26 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render } from "@testing-library/react";
 import DxcActionIcon from "./ActionIcon";
+import { ActionIconPropTypes } from "./types";
 
 describe("ActionIcon component tests", () => {
+  test.each([
+    ["xsmall", "24px", "var(--height-s)"],
+    ["small", "32px", "var(--height-m)"],
+    ["medium", "40px", "var(--height-xl)"],
+    ["large", "56px", "var(--height-xxxl)"],
+    ["xlarge", "72px", "72px"],
+    ["xxlarge", "80px", "80px"],
+  ])("ActionIcon width matches its height for %s size", (size, width, height) => {
+    const { getByRole } = render(
+      <DxcActionIcon icon="house" size={size as ActionIconPropTypes["size"]} onClick={() => {}} />
+    );
+    const actionIcon = getByRole("button");
+
+    expect(actionIcon).toHaveStyle(`width: ${width}`);
+    expect(actionIcon).toHaveStyle(`height: ${height}`);
+  });
+
   test("ActionIcon renders correctly", () => {
     const { getByRole } = render(<DxcActionIcon icon="house" />);
     const ActionIcon = getByRole("img", { hidden: true });

packages/lib/src/action-icon/ActionIcon.tsx

@@ -2,7 +2,15 @@ import { forwardRef } from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { ActionIconPropTypes, RefType } from "./types";
-import { getBackgroundColor, getBorderRadius, getColor, getIconSize, getOutlineWidth, getSize } from "./utils";
+import {
+  getBackgroundColor,
+  getBorderRadius,
+  getColor,
+  getHeight,
+  getIconSize,
+  getOutlineWidth,
+  getWidth,
+} from "./utils";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
 
@@ -28,8 +36,8 @@ const ActionIconContainer = styled.div<
   display: flex;
   justify-content: center;
   align-items: center;
-  height: ${({ size }) => getSize(size)};
-  aspect-ratio: 1 / 1;
+  height: ${({ size }) => getHeight(size)};
+  width: ${({ size }) => getWidth(size)};
   text-decoration: none;
   border-radius: ${({ shape, size }) => getBorderRadius(shape, size)};
   background-color: ${({ color }) => getBackgroundColor(color)};

packages/lib/src/action-icon/utils.ts

@@ -57,6 +57,15 @@ const sizeMap = {
   xxlarge: "80px",
 };
 
+const widthMap = {
+  xsmall: "24px",
+  small: "32px",
+  medium: "40px",
+  large: "56px",
+  xlarge: "72px",
+  xxlarge: "80px",
+};
+
 const iconSizeMap = {
   xsmall: "var(--height-xxs)",
   small: "var(--height-xs)",
@@ -91,9 +100,11 @@ export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: Actio
   return "100%";
 };
 
-export const getSize = (size: ActionIconPropTypes["size"]) =>
+export const getHeight = (size: ActionIconPropTypes["size"]) =>
   size && sizeMap[size] ? sizeMap[size] : "var(--height-xl)";
 
+export const getWidth = (size: ActionIconPropTypes["size"]) => (size && widthMap[size] ? widthMap[size] : "40px");
+
 export const getIconSize = (size: ActionIconPropTypes["size"]) =>
   size && iconSizeMap[size] ? iconSizeMap[size] : "var(--height-s)";