From e5a3a5644ef624062e45c6b5ffb5683daa518b3f Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 11 Sep 2026 14:59:39 +0200 Subject: [PATCH 1/3] Fix ActionIcon size --- packages/lib/src/action-icon/ActionIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index f7a9022ee3..4f21de32ff 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -28,7 +28,7 @@ const ActionIconContainer = styled.div< display: flex; justify-content: center; align-items: center; - height: ${({ size }) => getSize(size)}; + width: ${({ size }) => getSize(size)}; aspect-ratio: 1 / 1; text-decoration: none; border-radius: ${({ shape, size }) => getBorderRadius(shape, size)}; From 6db18852e01d8bcd717fe2386b8b4c1137c4291e Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 14 Sep 2026 14:05:52 +0200 Subject: [PATCH 2/3] remove aspect-ratio, and use width and height instead --- packages/lib/src/action-icon/ActionIcon.test.tsx | 16 ++++++++++++++++ packages/lib/src/action-icon/ActionIcon.tsx | 14 +++++++++++--- packages/lib/src/action-icon/utils.ts | 13 ++++++++++++- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.test.tsx b/packages/lib/src/action-icon/ActionIcon.test.tsx index 88754a21ea..5fd3140db1 100644 --- a/packages/lib/src/action-icon/ActionIcon.test.tsx +++ b/packages/lib/src/action-icon/ActionIcon.test.tsx @@ -1,8 +1,24 @@ 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(); + const actionIcon = getByRole("img", { hidden: true }); + + expect(actionIcon).toHaveStyle(`width: ${width}`); + expect(actionIcon).toHaveStyle(`height: ${height}`); + }); + test("ActionIcon renders correctly", () => { const { getByRole } = render(); const ActionIcon = getByRole("img", { hidden: true }); diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 4f21de32ff..0550ea4a00 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/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; - width: ${({ 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)}; diff --git a/packages/lib/src/action-icon/utils.ts b/packages/lib/src/action-icon/utils.ts index 8daf642ca7..daeb5ac526 100644 --- a/packages/lib/src/action-icon/utils.ts +++ b/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)"; From ae61a7c4bc53295c5b7bc744c69877fe398adc69 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 14 Sep 2026 14:28:28 +0200 Subject: [PATCH 3/3] fix failing tests --- packages/lib/src/action-icon/ActionIcon.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.test.tsx b/packages/lib/src/action-icon/ActionIcon.test.tsx index 5fd3140db1..51f4741172 100644 --- a/packages/lib/src/action-icon/ActionIcon.test.tsx +++ b/packages/lib/src/action-icon/ActionIcon.test.tsx @@ -12,8 +12,10 @@ describe("ActionIcon component tests", () => { ["xlarge", "72px", "72px"], ["xxlarge", "80px", "80px"], ])("ActionIcon width matches its height for %s size", (size, width, height) => { - const { getByRole } = render(); - const actionIcon = getByRole("img", { hidden: true }); + const { getByRole } = render( + {}} /> + ); + const actionIcon = getByRole("button"); expect(actionIcon).toHaveStyle(`width: ${width}`); expect(actionIcon).toHaveStyle(`height: ${height}`);