Skip to content

fix(react-card): allow elements to grow to fill the available space #26616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcosmoura merged 7 commits into from
Feb 22, 2023
Merged

fix(react-card): allow elements to grow to fill the available space #26616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
57b59c1
fix: allow elements of card to grow to fill the available space
marcosmoura Feb 2, 2023
85a3fab
fix: add missing changefile
marcosmoura Feb 2, 2023
0cb36f9
Merge branch 'master' into fix/card-header-not-fitting-full-card-size
marcosmoura Feb 6, 2023
a1daa59
Merge branch 'master' into fix/card-header-not-fitting-full-card-size
marcosmoura Feb 8, 2023
6262c64
test: add VR test for fix
marcosmoura Feb 8, 2023
48add23
fix: remove unused import
marcosmoura Feb 8, 2023
cd1c0ef
Merge branch 'master' into fix/card-header-not-fitting-full-card-size
marcosmoura Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 51 additions & 18 deletions apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';

export default {
title: 'Card Converged',
Expand Down Expand Up @@ -94,22 +96,53 @@ export const Size = () => (

Size.storyName = 'size';

export const Orientation = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<div>
<h1>Vertical</h1>
<Card orientation="vertical">
<SampleCardContent />
</Card>
</div>
<div>
<h1>Horizontal</h1>
<Card orientation="horizontal">
<SampleCardContent />
</Card>
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 (
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<div>
<h1>Vertical</h1>
<Card orientation="vertical">
<SampleCardContent />
</Card>
</div>

<div>
<h1>Horizontal</h1>
<Card className={styles.card} orientation="horizontal">
<CardPreview className={styles.horizontalCardImage}>
<img className={styles.horizontalCardImage} src={appLogoUrl} alt="App Name Document" />
</CardPreview>

<CardHeader
header={<Text weight="semibold">App Name</Text>}
description={<Caption1 className={styles.caption}>Developer</Caption1>}
action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
/>
</Card>
</div>
</div>
</div>
);
);
};

Orientation.storyName = 'orientation';

Expand Down
1 change: 1 addition & 0 deletions apps/vr-tests-react-components/src/stories/Card/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<>
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "fix: allow elements of card to grow to fill the available space",
"packageName": "@fluentui/react-card",
"email": "[email protected]",
"dependentChangeType": "patch"
}
5 changes: 5 additions & 0 deletions packages/react-components/react-card/src/components/Card/useCardStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down