fix(Icon): close circle icon (#4712)

* fix: close circle icon * fix: unit testing due to changes --------- Co-authored-by: Matthias <[email protected]>
scaleway · Jan 30, 2025 · 310e32e · 310e32e
1 parent 9de3560
commit 310e32e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/.changeset/green-fishes-travel.md b/.changeset/green-fishes-travel.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": patch
+---
+
+Fix `CloseCircleOutlineIcon` sizing in viewport
diff --git a/packages/icons/src/components/Icon/__generatedIcons__/CloseCircleOutlineIcon.tsx b/packages/icons/src/components/Icon/__generatedIcons__/CloseCircleOutlineIcon.tsx
@@ -11,6 +11,6 @@ export const CloseCircleOutlineIcon = ({
 }: Omit<IconProps, 'children'>) => (
   // eslint-disable-next-line react/jsx-props-no-spreading
   <Icon {...props}>
-    <path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z" />
+    <path d="M10 16.67c-3.675 0-6.67-2.995-6.67-6.67s2.995-6.67 6.67-6.67 6.67 2.995 6.67 6.67-2.995 6.67-6.67 6.67m0-15C5.39 1.67 1.67 5.39 1.67 10s3.72 8.33 8.33 8.33 8.33-3.72 8.33-8.33S14.61 1.67 10 1.67m2.16 5L10 8.83 7.84 6.67 6.67 7.84 8.83 10 6.67 12.16 7.84 13.33 10 11.17l2.16 2.16 1.17-1.17L11.17 10l2.16-2.16z" />
   </Icon>
 )
diff --git a/packages/icons/src/components/Icon/assets/default/close-circle-outline.svg b/packages/icons/src/components/Icon/assets/default/close-circle-outline.svg
diff --git a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
@@ -34,10 +34,10 @@ exports[`PasswordCheck > render with custom values 1`] = `
 .emotion-4 {
   vertical-align: middle;
   fill: #727683;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-4 .fillStroke {
@@ -59,10 +59,10 @@ exports[`PasswordCheck > render with custom values 1`] = `
 .emotion-10 {
   vertical-align: middle;
   fill: #22674e;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-10 .fillStroke {
@@ -84,7 +84,7 @@ exports[`PasswordCheck > render with custom values 1`] = `
           viewBox="0 0 20 20"
         >
           <path
-            d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z"
+            d="M10 16.67c-3.675 0-6.67-2.995-6.67-6.67s2.995-6.67 6.67-6.67 6.67 2.995 6.67 6.67-2.995 6.67-6.67 6.67m0-15C5.39 1.67 1.67 5.39 1.67 10s3.72 8.33 8.33 8.33 8.33-3.72 8.33-8.33S14.61 1.67 10 1.67m2.16 5L10 8.83 7.84 6.67 6.67 7.84 8.83 10 6.67 12.16 7.84 13.33 10 11.17l2.16 2.16 1.17-1.17L11.17 10l2.16-2.16z"
           />
         </svg>
         <p

diff --git a/packages/ui/src/components/PasswordCheck/index.tsx b/packages/ui/src/components/PasswordCheck/index.tsx
@@ -44,13 +44,13 @@ export const PasswordCheck = ({
           <CheckCircleOutlineIcon
             sentiment="success"
             prominence="weak"
-            size={20}
+            size="large"
           />
         ) : (
           <CloseCircleOutlineIcon
             sentiment="neutral"
             prominence="weak"
-            size={20}
+            size="large"
           />
         )}