Fix: Implement Custom Style Hook for Card component

change/@fluentui-react-card-7fc24491-6b02-436b-8f94-650824f19639.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix custom style hook for Card, CardFooter, CardHeader, CardPreview",
+  "packageName": "@fluentui/react-card",
+  "email": "terynkum@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/library/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-jsx-runtime": "^9.0.50",
+    "@fluentui/react-shared-contexts": "^9.21.2",
     "@fluentui/react-tabster": "^9.24.0",
     "@fluentui/react-text": "^9.4.32",
     "@fluentui/react-theme": "^9.1.24",

packages/react-components/react-card/library/src/components/Card/Card.tsx

@@ -5,6 +5,7 @@ import { useCardStyles_unstable } from './useCardStyles.styles';
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCardContextValue } from './useCardContextValue';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
@@ -14,6 +15,9 @@ export const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElem
   const cardContextValue = useCardContextValue(state);
 
   useCardStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardStyles_unstable')(state);
+
   return renderCard_unstable(state, cardContextValue);
 });
 

packages/react-components/react-card/library/src/components/CardFooter/CardFooter.tsx

@@ -4,6 +4,7 @@ import { renderCardFooter_unstable } from './renderCardFooter';
 import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
 import type { CardFooterProps } from './CardFooter.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render Button actions in a Card component.
@@ -12,6 +13,9 @@ export const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef
   const state = useCardFooter_unstable(props, ref);
 
   useCardFooterStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);
+
   return renderCardFooter_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardHeader/CardHeader.tsx

@@ -4,6 +4,7 @@ import { renderCardHeader_unstable } from './renderCardHeader';
 import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
 import type { CardHeaderProps } from './CardHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render an image, text and an action in a Card component.
@@ -12,6 +13,9 @@ export const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef
   const state = useCardHeader_unstable(props, ref);
 
   useCardHeaderStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);
+
   return renderCardHeader_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardPreview/CardPreview.tsx

@@ -4,6 +4,7 @@ import { renderCardPreview_unstable } from './renderCardPreview';
 import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
 import type { CardPreviewProps } from './CardPreview.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render image previews of documents or articles in a Card component.
@@ -12,6 +13,9 @@ export const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardR
   const state = useCardPreview_unstable(props, ref);
 
   useCardPreviewStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);
+
   return renderCardPreview_unstable(state);
 });
 

packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx

@@ -1,8 +1,40 @@
 import * as React from 'react';
 
-import { makeStyles, Body1, Caption1, Button } from '@fluentui/react-components';
+import {
+  makeStyles,
+  Body1,
+  Caption1,
+  Button,
+  mergeClasses,
+  tokens,
+  FluentProvider,
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+} from '@fluentui/react-components';
 import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
-import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-components';
+import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';
+
+const useCardStyle = makeStyles({
+  root: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    width: '620px',
+    maxWidth: '100%',
+    margin: 'auto',
+  },
+});
+
+const useCardStyles = (state: unknown) => {
+  const cardStyles = useCardStyle();
+  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
+  useCardStyles_unstable: useCardStyles,
+};
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =
@@ -23,25 +55,27 @@ export const Default = () => {
   const styles = useStyles();
 
   return (
-    <Card className={styles.card}>
-      <CardHeader
-        image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture" />}
-        header={
-          <Body1>
-            <b>Elvia Atkins</b> mentioned you
-          </Body1>
-        }
-        description={<Caption1>5h ago · About us - Overview</Caption1>}
-      />
-
-      <CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word document" />}>
-        <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview" />
-      </CardPreview>
-
-      <CardFooter>
-        <Button icon={<ArrowReplyRegular fontSize={16} />}>Reply</Button>
-        <Button icon={<ShareRegular fontSize={16} />}>Share</Button>
-      </CardFooter>
-    </Card>
+    <FluentProvider customStyleHooks_unstable={CUSTOM_STYLE_HOOKS}>
+      <Card className={styles.card}>
+        <CardHeader
+          image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture" />}
+          header={
+            <Body1>
+              <b>Elvia Atkins</b> mentioned you
+            </Body1>
+          }
+          description={<Caption1>5h ago · About us - Overview</Caption1>}
+        />
+
+        <CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word document" />}>
+          <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview" />
+        </CardPreview>
+
+        <CardFooter>
+          <Button icon={<ArrowReplyRegular fontSize={16} />}>Reply</Button>
+          <Button icon={<ShareRegular fontSize={16} />}>Share</Button>
+        </CardFooter>
+      </Card>
+    </FluentProvider>
   );
 };

packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx

@@ -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>
   );
 };