feat(icons): use rem on icons (#4602)

* feat(icons): use rem on icons * fix: unit testing
scaleway · Jan 6, 2025 · 9fd969e · 9fd969e
1 parent 9972cc5
commit 9fd969e
Show file tree

Hide file tree

Showing 17 changed files with 302 additions and 294 deletions.
diff --git a/.changeset/stupid-teachers-jump.md b/.changeset/stupid-teachers-jump.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": minor
+---
+
+Migrate icons sizes from px to remu using new theme `sizing` prop
diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
@@ -163,10 +163,10 @@ exports[`DateField > should render correctly 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #3f4250;
-  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-12 .fillStroke {
@@ -399,10 +399,10 @@ exports[`DateField > should render correctly disabled 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #b5b7bd;
-  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-12 .fillStroke {
@@ -636,10 +636,10 @@ exports[`DateField > should trigger events 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #3f4250;
-  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-12 .fillStroke {

diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -209,10 +209,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1075,10 +1075,10 @@ exports[`SelectInputField > should render correctly 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1343,10 +1343,10 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1611,10 +1611,10 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1879,10 +1879,10 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -2145,10 +2145,10 @@ exports[`SelectInputField > should trigger events 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {

diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -459,10 +459,10 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
 .emotion-28 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-28 .fillStroke {
@@ -1090,10 +1090,10 @@ exports[`UnitInputField > should render correctly 1`] = `
 .emotion-26 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-26 .fillStroke {

diff --git a/packages/icons/src/components/Icon/Icon.tsx b/packages/icons/src/components/Icon/Icon.tsx
@@ -1,3 +1,4 @@
+import type { Theme } from '@emotion/react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { consoleLightTheme as theme } from '@ultraviolet/themes'
@@ -6,10 +7,10 @@ import { forwardRef } from 'react'
 import capitalize from '../../utils/capitalize'
 
 const SIZES = {
-  small: 16,
-  large: 20,
-  xlarge: 32,
-  xxlarge: 56,
+  small: '200',
+  large: '250',
+  xlarge: '400',
+  xxlarge: '700',
 } as const
 
 type Color = Extract<
@@ -25,15 +26,17 @@ type Color = Extract<
 
 const sizeStyles = ({
   size,
+  theme,
 }: {
   size: keyof typeof SIZES | number | string
+  theme: Theme
 }) => {
   if (typeof size === 'string' && size in SIZES) {
     return css`
-        height: ${SIZES[size as keyof typeof SIZES]}px;
-        width: ${SIZES[size as keyof typeof SIZES]}px;
-        min-width: ${SIZES[size as keyof typeof SIZES]}px;
-        min-height: ${SIZES[size as keyof typeof SIZES]}px;
+        height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        min-width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        min-height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
     `
   }
 

diff --git a/packages/icons/src/components/Logo/Icon.tsx b/packages/icons/src/components/Logo/Icon.tsx
@@ -2,19 +2,19 @@ import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 
 const SIZES = {
-  small: 16,
-  medium: 20,
-  large: 32,
-  xlarge: 56,
-}
+  small: '200',
+  medium: '250',
+  large: '400',
+  xlarge: '700',
+} as const
 
 const StyledIcon = styled('svg', {
   shouldForwardProp: prop => !['size'].includes(prop),
 })<{ size: keyof typeof SIZES }>`
   & {
-    width: ${({ size }) => `${SIZES[size]}px`};
-    min-width: ${({ size }) => `${SIZES[size]}px`}; // This is to avoid the icon to shrink when the text is too long
-    height: ${({ size }) => `${SIZES[size]}px`};
+    width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
+    min-width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`}; // This is to avoid the icon to shrink when the text is too long
+    height: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
   }
 `
 

diff --git a/packages/icons/src/components/ProductIcon/Icon.tsx b/packages/icons/src/components/ProductIcon/Icon.tsx
@@ -4,20 +4,20 @@ import type { ReactNode } from 'react'
 type Variants = 'primary' | 'danger' | 'warning' | 'original'
 
 export const SIZES = {
-  xsmall: 24,
-  small: 32,
-  medium: 40,
-  large: 48,
-  xlarge: 64,
+  xsmall: '300',
+  small: '400',
+  medium: '500',
+  large: '600',
+  xlarge: '800',
 } as const
 
 const StyledIcon = styled('svg', {
   shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
 })<{ variant: Variants; disabled?: boolean; size: keyof typeof SIZES }>`
   & {
-    width: ${({ size }) => `${SIZES[size]}px`};
-    min-width: ${({ size }) => `${SIZES[size]}px`}; // This is to avoid the icon to shrink when the text is too long
-    height: ${({ size }) => `${SIZES[size]}px`};
+    width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
+    min-width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`}; // This is to avoid the icon to shrink when the text is too long
+    height: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
   }
 
   path[fill].fill,

diff --git a/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap
@@ -378,9 +378,9 @@ exports[`FAQ > should work with productIconName 1`] = `
 }
 
 .emotion-5 {
-  width: 64px;
-  min-width: 64px;
-  height: 64px;
+  width: 4rem;
+  min-width: 4rem;
+  height: 4rem;
 }
 
 .emotion-5 path[fill].fill,

diff --git a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -1091,9 +1091,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -2262,9 +2262,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -3447,9 +3447,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -4504,9 +4504,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -5963,9 +5963,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -7422,9 +7422,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -8895,9 +8895,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -10354,9 +10354,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,