feat(ui): remove success icon

.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

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,8 +811,10 @@ const getColoredSizedIcon = ({ icon, color, size, title, iconClassName, ...iconP
         />
       )
     case KnownIconsEnum.success:
+      // `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 (
-        <Success
+        <CheckCircle
           width={size}
           height={size}
           className={iconClass}

packages/ui-components/src/components/Icon/Icon.stories.ts

@@ -160,6 +160,8 @@ export const Check: Story = {
 }
 
 export const CheckCircle: Story = {
+  // Note: `success` and `checkCircle` return the same icon. `success` (check_box.svg) has been deprecated
+  // in favour of `checkCircle` to avoid visual inconsistency between two filled checkmark icons.
   args: {
     icon: "checkCircle",
   },
@@ -431,6 +433,8 @@ export const SeverityUnknown: Story = {
 }
 
 export const Success: Story = {
+  // Note: `success` and `checkCircle` return the same icon. `success` (check_box.svg) has been deprecated
+  // in favour of `checkCircle` to avoid visual inconsistency between two filled checkmark icons.
   args: {
     ...Default.args,
     icon: "success",

packages/ui-components/src/components/Icon/Icon.test.tsx

@@ -279,6 +279,14 @@ describe("Icon (typescript)", () => {
     expect(screen.getByRole("img")).toHaveAttribute("alt", "success")
   })
 
+  test("renders checkCircle when calling success (success has been deprecated in favour of checkCircle)", () => {
+    const { container: successContainer } = render(<Icon icon="success" />)
+    const { container: checkCircleContainer } = render(<Icon icon="checkCircle" />)
+    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", () => {
     render(<Icon icon="warning" />)
     expect(screen.getByRole("img")).toBeInTheDocument()