From 7787564bea8891a480fc7ddd1e20a3890bfef579 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 16:43:23 +0200 Subject: [PATCH 1/6] feat(ui): remove `success` icon Return `check circle` instead. See https://github.com/cloudoperators/juno/issues/1669 Signed-off-by: Franz Heidl --- .../ui-components/src/components/Icon/Icon.component.tsx | 7 ++++--- packages/ui-components/src/components/Icon/Icon.stories.ts | 4 ++++ packages/ui-components/src/components/Icon/Icon.test.tsx | 7 ++++++- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/Icon/Icon.component.tsx b/packages/ui-components/src/components/Icon/Icon.component.tsx index 4eef4f9df6..c3398c49d6 100644 --- a/packages/ui-components/src/components/Icon/Icon.component.tsx +++ b/packages/ui-components/src/components/Icon/Icon.component.tsx @@ -48,7 +48,6 @@ import NotificationsOff from "@material-design-icons/svg/outlined/notifications_ import OpenInBrowser from "@material-design-icons/svg/outlined/open_in_browser.svg" import OpenInNew from "@material-design-icons/svg/outlined/open_in_new.svg" import Place from "./icons/place.svg" -import Success from "@material-design-icons/svg/filled/check_box.svg" import Search from "@material-design-icons/svg/outlined/search.svg" import SeverityLow from "./icons/juno_severity_low.svg" import SeverityMedium from "./icons/juno_severity_medium.svg" @@ -812,12 +811,14 @@ const getColoredSizedIcon = ({ icon, color, size, title, iconClassName, ...iconP /> ) case KnownIconsEnum.success: + // `success` (check_box.svg) has been sundown in favour of `checkCircle` to avoid visual inconsistency. + // The `success` name is kept as a valid alias so existing callers continue to work. return ( - { test("renders a success icon", () => { render() expect(screen.getByRole("img")).toBeInTheDocument() - expect(screen.getByRole("img")).toHaveAttribute("alt", "success") + expect(screen.getByRole("img")).toHaveAttribute("alt", "checkCircle") + }) + + test("renders checkCircle when calling success (success is an alias for checkCircle)", () => { + render() + expect(screen.getByRole("img")).toHaveAttribute("alt", "checkCircle") }) test("renders a warning icon", () => { From 23c86f68da560f0d7ee5d12fc051ad4974cbbf3e Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 16:53:25 +0200 Subject: [PATCH 2/6] Create witty-meals-know.md Signed-off-by: Franz Heidl --- .changeset/witty-meals-know.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-meals-know.md diff --git a/.changeset/witty-meals-know.md b/.changeset/witty-meals-know.md new file mode 100644 index 0000000000..5545cc4550 --- /dev/null +++ b/.changeset/witty-meals-know.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": patch +--- + +feat(ui): remove `success` icon, return `check circle´ instead when `success` is called From c208c68fcbb11cf1c46a18697801bff3dfeb8fb1 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 17:00:47 +0200 Subject: [PATCH 3/6] =?UTF-8?q?feat(ui):=20keep=20alt=20=E2=80=9Esuccess?= =?UTF-8?q?=E2=80=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit keep alt „success“ when `success` was called, even though we technically return `check circle` Signed-off-by: Franz Heidl --- packages/ui-components/src/components/Icon/Icon.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/Icon/Icon.component.tsx b/packages/ui-components/src/components/Icon/Icon.component.tsx index c3398c49d6..a7f3a96e3b 100644 --- a/packages/ui-components/src/components/Icon/Icon.component.tsx +++ b/packages/ui-components/src/components/Icon/Icon.component.tsx @@ -818,7 +818,7 @@ const getColoredSizedIcon = ({ icon, color, size, title, iconClassName, ...iconP width={size} height={size} className={iconClass} - alt="checkCircle" + alt="success" title={title ? title : "Success"} role="img" {...iconProps} From da4711bba455033a60dd23281cbdd23eca5a4c3a Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 17:03:30 +0200 Subject: [PATCH 4/6] =?UTF-8?q?feat(ui):=20test=20`check=20circle=20?= =?UTF-8?q?=E2=80=93=20`success`=20svg=20replacement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Franz Heidl --- packages/ui-components/src/components/Icon/Icon.test.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/Icon/Icon.test.tsx b/packages/ui-components/src/components/Icon/Icon.test.tsx index 8e8b25aa6b..e4eb13d507 100644 --- a/packages/ui-components/src/components/Icon/Icon.test.tsx +++ b/packages/ui-components/src/components/Icon/Icon.test.tsx @@ -276,12 +276,15 @@ describe("Icon (typescript)", () => { test("renders a success icon", () => { render() expect(screen.getByRole("img")).toBeInTheDocument() - expect(screen.getByRole("img")).toHaveAttribute("alt", "checkCircle") + expect(screen.getByRole("img")).toHaveAttribute("alt", "success") }) test("renders checkCircle when calling success (success is an alias for checkCircle)", () => { - render() - expect(screen.getByRole("img")).toHaveAttribute("alt", "checkCircle") + const { container: successContainer } = render() + const { container: checkCircleContainer } = render() + const successPath = successContainer.querySelector("svg path")?.getAttribute("d") + const checkCirclePath = checkCircleContainer.querySelector("svg path")?.getAttribute("d") + expect(successPath).toEqual(checkCirclePath) }) test("renders a warning icon", () => { From ed1b06a34d1cd9a89edc2bf14f44d0351a36630c Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 17:06:46 +0200 Subject: [PATCH 5/6] feat(ui): update test description Signed-off-by: Franz Heidl --- packages/ui-components/src/components/Icon/Icon.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/Icon/Icon.test.tsx b/packages/ui-components/src/components/Icon/Icon.test.tsx index e4eb13d507..2a1158ad92 100644 --- a/packages/ui-components/src/components/Icon/Icon.test.tsx +++ b/packages/ui-components/src/components/Icon/Icon.test.tsx @@ -279,7 +279,7 @@ describe("Icon (typescript)", () => { expect(screen.getByRole("img")).toHaveAttribute("alt", "success") }) - test("renders checkCircle when calling success (success is an alias for checkCircle)", () => { + test("renders checkCircle when calling success (success has been deprecated in favour of checkCircle)", () => { const { container: successContainer } = render() const { container: checkCircleContainer } = render() const successPath = successContainer.querySelector("svg path")?.getAttribute("d") From 686430e089269257855f6f8ee25bccbb0b5e49bc Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 5 Aug 2026 17:09:46 +0200 Subject: [PATCH 6/6] feat(ui): more wording updates in comments Signed-off-by: Franz Heidl --- packages/ui-components/src/components/Icon/Icon.component.tsx | 2 +- packages/ui-components/src/components/Icon/Icon.stories.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/Icon/Icon.component.tsx b/packages/ui-components/src/components/Icon/Icon.component.tsx index a7f3a96e3b..1b93bb1f71 100644 --- a/packages/ui-components/src/components/Icon/Icon.component.tsx +++ b/packages/ui-components/src/components/Icon/Icon.component.tsx @@ -811,7 +811,7 @@ const getColoredSizedIcon = ({ icon, color, size, title, iconClassName, ...iconP /> ) case KnownIconsEnum.success: - // `success` (check_box.svg) has been sundown in favour of `checkCircle` to avoid visual inconsistency. + // `success` (check_box.svg) has been deprecated in favour of `checkCircle` to avoid visual inconsistency. // The `success` name is kept as a valid alias so existing callers continue to work. return (