diff --git a/change/@fluentui-react-internal-2020-10-23-11-25-33-fix-ref-conformance-react-internal-separator.json b/change/@fluentui-react-internal-2020-10-23-11-25-33-fix-ref-conformance-react-internal-separator.json new file mode 100644 index 0000000000000..f3ae705db26eb --- /dev/null +++ b/change/@fluentui-react-internal-2020-10-23-11-25-33-fix-ref-conformance-react-internal-separator.json @@ -0,0 +1,8 @@ +{ + "type": "prerelease", + "comment": "Adding a forwardRef to Separator within react-internal.", + "packageName": "@fluentui/react-internal", + "email": "czearing@outlook.com", + "dependentChangeType": "patch", + "date": "2020-10-23T18:25:33.495Z" +} diff --git a/packages/react-internal/etc/react-internal.api.md b/packages/react-internal/etc/react-internal.api.md index d9e0e047cea5e..3e3bf35311d77 100644 --- a/packages/react-internal/etc/react-internal.api.md +++ b/packages/react-internal/etc/react-internal.api.md @@ -4386,7 +4386,7 @@ export interface ISeparator { } // @public (undocumented) -export interface ISeparatorProps extends React.HTMLAttributes { +export interface ISeparatorProps extends React.HTMLAttributes, React.RefAttributes { alignContent?: 'start' | 'center' | 'end'; styles?: IStyleFunctionOrObject; theme?: ITheme; diff --git a/packages/react-internal/src/components/Separator/Separator.base.tsx b/packages/react-internal/src/components/Separator/Separator.base.tsx index dbf49552f2e62..b89502d756d17 100644 --- a/packages/react-internal/src/components/Separator/Separator.base.tsx +++ b/packages/react-internal/src/components/Separator/Separator.base.tsx @@ -4,10 +4,13 @@ import { ISeparatorProps, ISeparatorStyles, ISeparatorStyleProps } from './Separ const getClassNames = classNamesFunction(); -export const SeparatorBase: React.FunctionComponent = (props: ISeparatorProps): JSX.Element => { - const { styles, theme, className, vertical, alignContent } = props; +export const SeparatorBase: React.FunctionComponent = React.forwardRef< + HTMLDivElement, + ISeparatorProps +>((props, ref) => { + const { styles, theme, className, vertical, alignContent, children } = props; - const _classNames = getClassNames(styles!, { + const classNames = getClassNames(styles!, { theme: theme!, className, alignContent: alignContent, @@ -15,10 +18,10 @@ export const SeparatorBase: React.FunctionComponent = (props: I }); return ( -
-
- {props.children} +
+
+ {children}
); -}; +}); diff --git a/packages/react-internal/src/components/Separator/Separator.test.tsx b/packages/react-internal/src/components/Separator/Separator.test.tsx index 105ea6857322b..a544e79d19133 100644 --- a/packages/react-internal/src/components/Separator/Separator.test.tsx +++ b/packages/react-internal/src/components/Separator/Separator.test.tsx @@ -5,8 +5,5 @@ describe('Separator', () => { isConformant({ Component: Separator, displayName: 'Separator', - // Problem: Doesn’t pass ref to the root element. - // Solution: Add a ref to the root element. - disabledTests: ['component-has-root-ref', 'component-handles-ref'], }); }); diff --git a/packages/react-internal/src/components/Separator/Separator.types.ts b/packages/react-internal/src/components/Separator/Separator.types.ts index 9da58d42b5b23..bf6637560f9da 100644 --- a/packages/react-internal/src/components/Separator/Separator.types.ts +++ b/packages/react-internal/src/components/Separator/Separator.types.ts @@ -10,7 +10,7 @@ export interface ISeparator {} /** * {@docCategory Separator} */ -export interface ISeparatorProps extends React.HTMLAttributes { +export interface ISeparatorProps extends React.HTMLAttributes, React.RefAttributes { /** * Theme (provided through customization.) */