fix(Bullet): wrongly applying class name due to styling error (#4470)

scaleway · Nov 18, 2024 · 20ee243 · 20ee243
1 parent 4495f5c
commit 20ee243
Show file tree

Hide file tree

Showing 7 changed files with 384 additions and 246 deletions.
diff --git a/.changeset/soft-rice-swim.md b/.changeset/soft-rice-swim.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Hotfix: bullet not applying proper classNames
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
@@ -154,12 +154,12 @@ exports[`FAQ > should work with illustrationTest 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #641cb3;
-  background: #f1eefc;
-  border: 1px solid #f1eefc;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #641cb3;
+  background: #f1eefc;
+  border: 1px solid #f1eefc;
 }
 
 .emotion-7 {

diff --git a/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -214,12 +214,12 @@ exports[`SteppedListCard > should work with custom hide action 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #ffffff;
-  background: #8c40ef;
-  border: 1px solid #8c40ef;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #ffffff;
+  background: #8c40ef;
+  border: 1px solid #8c40ef;
 }
 
 .emotion-21 {
@@ -274,12 +274,12 @@ exports[`SteppedListCard > should work with custom hide action 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 .emotion-33 {
@@ -663,12 +663,12 @@ exports[`SteppedListCard > should work with default props 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #ffffff;
-  background: #8c40ef;
-  border: 1px solid #8c40ef;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #ffffff;
+  background: #8c40ef;
+  border: 1px solid #8c40ef;
 }
 
 .emotion-21 {
@@ -723,12 +723,12 @@ exports[`SteppedListCard > should work with default props 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 .emotion-33 {

diff --git a/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,12 +16,12 @@ exports[`Bullet > renders correctly with a text 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 <div
@@ -52,12 +52,12 @@ exports[`Bullet > renders correctly with an icon 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 .emotion-2 {
@@ -110,12 +110,12 @@ exports[`Bullet > renders correctly with an icon and icon variant 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 .emotion-2 {
@@ -170,12 +170,12 @@ exports[`Bullet > sentiment > render danger 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #b3144d;
-  background: #ffebf2;
-  border: 1px solid #ffebf2;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #b3144d;
+  background: #ffebf2;
+  border: 1px solid #ffebf2;
 }
 
 <div
@@ -206,12 +206,12 @@ exports[`Bullet > sentiment > render disabled 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #727683;
-  background: #e9eaeb;
-  border: none;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #727683;
+  background: #e9eaeb;
+  border: none;
 }
 
 <div
@@ -242,12 +242,12 @@ exports[`Bullet > sentiment > render info 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #005da3;
-  background: #e0f2ff;
-  border: 1px solid #e0f2ff;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #005da3;
+  background: #e0f2ff;
+  border: 1px solid #e0f2ff;
 }
 
 <div
@@ -278,12 +278,12 @@ exports[`Bullet > sentiment > render neutral 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 <div
@@ -314,12 +314,12 @@ exports[`Bullet > sentiment > render primary 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #641cb3;
-  background: #f1eefc;
-  border: 1px solid #f1eefc;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #641cb3;
+  background: #f1eefc;
+  border: 1px solid #f1eefc;
 }
 
 <div
@@ -350,12 +350,12 @@ exports[`Bullet > sentiment > render secondary 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #ac22e7;
-  background: #f9ebff;
-  border: 1px solid #f9ebff;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #ac22e7;
+  background: #f9ebff;
+  border: 1px solid #f9ebff;
 }
 
 <div
@@ -386,12 +386,12 @@ exports[`Bullet > sentiment > render success 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #22674e;
-  background: #daf6ec;
-  border: 1px solid #daf6ec;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #22674e;
+  background: #daf6ec;
+  border: 1px solid #daf6ec;
 }
 
 <div
@@ -422,12 +422,12 @@ exports[`Bullet > sentiment > render warning 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #7c5400;
-  background: #fff6e6;
-  border: 1px solid #fff6e6;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #7c5400;
+  background: #fff6e6;
+  border: 1px solid #fff6e6;
 }
 
 <div
@@ -458,12 +458,12 @@ exports[`Bullet > size > render medium 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 2rem;
   height: 2rem;
   font-size: 1rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 <div
@@ -494,12 +494,12 @@ exports[`Bullet > size > render small 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #3f4250;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
   width: 1.5rem;
   height: 1.5rem;
   font-size: 0.875rem;
+  color: #3f4250;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
 }
 
 <div

diff --git a/packages/ui/src/components/Bullet/index.tsx b/packages/ui/src/components/Bullet/index.tsx
@@ -17,19 +17,6 @@ const BULLET_SENTIMENTS = [...SENTIMENTS, 'disabled']
 
 type BulletSentiment = (typeof BULLET_SENTIMENTS)[number]
 
-const sizes = ({ theme }: { theme: Theme }) =>
-  ({
-    medium: `
-    width: ${theme.sizing['400']};
-    height: ${theme.sizing['400']};
-    font-size: ${theme.typography.body.fontSize}};
-  `,
-    small: `
-    width: ${theme.sizing['300']};
-    height: ${theme.sizing['300']};
-    font-size: ${theme.typography.bodySmall.fontSize};
-  `,
-  }) as const
 type BulletSize = 'medium' | 'small'
 
 const sentimentStyles = ({
@@ -80,24 +67,24 @@ const sentimentStyles = ({
   }
 }
 
-const sizeStyles = ({ size, theme }: { size: BulletSize; theme: Theme }) =>
-  sizes({ theme })[size]
-
 type StyledContainerType = {
   sentiment: BulletSentiment
   size: BulletSize
   prominence: ProminenceType
 }
+
 const StyledContainer = styled('div')<StyledContainerType>`
   display: inline-flex;
   border-radius: ${({ theme }) => theme.radii.circle};
   justify-content: center;
   align-items: center;
+  width: ${({ size, theme }) => (size === 'medium' ? theme.sizing['400'] : theme.sizing['300'])};
+  height: ${({ size, theme }) => (size === 'medium' ? theme.sizing['400'] : theme.sizing['300'])};
+  font-size: ${({ size, theme }) => (size === 'medium' ? theme.typography.body.fontSize : theme.typography.bodySmall.fontSize)};
   ${({ theme, prominence, sentiment }) =>
     (sentimentStyles({ theme, prominence }) as Record<BulletSentiment, string>)[
       sentiment
-    ]}
-  ${sizeStyles}
+    ]};
 `
 
 type ContentProps = XOR<