fix(SelectableCard): illustration not aligned on the right when small…

… text (#4328)
scaleway · Oct 9, 2024 · ed8f35a · ed8f35a
1 parent f24ed35
commit ed8f35a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git a/.changeset/sixty-ladybugs-know.md b/.changeset/sixty-ladybugs-know.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<SelectableCard />` when using illustration
diff --git a/packages/ui/src/components/SelectableCard/__stories__/Illustration.stories.tsx b/packages/ui/src/components/SelectableCard/__stories__/Illustration.stories.tsx
@@ -65,8 +65,7 @@ export const Illustration: StoryFn = args => {
           productIcon="macMiniM2"
           showTick
         >
-          Offer the best experience to your Mac, iPhone and iPad users with VNC,
-          the remote desktop-sharing protocol.
+          Offer the best experience to your Mac
           <Link target="_blank" href="scaleway.com">
             Learn more
           </Link>
@@ -120,8 +119,7 @@ export const Illustration: StoryFn = args => {
           illustration={appleSiliconM2Wire as string}
           showTick
         >
-          Offer the best experience to your Mac, iPhone and iPad users with VNC,
-          the remote desktop-sharing protocol.
+          Offer the best experience to your Mac
           <Link target="_blank" href="scaleway.com">
             Learn more
           </Link>

diff --git a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -3972,20 +3972,26 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
 }
 
 .emotion-27 {
-  -webkit-flex: 1 1 220px;
-  -ms-flex: 1 1 220px;
-  flex: 1 1 220px;
-  height: auto;
-  overflow: hidden;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 0px;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  min-width: 180px;
   position: relative;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  overflow: hidden;
 }
 
 .emotion-29 {

diff --git a/packages/ui/src/components/SelectableCard/index.tsx b/packages/ui/src/components/SelectableCard/index.tsx
@@ -58,7 +58,7 @@ const Container = styled(Stack)`
 
   &[data-image="illustration"] {
     padding: ${({ theme }) => theme.space[0]};
-  } 
+  }
 
   &[data-image="icon"] {
     padding: ${({ theme }) => theme.space[0]};
@@ -80,34 +80,36 @@ const Container = styled(Stack)`
   }
 `
 const StyledDiv = styled.div`
-flex:1 1 220px;
-height: auto;
-overflow: hidden;
-display: flex;
-position: relative;
-align-items: center;
+  display: flex;
+  gap: 0px;
+  flex-flow: column;
+  align-items: normal;
+  justify-content: center;
+  min-width: 180px;
+  position: relative;
+  overflow: hidden;
 `
 
 const StyledImg = styled.img`
-object-fit: cover;
-position: absolute;
-min-width:220px;
-height: auto;
-left: ${({ theme }) => theme.space[1]};
+  object-fit: cover;
+  position: absolute;
+  min-width: 220px;
+  height: auto;
+  left: ${({ theme }) => theme.space[1]};
 `
 
 const StyledSVG = styled.div`
-object-fit: cover;
-position: absolute;
-min-width:220px;
-height: auto;
-left: ${({ theme }) => theme.space[1]};
+  object-fit: cover;
+  position: absolute;
+  min-width:220px;
+  height: auto;
+  left: ${({ theme }) => theme.space[1]};
 `
 
 const IllustrationStack = styled(Stack)`
-padding: ${({ theme }) => theme.space[2]};
-max-width:  calc(100% - 160px);
-flex: 0 1 auto;
+  padding: ${({ theme }) => theme.space[2]};
+  max-width:  calc(100% - 160px);
+  flex: 0 1 auto;
 `
 
 const StyledStack = styled(Stack)`