WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit ee25fa4

Browse files
PixeledCodekodiakhq[bot]
PixeledCode
and
kodiakhq[bot]
authored
Card full height (#4286)
* feat(card): add fillHeight prop * feat(card): add changeset * feat(card): add typedocs * feat(card): add docs section * feat(card): fix types * feat(card): update import * feat(card): update typedocs * feat(card): update docs --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 262c1b7 commit ee25fa4

File tree

7 files changed

+133
-6
lines changed

7 files changed

+133
-6
lines changed

‎.changeset/stupid-pianos-brake.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/card": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Card]: add `fillHeight` prop to make card height stretch to the container height

‎packages/paste-core/components/card/src/Card.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@ export interface CardProps extends HTMLPasteProps<"article">, PaddingProps {
1414
* @memberof CardProps
1515
*/
1616
element?: BoxProps["element"];
17+
18+
/**
19+
* Overrides the default element name to apply unique styles with the Customization Provider
20+
*
21+
* @default false
22+
* @type {boolean}
23+
* @memberof CardProps
24+
*/
25+
fillHeight?: boolean;
1726
}
1827

1928
const Card = React.forwardRef<HTMLElement, CardProps>(
@@ -26,6 +35,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(
2635
paddingLeft,
2736
paddingRight,
2837
paddingTop,
38+
fillHeight,
2939
...props
3040
},
3141
ref,
@@ -46,6 +56,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(
4656
paddingRight={paddingRight}
4757
paddingTop={paddingTop}
4858
backgroundColor="colorBackgroundWeakest"
59+
height={fillHeight ? "100%" : undefined}
4960
>
5061
{children}
5162
</Box>

‎packages/paste-core/components/card/stories/index.stories.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { StoryFn } from "@storybook/react";
2+
import { Box } from "@twilio-paste/box";
23
import { CustomizationProvider } from "@twilio-paste/customization";
4+
import { Column, Grid } from "@twilio-paste/grid";
35
import { Heading } from "@twilio-paste/heading";
46
import { Paragraph } from "@twilio-paste/paragraph";
57
import { Stack } from "@twilio-paste/stack";
@@ -62,6 +64,49 @@ export const PropPassthrough = (): React.ReactNode => (
6264
</Card>
6365
);
6466

67+
export const FillHeight = (): React.ReactNode => (
68+
<Box>
69+
<Grid gutter="space30">
70+
<Column>
71+
<Card>
72+
<Paragraph>Without fillHeight, the card will only be as tall as its content.</Paragraph>
73+
</Card>
74+
</Column>
75+
<Column>
76+
<Card>
77+
<Paragraph>
78+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
79+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
80+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
81+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
82+
</Paragraph>
83+
</Card>
84+
</Column>
85+
</Grid>
86+
87+
<Grid gutter="space30" marginTop="space100">
88+
<Column>
89+
<Card fillHeight>
90+
<Paragraph>
91+
With fillHeight, the card will stretch to fill the height of the container. This can be useful when you need
92+
to align multiple cards in a row.
93+
</Paragraph>
94+
</Card>
95+
</Column>
96+
<Column>
97+
<Card>
98+
<Paragraph>
99+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
100+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
101+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
102+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
103+
</Paragraph>
104+
</Card>
105+
</Column>
106+
</Grid>
107+
</Box>
108+
);
109+
65110
export const CustomCard: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
66111
const currentTheme = useTheme();
67112
return (

‎packages/paste-core/components/card/type-docs.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,13 @@
473473
"required": false,
474474
"externalProp": true
475475
},
476+
"fillHeight": {
477+
"type": "boolean",
478+
"defaultValue": false,
479+
"required": false,
480+
"externalProp": false,
481+
"description": "Overrides the default element name to apply unique styles with the Customization Provider"
482+
},
476483
"hidden": {
477484
"type": "boolean",
478485
"defaultValue": null,

‎packages/paste-website/src/component-examples/CardExamples.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,30 @@ export const TitleBodyButtonExample = `const CardExample = () => {
9999
100100
render(<CardExample />);`.trim();
101101

102+
export const FillHeightExample = `const CardExample = () => {
103+
return (
104+
<Grid gutter="space30">
105+
<Column>
106+
<Card fillHeight>
107+
<Paragraph>
108+
With fillHeight, the card will stretch to fill the height of the container.
109+
</Paragraph>
110+
</Card>
111+
</Column>
112+
<Column>
113+
<Card>
114+
<Paragraph>
115+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
116+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
117+
</Paragraph>
118+
</Card>
119+
</Column>
120+
</Grid>
121+
);
122+
};
123+
124+
render(<CardExample />);`.trim();
125+
102126
export const MarketingOneExample = `const CardExample = () => {
103127
return (
104128
<Card>

‎packages/paste-website/src/pages/components/card/index.mdx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import MultipleDont from '../../../assets/images/dont2-multiple-primary.png';
2727
import packageJson from '@twilio-paste/card/package.json';
2828
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
2929
import {getFeature, getNavigationData} from '../../../utils/api';
30-
import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample} from '../../../component-examples/CardExamples'
30+
import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample, FillHeightExample} from '../../../component-examples/CardExamples'
3131

3232
export default ComponentPageLayout;
3333

@@ -77,9 +77,9 @@ If you find yourself limited by the default styling and constraints of a Card, y
7777
but first consider bringing the problem you are trying to solve
7878
to Design System Office Hours to see if another component or pattern could fit your needs.
7979

80-
### Examples
80+
## Examples
8181

82-
#### Default Card
82+
### Default Card
8383

8484
By default, a Card has `space100` padding, which can be adjusted with [padding props](/components/card/api#card) and [spacing tokens](/tokens/list#spacings).
8585

@@ -90,7 +90,7 @@ By default, a Card has `space100` padding, which can be adjusted with [padding p
9090
code={DefaultExample}
9191
/>
9292

93-
#### Adjusting padding
93+
### Adjusting padding
9494

9595
You can set non-default padding on all sides of a Card.
9696

@@ -101,7 +101,7 @@ You can set non-default padding on all sides of a Card.
101101
code={AdjustingPaddingExample}
102102
/>
103103

104-
#### Card with Title, Body and Button
104+
### Card with Title, Body and Button
105105

106106
One of the most common use cases for a Card is to relate a title ([Heading](/components/heading)), supporting body copy ([Paragraph](/components/paragraph)),
107107
and primary action ([Button](/components/button)) together. Relating these three elements together with a Card makes it easy for a user to
@@ -113,7 +113,18 @@ digest and provides a clear call to action.
113113
code={TitleBodyButtonExample}
114114
/>
115115

116-
#### Marketing Card
116+
### Fill height
117+
118+
In scenarios where there is a requirement for the card to fill the height of the parent container, you can use the `fillHeight` prop.
119+
120+
<StoryPreview
121+
height="350px"
122+
title="Card examples - Fill height"
123+
storyID="website-cardexamples--fill-height-example"
124+
code={FillHeightExample}
125+
/>
126+
127+
### Marketing Card
117128

118129
Use these layouts when you need to draw customers’ attention to upsell and cross-sell opportunities. Use them sparingly, mainly when they’ll help customers solve immediate problems.
119130

‎packages/paste-website/stories/Card.stories.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Box } from "@twilio-paste/box";
55
import { Button } from "@twilio-paste/button";
66
import { ButtonGroup } from "@twilio-paste/button-group";
77
import { Card } from "@twilio-paste/card";
8+
import { Column, Grid } from "@twilio-paste/grid";
89
import { Heading } from "@twilio-paste/heading";
910
import { AcceptIcon } from "@twilio-paste/icons/esm/AcceptIcon";
1011
import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
@@ -135,6 +136,28 @@ TitleBodyButtonExample.parameters = {
135136
padding: false,
136137
};
137138

139+
export const FillHeightExample = (): JSX.Element => (
140+
<Grid gutter="space30">
141+
<Column>
142+
<Card fillHeight>
143+
<Paragraph>With fillHeight, the card will stretch to fill the height of the container.</Paragraph>
144+
</Card>
145+
</Column>
146+
<Column>
147+
<Card>
148+
<Paragraph>
149+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
150+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
151+
</Paragraph>
152+
</Card>
153+
</Column>
154+
</Grid>
155+
);
156+
157+
FillHeightExample.parameters = {
158+
padding: false,
159+
};
160+
138161
export const MarketingOneExample = (): JSX.Element => {
139162
return (
140163
<Card>

0 commit comments

Comments
 (0)