[Ref-Conformance] Adding a forwardRef to react-internal Check (#15622)

* Adding a forwardRef to Check.base and removing disabledTests.

* Change files

* PR feedback

Author: czearing

change/@fluentui-react-internal-2020-10-20-13-37-56-fix-ref-conformance-react-internal-check.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Adding a forwardRef to Check (ref-conformance)",
+  "packageName": "@fluentui/react-internal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-20T20:37:56.768Z"
+}

packages/react-internal/etc/react-internal.api.md

@@ -1491,7 +1491,7 @@ export interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement>, Rea
 }
 
 // @public (undocumented)
-export interface ICheckProps {
+export interface ICheckProps extends React.RefAttributes<HTMLDivElement> {
     // @deprecated (undocumented)
     alwaysShowCheck?: boolean;
     checked?: boolean;

packages/react-internal/src/components/Check/Check.base.tsx

@@ -6,17 +6,19 @@ import { ICheckStyleProps, ICheckStyles } from './Check.types';
 
 const getClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
 
-export const CheckBase: React.FunctionComponent<ICheckProps> = props => {
-  const { checked = false, className, theme, styles, useFastIcons = true } = props;
+export const CheckBase: React.FunctionComponent<ICheckProps> = React.forwardRef<HTMLDivElement, ICheckProps>(
+  (props, ref) => {
+    const { checked = false, className, theme, styles, useFastIcons = true } = props;
 
-  const classNames = getClassNames(styles!, { theme: theme!, className, checked });
-  const IconComponent = useFastIcons ? FontIcon : Icon;
+    const classNames = getClassNames(styles!, { theme: theme!, className, checked });
+    const IconComponent = useFastIcons ? FontIcon : Icon;
 
-  return (
-    <div className={classNames.root}>
-      <IconComponent iconName="CircleRing" className={classNames.circle} />
-      <IconComponent iconName="StatusCircleCheckmark" className={classNames.check} />
-    </div>
-  );
-};
+    return (
+      <div className={classNames.root} ref={ref}>
+        <IconComponent iconName="CircleRing" className={classNames.circle} />
+        <IconComponent iconName="StatusCircleCheckmark" className={classNames.check} />
+      </div>
+    );
+  },
+);
 CheckBase.displayName = 'CheckBase';

packages/react-internal/src/components/Check/Check.test.tsx

@@ -5,8 +5,5 @@ describe('Check', () => {
   isConformant({
     Component: Check,
     displayName: 'Check',
-    // Problem: Is FunctionComponent but missing `forwardRef`
-    // Solution: add forwardRef and ref typing
-    disabledTests: ['component-has-root-ref', 'component-handles-ref'],
   });
 });

packages/react-internal/src/components/Check/Check.types.ts

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import { IStyle, ITheme } from '../../Styling';
 import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
 
 /**
  * {@docCategory Check}
  */
-export interface ICheckProps {
+export interface ICheckProps extends React.RefAttributes<HTMLDivElement> {
   /**
    * Gets the component ref.
    */