From 57b59c1aaa7ac09f930050274a116286cd030c9e Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 2 Feb 2023 20:50:29 +0100 Subject: [PATCH 1/4] fix: allow elements of card to grow to fill the available space --- .../react-card/src/components/Card/useCardStyles.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.ts index 1182e63a9e2e79..897cef6d7df0bf 100644 --- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts +++ b/packages/react-components/react-card/src/components/Card/useCardStyles.ts @@ -98,6 +98,11 @@ const useStyles = makeStyles({ [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: { marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`, }, + + // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space. + [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: { + flexGrow: 1, + }, }, orientationVertical: { flexDirection: 'column', From 85a3fab1bb892e20360ba6993c0e768a43949ff0 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 2 Feb 2023 20:51:01 +0100 Subject: [PATCH 2/4] fix: add missing changefile --- ...ui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json diff --git a/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json b/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json new file mode 100644 index 00000000000000..787c724f845c66 --- /dev/null +++ b/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: allow elements of card to grow to fill the available space", + "packageName": "@fluentui/react-card", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} From 6262c647c9dc1f7281cb783123e110f280927e22 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 8 Feb 2023 13:47:59 +0100 Subject: [PATCH 3/4] test: add VR test for fix --- .../src/stories/Card/Card.stories.tsx | 69 ++++++++++++++----- .../src/stories/Card/utils.tsx | 1 + 2 files changed, 52 insertions(+), 18 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx index 93952e93137c14..9d53d4f34b27d4 100644 --- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Card, CardHeader, CardPreview } from '@fluentui/react-card'; -import { MoreHorizontal24Filled } from '@fluentui/react-icons'; -import { Body1, Caption1 } from '@fluentui/react-text'; +import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-icons'; +import { Body1, Caption1, Text } from '@fluentui/react-text'; import { Button } from '@fluentui/react-button'; -import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils'; +import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent, appLogoUrl } from './utils'; import { ComponentMeta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { makeStyles, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; export default { title: 'Card Converged', @@ -94,22 +96,53 @@ export const Size = () => ( Size.storyName = 'size'; -export const Orientation = () => ( -
-
-

Vertical

- - - -
-
-

Horizontal

- - - +const useOrientationStyles = makeStyles({ + card: { + width: '360px', + maxWidth: '100%', + height: 'fit-content', + marginTop: '16px', + }, + + horizontalCardImage: { + width: '64px', + height: '64px', + }, + + caption: { + color: tokens.colorNeutralForeground3, + }, +}); + +export const Orientation = () => { + const styles = useOrientationStyles(); + + return ( +
+
+

Vertical

+ + + +
+ +
+

Horizontal

+ + + App Name Document + + + App Name} + description={Developer} + action={
-
-); + ); +}; Orientation.storyName = 'orientation'; diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx index 6515a3132d02e7..59a4623f0bc156 100644 --- a/apps/vr-tests-react-components/src/stories/Card/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx @@ -9,6 +9,7 @@ const ASSET_URL = export const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg'; export const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png'; +export const appLogoUrl = ASSET_URL + 'app_logo.svg'; export const SampleCardContent = () => ( <> From 48add2383858c851ae609e7d27b95aa5af8d8dda Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 8 Feb 2023 14:03:04 +0100 Subject: [PATCH 4/4] fix: remove unused import --- .../vr-tests-react-components/src/stories/Card/Card.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx index 9d53d4f34b27d4..a2432075c1d8cd 100644 --- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx @@ -7,7 +7,7 @@ import { Button } from '@fluentui/react-button'; import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent, appLogoUrl } from './utils'; import { ComponentMeta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; -import { makeStyles, shorthands } from '@griffel/react'; +import { makeStyles } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; export default {