react-card: Adjust signature to use ForwardRefComponent (microsoft#20090

) * Adds ForwardRefComponent to react-card components declaration * Change files
mlp73 · Jan 17, 2022 · c11f5b4 · c11f5b4
1 parent 22cb618
commit c11f5b4
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 8 deletions.
diff --git a/change/@fluentui-react-card-05596f5c-6705-41b9-be1a-37b5f9b346a9.json b/change/@fluentui-react-card-05596f5c-6705-41b9-be1a-37b5f9b346a9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds ForwardRefComponent to react-card components declaration",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
@@ -6,17 +6,18 @@
 
 import type { ComponentPropsCompat } from '@fluentui/react-utilities';
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
 
 // @public
-export const Card: React_2.ForwardRefExoticComponent<CardProps & React_2.RefAttributes<HTMLElement>>;
+export const Card: ForwardRefComponent<CardProps>;
 
 // @public
 export type CardDefaultedProps = never;
 
 // @public
-export const CardFooter: React_2.ForwardRefExoticComponent<CardFooterProps & React_2.RefAttributes<HTMLElement>>;
+export const CardFooter: ForwardRefComponent<CardFooterProps>;
 
 // @public
 export type CardFooterDefaultedProps = never;
@@ -38,7 +39,7 @@ export interface CardFooterState extends ComponentStateCompat<CardFooterProps, C
 }
 
 // @public
-export const CardHeader: React_2.ForwardRefExoticComponent<CardHeaderProps & React_2.RefAttributes<HTMLElement>>;
+export const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
 // @public
 export type CardHeaderDefaultedProps = never;
@@ -64,7 +65,7 @@ export interface CardHeaderState extends ComponentStateCompat<CardHeaderProps, C
 }
 
 // @public
-export const CardPreview: React_2.ForwardRefExoticComponent<CardPreviewProps & React_2.RefAttributes<HTMLElement>>;
+export const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
 // @public
 export type CardPreviewDefaultedProps = never;

diff --git a/packages/react-card/src/components/Card/Card.tsx b/packages/react-card/src/components/Card/Card.tsx
@@ -3,11 +3,12 @@ import { useCard } from './useCard';
 import { renderCard } from './renderCard';
 import { useCardStyles } from './useCardStyles';
 import type { CardProps } from './Card.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
  */
-export const Card = React.forwardRef<HTMLElement, CardProps>((props, ref) => {
+export const Card: ForwardRefComponent<CardProps> = React.forwardRef((props, ref) => {
   const state = useCard(props, ref);
 
   useCardStyles(state);

diff --git a/packages/react-card/src/components/CardFooter/CardFooter.tsx b/packages/react-card/src/components/CardFooter/CardFooter.tsx
@@ -3,11 +3,12 @@ import { useCardFooter } from './useCardFooter';
 import { renderCardFooter } from './renderCardFooter';
 import { useCardFooterStyles } from './useCardFooterStyles';
 import type { CardFooterProps } from './CardFooter.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Component to render Button actions in a Card component.
  */
-export const CardFooter = React.forwardRef<HTMLElement, CardFooterProps>((props, ref) => {
+export const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {
   const state = useCardFooter(props, ref);
 
   useCardFooterStyles(state);

diff --git a/packages/react-card/src/components/CardHeader/CardHeader.tsx b/packages/react-card/src/components/CardHeader/CardHeader.tsx
@@ -3,11 +3,12 @@ import { useCardHeader } from './useCardHeader';
 import { renderCardHeader } from './renderCardHeader';
 import { useCardHeaderStyles } from './useCardHeaderStyles';
 import type { CardHeaderProps } from './CardHeader.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Component to render an image, text and an action in a Card component.
  */
-export const CardHeader = React.forwardRef<HTMLElement, CardHeaderProps>((props, ref) => {
+export const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {
   const state = useCardHeader(props, ref);
 
   useCardHeaderStyles(state);

diff --git a/packages/react-card/src/components/CardPreview/CardPreview.tsx b/packages/react-card/src/components/CardPreview/CardPreview.tsx
@@ -3,11 +3,12 @@ import { useCardPreview } from './useCardPreview';
 import { renderCardPreview } from './renderCardPreview';
 import { useCardPreviewStyles } from './useCardPreviewStyles';
 import type { CardPreviewProps } from './CardPreview.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
-export const CardPreview = React.forwardRef<HTMLElement, CardPreviewProps>((props, ref) => {
+export const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {
   const state = useCardPreview(props, ref);
 
   useCardPreviewStyles(state);