Skip to content
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

Fix: Implement Custom Style Hook for Card component #33912

Merged
merged 18 commits into from
Mar 6, 2025
Merged

Fix: Implement Custom Style Hook for Card component #33912

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
fe81a61
added custom style hooks for Card components
terynkum Feb 26, 2025
65d20ca
Story for Card Custom Styles
terynkum Feb 26, 2025
1f4f6bb
ran yarn change
terynkum Feb 26, 2025
14d4859
Merge branch 'master' into card-component-custom-style-hook-unstable
terynk Feb 26, 2025
482511d
Merge branch 'card-component-custom-style-hook-unstable' of https://g…
terynkum Feb 26, 2025
92816d3
consolidated index.ts into useCardStyles for simplicity
terynkum Feb 26, 2025
305add7
updated import statement for Card story
terynkum Feb 26, 2025
a87d46c
consolidated useCardStyles into CardDefault story
terynkum Feb 26, 2025
494c079
updated shared-contexts dependencies
terynkum Feb 26, 2025
8e91eec
Updated import statement for CardFooter
terynk Feb 26, 2025
1c4a0ab
Disabled eslint rule for unstable suffix
terynkum Feb 27, 2025
72b72a8
removed multiple exports
terynkum Feb 27, 2025
03817b9
Added custom styling to Footer, Header, and Preview
terynkum Feb 27, 2025
4a67bb5
simplified styles only changed background to red
terynkum Mar 4, 2025
ca5aa13
updated change file to match previous file format
terynkum Mar 4, 2025
35eb165
Merge branch 'microsoft:master' into card-component-custom-style-hook…
terynk Mar 5, 2025
a5dc632
removed StoryBook examples, custom styling remains
terynkum Mar 5, 2025
d43fe6b
Merge branch 'card-component-custom-style-hook-unstable' of https://g…
terynkum Mar 5, 2025
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
Prev Previous commit
Next Next commit
Added custom styling to Footer, Header, and Preview
  • Loading branch information
@terynkum
terynkum committed Feb 27, 2025
commit 03817b981ed0d486ebd6cc73d27db7f67f63c9f0
38 changes: 30 additions & 8 deletions packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
import * as React from 'react';
import { makeStyles, Button } from '@fluentui/react-components';
import { makeStyles, Button, tokens, FluentProvider, mergeClasses } from '@fluentui/react-components';
import { ArrowReply16Regular, MoreHorizontal20Regular, Share16Regular } from '@fluentui/react-icons';
import { CardFooter } from '@fluentui/react-components';
import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';

const useCardFooterStyle = makeStyles({
root: {
backgroundColor: tokens.colorNeutralBackground3,
width: '300px',
margin: 'auto',
},
});

const useCardFooterStyles = (state: unknown) => {
const cardStyles = useCardFooterStyle();
const componentState = state as CardState;
componentState.root.className = mergeClasses(componentState.root.className, cardStyles.root);
};

const CUSTOM_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
// eslint-disable-next-line @typescript-eslint/naming-convention
useCardFooterStyles_unstable: useCardFooterStyles,
};

const useStyles = makeStyles({
footer: {
@@ -13,12 +33,14 @@ export const Default = () => {
const styles = useStyles();

return (
<CardFooter
className={styles.footer}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
>
<Button icon={<ArrowReply16Regular />}>Reply</Button>
<Button icon={<Share16Regular />}>Share</Button>
</CardFooter>
<FluentProvider customStyleHooks_unstable={CUSTOM_STYLE_HOOKS}>
<CardFooter
className={styles.footer}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
>
<Button icon={<ArrowReply16Regular />}>Reply</Button>
<Button icon={<Share16Regular />}>Share</Button>
</CardFooter>
</FluentProvider>
);
};
194 changes: 108 additions & 86 deletions packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
import * as React from 'react';
import { CardHeader } from '@fluentui/react-components';
import { makeStyles, Button, Body1, Caption1 } from '@fluentui/react-components';
import { makeStyles, Button, Body1, Caption1, tokens, FluentProvider, mergeClasses } from '@fluentui/react-components';
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';

const useCardHeaderStyle = makeStyles({
root: {
backgroundColor: tokens.colorNeutralBackground3,
width: '300px',
margin: 'auto',
},
});

const useCardHeaderStyles = (state: unknown) => {
const cardStyles = useCardHeaderStyle();
const componentState = state as CardState;
componentState.root.className = mergeClasses(componentState.root.className, cardStyles.root);
};

const CUSTOM_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
// eslint-disable-next-line @typescript-eslint/naming-convention
useCardHeaderStyles_unstable: useCardHeaderStyles,
};

const useStyles = makeStyles({
container: {
@@ -28,90 +48,92 @@ export const Default = () => {
const powerpointLogoURL = resolveAsset('pptx.png');

return (
<div className={styles.container}>
<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
/>
</div>
<FluentProvider customStyleHooks_unstable={CUSTOM_STYLE_HOOKS}>
<div className={styles.container}>
<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
description={<Caption1>Developer</Caption1>}
/>

<CardHeader
className={styles.header}
image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
header={
<Body1>
<b>App Name</b>
</Body1>
}
/>

<CardHeader
className={styles.header}
header={
<Body1>
<b>App Name</b>
</Body1>
}
/>
</div>
</FluentProvider>
);
};
30 changes: 26 additions & 4 deletions packages/react-components/react-card/stories/src/CardPreview/CardPreviewDefault.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,25 @@
import * as React from 'react';
import { CardPreview } from '@fluentui/react-components';
import { CardPreview, tokens, makeStyles, mergeClasses, FluentProvider } from '@fluentui/react-components';
import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';

const useCardPreviewStyle = makeStyles({
root: {
backgroundColor: tokens.colorNeutralBackground3,
padding: '30px',
margin: 'auto',
},
});

const useCardPreviewStyles = (state: unknown) => {
const cardStyles = useCardPreviewStyle();
const componentState = state as CardState;
componentState.root.className = mergeClasses(componentState.root.className, cardStyles.root);
};

const CUSTOM_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
// eslint-disable-next-line @typescript-eslint/naming-convention
useCardPreviewStyles_unstable: useCardPreviewStyles,
};

const resolveAsset = (asset: string) => {
const ASSET_URL =
@@ -9,7 +29,9 @@ const resolveAsset = (asset: string) => {
};

export const Default = () => (
<CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word logo" />}>
<img src={resolveAsset('doc_template.png')} alt="Preview of a Word document " />
</CardPreview>
<FluentProvider customStyleHooks_unstable={CUSTOM_STYLE_HOOKS}>
<CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word logo" />}>
<img src={resolveAsset('doc_template.png')} alt="Preview of a Word document " />
</CardPreview>
</FluentProvider>
);