From 56ea863dca30a85471c5b597312c5720ccc55331 Mon Sep 17 00:00:00 2001 From: GCHQ-Developer-530 <111882034+GCHQ-Developer-530@users.noreply.github.com> Date: Thu, 19 Dec 2024 13:17:17 +0000 Subject: [PATCH 1/2] fix(web-components): update icon colours for dark mode badge Update icon colours for dark mode badge to match the text colour of badges in dark mode . #2910 --- packages/web-components/src/global/color-mode.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/global/color-mode.css b/packages/web-components/src/global/color-mode.css index 853c3b4553..1fc998f708 100644 --- a/packages/web-components/src/global/color-mode.css +++ b/packages/web-components/src/global/color-mode.css @@ -1693,7 +1693,7 @@ ic-theme, /* Badge */ --ic-badge-text: var(--ic-color-text-inverse); - --ic-badge-icon: var(--ic-color-icon-inverted); + --ic-badge-icon: var(--ic-color-icon-neutral); --ic-badge-warning-text: var(--ic-color-text-inverse); --ic-badge-warning-icon: var(--ic-color-icon-neutral); --ic-badge-text-monochrome: var(--ic-color-text-primary); @@ -3073,7 +3073,7 @@ ic-theme, /* Badge */ --ic-badge-text: var(--ic-color-text-inverse); - --ic-badge-icon: var(--ic-color-icon-inverted); + --ic-badge-icon: var(--ic-color-icon-neutral); --ic-badge-warning-text: var(--ic-color-text-inverse); --ic-badge-warning-icon: var(--ic-color-icon-neutral); --ic-badge-text-monochrome: var(--ic-color-text-primary); From 0e65b33a417dbfd8b9804976ffc623d96a3ef421 Mon Sep 17 00:00:00 2001 From: GCHQ-Developer-530 <111882034+GCHQ-Developer-530@users.noreply.github.com> Date: Thu, 19 Dec 2024 13:18:21 +0000 Subject: [PATCH 2/2] fix(react): update icon colours for dark mode badge Update icon colours for dark mode badge and add tests to capture dark mode icons --- .../IcBadge.cy.tsx-theme-dark-icon.png | Bin 0 -> 11871 bytes .../component-tests/IcBadge/IcBadge.cy.tsx | 13 ++++ .../IcBadge/IcBadgeTestData.tsx | 73 ++++++++++++++++++ 3 files changed, 86 insertions(+) create mode 100755 packages/react/cypress-image-diff-screenshots/baseline/IcBadge.cy.tsx-theme-dark-icon.png diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcBadge.cy.tsx-theme-dark-icon.png b/packages/react/cypress-image-diff-screenshots/baseline/IcBadge.cy.tsx-theme-dark-icon.png new file mode 100755 index 0000000000000000000000000000000000000000..00b4ed337f17e512f929e66f3058cb9ec2ed665d GIT binary patch literal 11871 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 ad_k$T+}XMr3J;DSLCYvhXWYL3{Qm%1jWam_ literal 0 HcmV?d00001 diff --git a/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx b/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx index 3f9c71d3ad..b3fb85bb33 100644 --- a/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx +++ b/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx @@ -12,6 +12,7 @@ import { PositionNear, PositionInline, ThemeDark, + ThemeDarkIcon, } from "./IcBadgeTestData"; import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers"; @@ -196,6 +197,18 @@ describe("IcBadge visual regression and a11y tests", () => { testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), }); }); + + it("should render badge with dark theme and icon", () => { + mount(); + + cy.checkHydrated(IC_BADGE_SELECTOR); + + cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "theme-dark-icon", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + }); + }); }); describe.skip("IcBadge visual regression tests in high contrast mode", () => { diff --git a/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx b/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx index 4a577d5919..675a7ef8a4 100644 --- a/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx +++ b/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx @@ -381,3 +381,76 @@ export const ThemeDark = (): ReactElement => { ); }; + +export const ThemeDarkIcon = (): ReactElement => { + return ( +
+ + + + + Neutral + + + + + + Light + + + + + + Error + + + + + + Success + + + + + + Warning + + + + + + Info + +
+ ); +};