[Ref-Conformance] Adding a forwardRef to react-internal Separator (#1…

…5678)
microsoft · Oct 24, 2020 · 8a3c81a · 8a3c81a
1 parent c0cc166
commit 8a3c81a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/...ntui-react-internal-2020-10-23-11-25-33-fix-ref-conformance-react-internal-separator.json b/...ntui-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
@@ -4386,7 +4386,7 @@ export interface ISeparator {
 }
 
 // @public (undocumented)
-export interface ISeparatorProps extends React.HTMLAttributes<HTMLElement> {
+export interface ISeparatorProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
  alignContent?: 'start' | 'center' | 'end';
  styles?: IStyleFunctionOrObject<ISeparatorStyleProps, ISeparatorStyles>;
  theme?: ITheme;

diff --git a/packages/react-internal/src/components/Separator/Separator.base.tsx b/packages/react-internal/src/components/Separator/Separator.base.tsx
@@ -4,21 +4,24 @@ import { ISeparatorProps, ISeparatorStyles, ISeparatorStyleProps } from './Separ
 
 const getClassNames = classNamesFunction<ISeparatorStyleProps, ISeparatorStyles>();
 
-export const SeparatorBase: React.FunctionComponent<ISeparatorProps> = (props: ISeparatorProps): JSX.Element => {
- const { styles, theme, className, vertical, alignContent } = props;
+export const SeparatorBase: React.FunctionComponent<ISeparatorProps> = 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,
  vertical: vertical,
  });
 
  return (
- <div className={_classNames.root}>
- <div className={_classNames.content} role="separator" aria-orientation={vertical ? 'vertical' : 'horizontal'}>
- {props.children}
+ <div className={classNames.root} ref={ref}>
+ <div className={classNames.content} role="separator" aria-orientation={vertical ? 'vertical' : 'horizontal'}>
+ {children}
  </div>
  </div>
  );
-};
+});
diff --git 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
@@ -10,7 +10,7 @@ export interface ISeparator {}
 /**
  * {@docCategory Separator}
  */
-export interface ISeparatorProps extends React.HTMLAttributes<HTMLElement> {
+export interface ISeparatorProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
  /**
  * Theme (provided through customization.)
  */