refactor(Icon): system icons refactor (#3532)

* refactor: system icons refactor without test * fix: rename variant prop * fix: changeset and rebase * fix: deprecated color prop and updated icons * fix: filled by default * fix: doc icon fixed
scaleway · Mar 12, 2024 · c3ed184 · c3ed184
1 parent 9a82199
commit c3ed184
Show file tree

Hide file tree

Showing 358 changed files with 7,731 additions and 4,681 deletions.
diff --git a/.changeset/polite-pigs-lie.md b/.changeset/polite-pigs-lie.md
@@ -0,0 +1,8 @@
+---
+"@ultraviolet/icons": minor
+"@ultraviolet/form": patch
+"@ultraviolet/plus": patch
+"@ultraviolet/ui": patch
+---
+
+Refactor of `Icon` with new icons and variant and update of every component accordingly
diff --git a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -1610,7 +1610,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   width: 100%;
 }
 
-.css-8ikytl-sizeStyles {
+.css-11hy3ah-sizeStyles {
   vertical-align: middle;
   fill: #b3144d;
   height: 10px;
@@ -1619,6 +1619,11 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   min-height: 10px;
 }
 
+.css-11hy3ah-sizeStyles .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
 .css-1o32707 {
   color: #b3144d;
   font-size: 12px;
@@ -1692,11 +1697,12 @@ exports[`CheckboxField should render correctly with errors 1`] = `
           </label>
           <sup>
             <svg
-              class="css-8ikytl-sizeStyles e1gt4cfo0"
+              class="css-11hy3ah-sizeStyles e1gt4cfo0"
               viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10,2H14L13.21,9.91L19.66,5.27L21.66,8.73L14.42,12L21.66,15.27L19.66,18.73L13.21,14.09L14,22H10L10.79,14.09L4.34,18.73L2.34,15.27L9.58,12L2.34,8.73L4.34,5.27L10.79,9.91L10,2Z"
+                d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
               />
             </svg>
           </sup>

diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -550,7 +550,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
   text-decoration: none;
 }
 
-.css-vesylc-sizeStyles {
+.css-7rgg33-sizeStyles {
   vertical-align: middle;
   fill: #b3144d;
   height: 8px;
@@ -560,6 +560,11 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
   vertical-align: super;
 }
 
+.css-7rgg33-sizeStyles .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
 .css-13gdmaa {
   position: relative;
   display: -webkit-inline-box;
@@ -853,11 +858,12 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
           >
             CheckboxGroupField events 
             <svg
-              class="e1k5uyng0 css-vesylc-sizeStyles e1gt4cfo0"
+              class="e1k5uyng0 css-7rgg33-sizeStyles e1gt4cfo0"
               viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10,2H14L13.21,9.91L19.66,5.27L21.66,8.73L14.42,12L21.66,15.27L19.66,18.73L13.21,14.09L14,22H10L10.79,14.09L4.34,18.73L2.34,15.27L9.58,12L2.34,8.73L4.34,5.27L10.79,9.91L10,2Z"
+                d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
               />
             </svg>
           </legend>

diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap
@@ -291,7 +291,7 @@ exports[`DateField should render correctly 1`] = `
   border-color: inherit;
 }
 
-.css-7ie8u6-sizeStyles {
+.css-8db7ky-sizeStyles {
   vertical-align: middle;
   fill: #3f4250;
   height: 1em;
@@ -300,6 +300,11 @@ exports[`DateField should render correctly 1`] = `
   min-height: 1em;
 }
 
+.css-8db7ky-sizeStyles .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1wkb09n e1bm75lk1"
@@ -333,11 +338,17 @@ exports[`DateField should render correctly 1`] = `
                   class="css-14gyx2a e7tir8v3"
                 >
                   <svg
-                    class="css-7ie8u6-sizeStyles e1gt4cfo0"
-                    viewBox="0 0 24 24"
+                    class="css-8db7ky-sizeStyles e1gt4cfo0"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"
+                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                      fill-rule="evenodd"
                     />
                   </svg>
                 </div>
@@ -642,7 +653,7 @@ exports[`DateField should render correctly disabled 1`] = `
   border-color: inherit;
 }
 
-.css-1bkp7gp-sizeStyles {
+.css-4igx0u-sizeStyles {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1em;
@@ -651,6 +662,11 @@ exports[`DateField should render correctly disabled 1`] = `
   min-height: 1em;
 }
 
+.css-4igx0u-sizeStyles .fillStroke {
+  stroke: #b5b7bd;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1wkb09n e1bm75lk1"
@@ -685,11 +701,17 @@ exports[`DateField should render correctly disabled 1`] = `
                   class="css-14gyx2a e7tir8v3"
                 >
                   <svg
-                    class="css-1bkp7gp-sizeStyles e1gt4cfo0"
-                    viewBox="0 0 24 24"
+                    class="css-4igx0u-sizeStyles e1gt4cfo0"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"
+                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                      fill-rule="evenodd"
                     />
                   </svg>
                 </div>
@@ -996,7 +1018,7 @@ exports[`DateField should trigger events 1`] = `
   border-color: inherit;
 }
 
-.css-7ie8u6-sizeStyles {
+.css-8db7ky-sizeStyles {
   vertical-align: middle;
   fill: #3f4250;
   height: 1em;
@@ -1005,6 +1027,11 @@ exports[`DateField should trigger events 1`] = `
   min-height: 1em;
 }
 
+.css-8db7ky-sizeStyles .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1wkb09n e1bm75lk1"
@@ -1038,11 +1065,17 @@ exports[`DateField should trigger events 1`] = `
                   class="css-14gyx2a e7tir8v3"
                 >
                   <svg
-                    class="css-7ie8u6-sizeStyles e1gt4cfo0"
-                    viewBox="0 0 24 24"
+                    class="css-8db7ky-sizeStyles e1gt4cfo0"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"
+                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                      fill-rule="evenodd"
                     />
                   </svg>
                 </div>

diff --git a/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -110,7 +110,7 @@ exports[`KeyValueField should render with default props & max size 1`] = `
   color: #151a2d;
 }
 
-.css-1ah7xw8-sizeStyles {
+.css-znppnv {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -119,6 +119,11 @@ exports[`KeyValueField should render with default props & max size 1`] = `
   min-height: 16px;
 }
 
+.css-znppnv .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1ln6wpc ehpbis70"
@@ -139,11 +144,12 @@ exports[`KeyValueField should render with default props & max size 1`] = `
             type="button"
           >
             <svg
-              class="css-1ah7xw8-sizeStyles e1gt4cfo0"
-              viewBox="0 0 24 24"
+              class="css-znppnv e1gt4cfo0"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5z"
               />
             </svg>
             add
@@ -265,7 +271,7 @@ exports[`KeyValueField should render with default props 1`] = `
   color: #151a2d;
 }
 
-.css-1ah7xw8-sizeStyles {
+.css-znppnv {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -274,6 +280,11 @@ exports[`KeyValueField should render with default props 1`] = `
   min-height: 16px;
 }
 
+.css-znppnv .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1ln6wpc ehpbis70"
@@ -294,11 +305,12 @@ exports[`KeyValueField should render with default props 1`] = `
             type="button"
           >
             <svg
-              class="css-1ah7xw8-sizeStyles e1gt4cfo0"
-              viewBox="0 0 24 24"
+              class="css-znppnv e1gt4cfo0"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5z"
               />
             </svg>
             add
@@ -412,7 +424,7 @@ exports[`KeyValueField should render with default props in readonly mode 1`] = `
   text-decoration: none;
 }
 
-.css-1ah7xw8-sizeStyles {
+.css-znppnv {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -421,6 +433,11 @@ exports[`KeyValueField should render with default props in readonly mode 1`] = `
   min-height: 16px;
 }
 
+.css-znppnv .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
 <form>
     <div
       class="css-1ln6wpc ehpbis70"
@@ -442,11 +459,12 @@ exports[`KeyValueField should render with default props in readonly mode 1`] = `
             type="button"
           >
             <svg
-              class="css-1ah7xw8-sizeStyles e1gt4cfo0"
-              viewBox="0 0 24 24"
+              class="css-znppnv e1gt4cfo0"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5z"
               />
             </svg>
             add