Skip to content

Commit

Permalink
fix(Card): auto expand height in a row context
Browse files Browse the repository at this point in the history
  • Loading branch information
matthprost committed Oct 24, 2024
1 parent 9b81577 commit f8532ce
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .changeset/thick-queens-brush.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ultraviolet/plus": patch
"@ultraviolet/ui": patch
---

Auto increase the height of `<Card />` in a row context
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
25 changes: 25 additions & 0 deletions packages/ui/src/components/Card/__stories__/Layout.stories.tsx
Original file line number Diff line number Diff line change
@@ -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.',
},
},
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Original file line number Diff line number Diff line change
Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -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'] {
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/Card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ const BorderedBox = styled.div`
&[data-disabled='true'] {
border: 1px solid ${({ theme }) => theme.colors.neutral.borderDisabled};
}
flex: 1 1 auto;
`

/**
Expand Down

0 comments on commit f8532ce

Please sign in to comment.