Fix: Implement Custom Style Hook for Card component

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 '../../../../../react-shared-contexts/library/src/index';
 
 /**
  * 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/library/src/components/CustomHooks/index.ts

@@ -0,0 +1,6 @@
+import { type FluentProviderCustomStyleHooks } from '@fluentui/react-components';
+import { useCardStyles } from './useCardStyles';
+
+export const customStyleHooks: FluentProviderCustomStyleHooks = {
+  useCardStyles_unstable: useCardStyles,
+};

packages/react-components/react-card/library/src/components/CustomHooks/useCardStyles.ts

@@ -0,0 +1,17 @@
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { type CardState } from '@fluentui/react-components';
+
+const useCardStyle = makeStyles({
+  root: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    width: '620px',
+    maxWidth: '100%',
+    margin: 'auto',
+  },
+});
+
+export const useCardStyles = (state: unknown) => {
+  const cardStyles = useCardStyle();
+  const componentState = state as CardState;
+  componentState.root.className = mergeClasses(componentState.root.className, cardStyles.root);
+};

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { customStyleHooks } from '../../../library/src/components/CustomHooks';
+import {
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+  Body1,
+  Caption1,
+  Button,
+  FluentProvider,
+} from '@fluentui/react-components';
+import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
+
+const resolveAsset = (asset: string) => {
+  const ASSET_URL =
+    'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
+
+  return `${ASSET_URL}${asset}`;
+};
+
+export const CardCustomStyles = () => {
+  return (
+    <FluentProvider customStyleHooks_unstable={customStyleHooks}>
+      <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>
+  );
+};
+
+// This line is necessary to ensure full source code view in storybook.
+CardCustomStyles.parameters = { docs: { source: {} } };

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

@@ -11,6 +11,7 @@ export { SelectableIndicator } from './CardSelectableIndicator.stories';
 export { WithAction } from './CardAction.stories';
 export { FocusMode } from './CardFocusMode.stories';
 export { Templates } from './CardTemplates.stories';
+export { CardCustomStyles } from './CardCustomStyles.stories';
 
 export default {
   title: 'Components/Card/Card',