From e8b527e2118be256ca2fe0fcb31ddc58807a9941 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 9 Apr 2025 09:06:51 -0500 Subject: [PATCH 1/3] feat(card): add fillWidth --- .changeset/sharp-pens-relax.md | 6 + .../paste-core/components/card/src/Card.tsx | 13 ++- .../components/card/stories/index.stories.tsx | 105 ++++++++++++++++++ .../src/component-examples/CardExamples.ts | 105 ++++++++++++++++++ .../src/pages/components/card/index.mdx | 13 ++- .../paste-website/stories/Card.stories.tsx | 105 ++++++++++++++++++ 6 files changed, 344 insertions(+), 3 deletions(-) create mode 100644 .changeset/sharp-pens-relax.md diff --git a/.changeset/sharp-pens-relax.md b/.changeset/sharp-pens-relax.md new file mode 100644 index 0000000000..e5cf68c165 --- /dev/null +++ b/.changeset/sharp-pens-relax.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/card": minor +"@twilio-paste/core": minor +--- + +[Card]: add `fillWidth` prop to make card width stretch to the container width diff --git a/packages/paste-core/components/card/src/Card.tsx b/packages/paste-core/components/card/src/Card.tsx index 1e658c1181..42e4d77c25 100644 --- a/packages/paste-core/components/card/src/Card.tsx +++ b/packages/paste-core/components/card/src/Card.tsx @@ -14,15 +14,22 @@ export interface CardProps extends HTMLPasteProps<"article">, PaddingProps { * @memberof CardProps */ element?: BoxProps["element"]; - /** - * Overrides the default element name to apply unique styles with the Customization Provider + * Force the height to take up the full height of the parent element * * @default false * @type {boolean} * @memberof CardProps */ fillHeight?: boolean; + /** + * Force the width to take up the full width of the parent element + * + * @default false + * @type {boolean} + * @memberof CardProps + */ + fillWidth?: boolean; } const Card = React.forwardRef( @@ -36,6 +43,7 @@ const Card = React.forwardRef( paddingRight, paddingTop, fillHeight, + fillWidth, ...props }, ref, @@ -57,6 +65,7 @@ const Card = React.forwardRef( paddingTop={paddingTop} backgroundColor="colorBackgroundWeakest" height={fillHeight ? "100%" : undefined} + width={fillWidth ? "100%" : undefined} > {children} diff --git a/packages/paste-core/components/card/stories/index.stories.tsx b/packages/paste-core/components/card/stories/index.stories.tsx index d52ece925d..cb2269d2d4 100644 --- a/packages/paste-core/components/card/stories/index.stories.tsx +++ b/packages/paste-core/components/card/stories/index.stories.tsx @@ -1,5 +1,7 @@ import type { StoryFn } from "@storybook/react"; +import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; import { CustomizationProvider } from "@twilio-paste/customization"; import { Column, Grid } from "@twilio-paste/grid"; import { Heading } from "@twilio-paste/heading"; @@ -107,6 +109,109 @@ export const FillHeight = (): React.ReactNode => ( ); +export const FillWidth = (): React.ReactNode => ( + + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque + libero nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi + voluptate enim harum amet. + + + + + + link + + + + + + + + + + With fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + Without fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque + libero nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi + voluptate enim harum amet. + + + + + + link + + + + + + +); + export const CustomCard: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-website/src/component-examples/CardExamples.ts b/packages/paste-website/src/component-examples/CardExamples.ts index 7e1f7da128..4c9505ee53 100644 --- a/packages/paste-website/src/component-examples/CardExamples.ts +++ b/packages/paste-website/src/component-examples/CardExamples.ts @@ -123,6 +123,111 @@ export const FillHeightExample = `const CardExample = () => { render();`.trim(); +export const FillWidthExample = `const CardExample = () => { + return ( + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque libero + nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi voluptate + enim harum amet. + + + + + + link + + + + + + + + + + With fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + Without fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque libero + nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi voluptate + enim harum amet. + + + + + + link + + + + + + ); +}; + +render();`.trim(); + export const MarketingOneExample = `const CardExample = () => { return ( diff --git a/packages/paste-website/src/pages/components/card/index.mdx b/packages/paste-website/src/pages/components/card/index.mdx index f994687f2e..9a70e5e2e5 100644 --- a/packages/paste-website/src/pages/components/card/index.mdx +++ b/packages/paste-website/src/pages/components/card/index.mdx @@ -27,7 +27,7 @@ import MultipleDont from '../../../assets/images/dont2-multiple-primary.png'; import packageJson from '@twilio-paste/card/package.json'; import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; -import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample, FillHeightExample} from '../../../component-examples/CardExamples' +import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample, FillHeightExample, FillWidthExample} from '../../../component-examples/CardExamples' export default ComponentPageLayout; @@ -124,6 +124,17 @@ In scenarios where there is a requirement for the card to fill the height of the code={FillHeightExample} /> +### Fill width + +Card width should fill the available space of the parent container. However, when wrapped in a flex container, the Card will shrink to fit the available space. To prevent this, you can use the `fillWidth` prop. + + + ### Marketing Card 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. diff --git a/packages/paste-website/stories/Card.stories.tsx b/packages/paste-website/stories/Card.stories.tsx index cf40e1345d..06cc1d3aab 100644 --- a/packages/paste-website/stories/Card.stories.tsx +++ b/packages/paste-website/stories/Card.stories.tsx @@ -158,6 +158,111 @@ FillHeightExample.parameters = { padding: false, }; +export const FillWidthExample = (): JSX.Element => ( + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque libero + nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi voluptate + enim harum amet. + + + + + + link + + + + + + + + + + With fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + Without fillWidth prop + + + + + the description + + + + + link + + + + + + + + + + the title + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti reprehenderit quam ad magnam cumque libero + nam veniam consequuntur deserunt, officia cupiditate similique accusamus expedita possimus, commodi voluptate + enim harum amet. + + + + + + link + + + + + +); + +FillWidthExample.parameters = { + padding: false, +}; + export const MarketingOneExample = (): JSX.Element => { return ( From 380bbe6f9c6e46ff8d4bda668d04779697d95889 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 9 Apr 2025 09:11:40 -0500 Subject: [PATCH 2/3] chore(ci): card typedocs --- packages/paste-core/components/card/type-docs.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/paste-core/components/card/type-docs.json b/packages/paste-core/components/card/type-docs.json index e937b150f0..e50adc3fdb 100644 --- a/packages/paste-core/components/card/type-docs.json +++ b/packages/paste-core/components/card/type-docs.json @@ -478,7 +478,14 @@ "defaultValue": false, "required": false, "externalProp": false, - "description": "Overrides the default element name to apply unique styles with the Customization Provider" + "description": "Force the height to take up the full height of the parent element" + }, + "fillWidth": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "Force the width to take up the full width of the parent element" }, "hidden": { "type": "boolean", From e1b3d30bb88be07a862dffa287cb30bb89cdd5ae Mon Sep 17 00:00:00 2001 From: krisantrobus <55083528+krisantrobus@users.noreply.github.com> Date: Wed, 9 Apr 2025 15:25:53 -0500 Subject: [PATCH 3/3] Update packages/paste-website/src/pages/components/card/index.mdx Co-authored-by: Sarah --- packages/paste-website/src/pages/components/card/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-website/src/pages/components/card/index.mdx b/packages/paste-website/src/pages/components/card/index.mdx index 9a70e5e2e5..e42eeba5cc 100644 --- a/packages/paste-website/src/pages/components/card/index.mdx +++ b/packages/paste-website/src/pages/components/card/index.mdx @@ -126,7 +126,7 @@ In scenarios where there is a requirement for the card to fill the height of the ### Fill width -Card width should fill the available space of the parent container. However, when wrapped in a flex container, the Card will shrink to fit the available space. To prevent this, you can use the `fillWidth` prop. +By default, Card width fills the available space of the parent container. However, when wrapped in a flexbox, Card shrinks to fit the available space. To prevent this, use the `fillWidth` prop.