From e5a3a5644ef624062e45c6b5ffb5683daa518b3f Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 11 Sep 2026 14:59:39 +0200 Subject: [PATCH 1/6] 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/6] 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/6] 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}`); From 889f53f0f6e0d9799560923e295eece048e2d8f1 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 17 Sep 2026 09:08:17 +0200 Subject: [PATCH 4/6] Remove height and use width with aspect-ratio --- packages/lib/src/action-icon/ActionIcon.tsx | 12 ++---------- packages/lib/src/action-icon/utils.ts | 12 ------------ 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 0550ea4a00..a49b526abf 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -2,15 +2,7 @@ import { forwardRef } from "react"; import styled from "@emotion/styled"; import { css } from "@emotion/react"; import { ActionIconPropTypes, RefType } from "./types"; -import { - getBackgroundColor, - getBorderRadius, - getColor, - getHeight, - getIconSize, - getOutlineWidth, - getWidth, -} from "./utils"; +import { getBackgroundColor, getBorderRadius, getColor, getIconSize, getOutlineWidth, getWidth } from "./utils"; import DxcIcon from "../icon/Icon"; import { Tooltip } from "../tooltip/Tooltip"; @@ -36,8 +28,8 @@ const ActionIconContainer = styled.div< display: flex; justify-content: center; align-items: center; - height: ${({ size }) => getHeight(size)}; width: ${({ size }) => getWidth(size)}; + aspect-ratio: 1 / 1; 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 daeb5ac526..60f743f629 100644 --- a/packages/lib/src/action-icon/utils.ts +++ b/packages/lib/src/action-icon/utils.ts @@ -48,15 +48,6 @@ const borderRadiusMap = { xxlarge: "var(--border-radius-l)", }; -const sizeMap = { - xsmall: "var(--height-s)", - small: "var(--height-m)", - medium: "var(--height-xl)", - large: "var(--height-xxxl)", - xlarge: "72px", - xxlarge: "80px", -}; - const widthMap = { xsmall: "24px", small: "32px", @@ -100,9 +91,6 @@ export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: Actio return "100%"; }; -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"]) => From 70644611a0bd39d017d15c82eaabfc4ad9686f48 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 17 Sep 2026 09:10:22 +0200 Subject: [PATCH 5/6] remove unneeded test --- .../lib/src/action-icon/ActionIcon.test.tsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.test.tsx b/packages/lib/src/action-icon/ActionIcon.test.tsx index 51f4741172..88754a21ea 100644 --- a/packages/lib/src/action-icon/ActionIcon.test.tsx +++ b/packages/lib/src/action-icon/ActionIcon.test.tsx @@ -1,26 +1,8 @@ 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("button"); - - expect(actionIcon).toHaveStyle(`width: ${width}`); - expect(actionIcon).toHaveStyle(`height: ${height}`); - }); - test("ActionIcon renders correctly", () => { const { getByRole } = render(); const ActionIcon = getByRole("img", { hidden: true }); From 8d3171acdf1a0a25c9f5feefa79fca9fb56e7642 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 17 Sep 2026 09:43:19 +0200 Subject: [PATCH 6/6] use height instead of aspect-ratio --- packages/lib/src/action-icon/ActionIcon.tsx | 6 +++--- packages/lib/src/action-icon/utils.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index a49b526abf..a8cca8dd62 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -2,7 +2,7 @@ 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, getWidth } from "./utils"; +import { getBackgroundColor, getBorderRadius, getColor, getIconSize, getOutlineWidth, getSize } from "./utils"; import DxcIcon from "../icon/Icon"; import { Tooltip } from "../tooltip/Tooltip"; @@ -28,8 +28,8 @@ const ActionIconContainer = styled.div< display: flex; justify-content: center; align-items: center; - width: ${({ size }) => getWidth(size)}; - aspect-ratio: 1 / 1; + width: ${({ size }) => getSize(size)}; + height: ${({ size }) => getSize(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 60f743f629..73d6287c80 100644 --- a/packages/lib/src/action-icon/utils.ts +++ b/packages/lib/src/action-icon/utils.ts @@ -48,7 +48,7 @@ const borderRadiusMap = { xxlarge: "var(--border-radius-l)", }; -const widthMap = { +const sizeMap = { xsmall: "24px", small: "32px", medium: "40px", @@ -91,7 +91,7 @@ export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: Actio return "100%"; }; -export const getWidth = (size: ActionIconPropTypes["size"]) => (size && widthMap[size] ? widthMap[size] : "40px"); +export const getSize = (size: ActionIconPropTypes["size"]) => (size && sizeMap[size] ? sizeMap[size] : "40px"); export const getIconSize = (size: ActionIconPropTypes["size"]) => size && iconSizeMap[size] ? iconSizeMap[size] : "var(--height-s)";