fix: card component flex issue - Ds 849 (#3817)

* fix: adjust the estimated cost condition to control the visibility of the description * fix: card component flex issue * fix: card component flex issue * fix: card component flex issue * fix: card component flex issue * fix: card component flex issue * fix: card component flex issue * fix: card component flex issue * test(snapshots): update snap * fix: card component flex issue * test(snapshots): update snap --------- Co-authored-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>
scaleway · May 24, 2024 · a915531 · a915531
1 parent 0c77ec7
commit a915531
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 103 deletions.
diff --git a/.changeset/clean-eagles-clean.md b/.changeset/clean-eagles-clean.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix Card component style by removing flex
diff --git a/.gitignore b/.gitignore
@@ -15,7 +15,7 @@ dist/
 coverage
 storybook-static
 .reports
-
+.pnpm-store
 
 # VSCode extension "Local History"
 .history

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,13 +6,6 @@ exports[`FAQ > should work with default props 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   padding: 16px;
   text-align: left;
 }
@@ -106,13 +99,6 @@ exports[`FAQ > should work with illustration 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   padding: 16px;
   text-align: left;
 }
@@ -278,13 +264,6 @@ exports[`FAQ > should work with illustrationTest 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   padding: 16px;
   text-align: left;
 }
@@ -406,13 +385,6 @@ exports[`FAQ > should work with notes 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   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,13 +107,6 @@ exports[`SteppedListCard > should work with custom hide action 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   padding: 0;
 }
 
@@ -551,13 +544,6 @@ exports[`SteppedListCard > should work with default props 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   padding: 0;
 }
 

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
@@ -33,13 +33,6 @@ exports[`Card > renders correctly with advanced header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-2[data-is-active='true'] {
@@ -78,13 +71,6 @@ exports[`Card > renders correctly with className 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -115,13 +101,6 @@ exports[`Card > renders correctly with data-testid 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -153,13 +132,6 @@ exports[`Card > renders correctly with disabled 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -228,13 +200,6 @@ exports[`Card > renders correctly with disabled and header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-4[data-is-active='true'] {
@@ -313,13 +278,6 @@ exports[`Card > renders correctly with header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-4[data-is-active='true'] {
@@ -360,13 +318,6 @@ exports[`Card > renders correctly with isActive 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-0[data-is-active='true'] {
@@ -397,13 +348,6 @@ exports[`Card > renders correctly without header 1`] = `
   border: 1px solid #d9dadd;
   border-radius: 4px;
   padding: 24px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 .emotion-0[data-is-active='true'] {

diff --git a/packages/ui/src/components/Card/index.tsx b/packages/ui/src/components/Card/index.tsx
@@ -29,8 +29,6 @@ const BorderedBox = styled.div`
   border: 1px solid ${({ theme }) => theme.colors.neutral.border};
   border-radius: ${({ theme }) => theme.radii.default};
   padding: ${({ theme }) => theme.space['3']};
-  flex: 1;
-  display: flex;
 
   &[data-is-active='true'] {
     border: 1px solid ${({ theme }) => theme.colors.primary.border};

diff --git a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import { renderWithTheme } from '@utils/test'
 import type { ReactNode } from 'react'
 import { act } from 'react'
-import { beforeAll, describe, expect, test, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { SelectInputV2 } from '..'
 import { OptionalInfo, cities, dataGrouped, dataUnGrouped } from './resources'
 
@@ -16,13 +16,17 @@ export type OptionType = {
 }
 
 describe('SelectInputV2', () => {
-  beforeAll(() => {
+  beforeEach(() => {
     Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
       configurable: true,
       value: 500,
     })
   })
 
+  afterEach(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {})
+  })
+
   test('renders correctly', () => {
     const { asFragment } = renderWithTheme(
       <SelectInputV2 name="test" options={dataUnGrouped} label="label" />,