fix(Card): auto expand height in a row context

scaleway · Oct 24, 2024 · f8532ce · f8532ce
1 parent 9b81577
commit f8532ce
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 0 deletions.
diff --git a/.changeset/thick-queens-brush.md b/.changeset/thick-queens-brush.md
@@ -0,0 +1,6 @@
+---
+"@ultraviolet/plus": patch
+"@ultraviolet/ui": patch
+---
+
+Auto increase the height of `<Card />` in a row context
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
@@ -6,6 +6,9 @@ exports[`FAQ > should work with default props 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 16px;
   text-align: left;
 }
@@ -99,6 +102,9 @@ exports[`FAQ > should work with illustrationTest 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 16px;
   text-align: left;
 }
@@ -220,6 +226,9 @@ exports[`FAQ > should work with notes 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 16px;
   text-align: left;
 }
@@ -330,6 +339,9 @@ exports[`FAQ > should work with productIconName 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 16px;
   text-align: left;
 }

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
@@ -107,6 +107,9 @@ exports[`SteppedListCard > should work with custom hide action 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 0;
 }
 
@@ -544,6 +547,9 @@ exports[`SteppedListCard > should work with default props 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 0;
 }
 

diff --git a/packages/ui/src/components/Card/__stories__/Layout.stories.tsx b/packages/ui/src/components/Card/__stories__/Layout.stories.tsx
@@ -0,0 +1,25 @@
+import type { StoryFn } from '@storybook/react'
+import { Row } from '../../Row'
+import { Card } from '../index'
+
+export const Layout: StoryFn = args => (
+  <Row templateColumns="repeat(2, 1fr)" gap={2}>
+    <Card {...args} header="Lorem Ipsum">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit Pellentesque sit
+    </Card>
+    <Card header="Lorem Ipsum">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit Pellentesque sit
+      amet purus nec nunc fermentum ultricies Donec auctor, nunc nec ultricies
+      ultricies, nunc nunc
+    </Card>
+  </Row>
+)
+
+Layout.parameters = {
+  docs: {
+    description: {
+      story:
+        'You can set two cards in a row with `Row` component. The card will automatically adjust its width and height to fit the row.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Card/__stories__/index.stories.tsx b/packages/ui/src/components/Card/__stories__/index.stories.tsx
@@ -12,3 +12,4 @@ export { SubHeader } from './SubHeader.stories'
 export { AdvancedHeader } from './AdvancedHeader.stories'
 export { Active } from './Active.stories'
 export { Disabled } from './Disabled.stories'
+export { Layout } from './Layout.stories'
diff --git a/packages/ui/src/components/Card/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Card/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,6 +6,9 @@ exports[`Card > renders correctly with active 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -36,6 +39,9 @@ exports[`Card > renders correctly with active and disabled 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -93,6 +99,9 @@ exports[`Card > renders correctly with advanced header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-2[data-is-active='true'] {
@@ -158,6 +167,9 @@ exports[`Card > renders correctly with advanced header and subHeader 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-2[data-is-active='true'] {
@@ -226,6 +238,9 @@ exports[`Card > renders correctly with advanced subHeader 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -286,6 +301,9 @@ exports[`Card > renders correctly with className 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -316,6 +334,9 @@ exports[`Card > renders correctly with data-testid 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -347,6 +368,9 @@ exports[`Card > renders correctly with disabled 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -416,6 +440,9 @@ exports[`Card > renders correctly with disabled and header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-4[data-is-active='true'] {
@@ -495,6 +522,9 @@ exports[`Card > renders correctly with header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-4[data-is-active='true'] {
@@ -574,6 +604,9 @@ exports[`Card > renders correctly with header and subHeader 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-4[data-is-active='true'] {
@@ -658,6 +691,9 @@ exports[`Card > renders correctly with subHeader 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -732,6 +768,9 @@ exports[`Card > renders correctly without header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .emotion-0[data-is-active='true'] {

diff --git a/packages/ui/src/components/Card/index.tsx b/packages/ui/src/components/Card/index.tsx
@@ -42,6 +42,8 @@ const BorderedBox = styled.div`
   &[data-disabled='true'] {
     border: 1px solid ${({ theme }) => theme.colors.neutral.borderDisabled};
   }
+
+  flex: 1 1 auto;
 `
 
 /**