fix: Header components to properly pass ref to root slots (#20811)

* fix: Header components to properly pass ref to root slots * add changelog
microsoft · Nov 30, 2021 · 9b0210f · 9b0210f
1 parent 5ac95a1
commit 9b0210f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 - Fix `Flex` component to properly pass ref to root slots @chpalac ([#20752](https://github.com/microsoft/fluentui/pull/20752))
 - Fix `Animation` to expose `Transition` state for the consumer @chpalac ([#20776](https://github.com/microsoft/fluentui/pull/20776))
+- Fix `Header` components to properly pass ref to root slots @chpalac ([#20811](https://github.com/microsoft/fluentui/pull/20811))
 - Fix `Grid` component to properly pass ref to root slots @chpalac ([#20810](https://github.com/microsoft/fluentui/pull/20810))
 - Fix `Form` components to properly pass ref to root slots @chpalac ([#20809](https://github.com/microsoft/fluentui/pull/20809))
 - Fix `Loader` component to properly pass ref to root slots @chpalac ([#20814](https://github.com/microsoft/fluentui/pull/20814))

diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
@@ -18,13 +18,13 @@ import { HeaderDescription, HeaderDescriptionProps } from './HeaderDescription';
 
 import { ShorthandValue, FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   useTelemetry,
   useAccessibility,
   useFluentContext,
   getElementType,
   useUnhandledProps,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface HeaderProps
@@ -57,10 +57,7 @@ export type HeaderStylesProps = Required<Pick<HeaderProps, 'align' | 'color'>> &
  * Other considerations:
  *  - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings.
  */
-export const Header: ComponentWithAs<'h1', HeaderProps> &
-  FluentComponentStaticProps<HeaderProps> & {
-    Description: typeof HeaderDescription;
-  } = props => {
+export const Header = (React.forwardRef<HTMLHeadingElement, HeaderProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Header.displayName, context.telemetry);
   setStart();
@@ -95,6 +92,7 @@ export const Header: ComponentWithAs<'h1', HeaderProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
         ...rtlTextContainer.getAttributes({
           forElements: [children, content],
@@ -113,7 +111,10 @@ export const Header: ComponentWithAs<'h1', HeaderProps> &
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'h1', HTMLHeadingElement, HeaderProps> &
+  FluentComponentStaticProps<HeaderProps> & {
+    Description: typeof HeaderDescription;
+  };
 
 Header.displayName = 'Header';
 

diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
@@ -14,13 +14,13 @@ import {
 
 import { FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   useTelemetry,
   useFluentContext,
   getElementType,
   useUnhandledProps,
   useAccessibility,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface HeaderDescriptionProps
@@ -40,8 +40,7 @@ export type HeaderDescriptionStylesProps = Pick<HeaderDescriptionProps, 'color'>
 /**
  * A HeaderDescription provides more detailed information about the Header.
  */
-export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
-  FluentComponentStaticProps<HeaderDescriptionProps> = props => {
+export const HeaderDescription = (React.forwardRef<HTMLParagraphElement, HeaderDescriptionProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(HeaderDescription.displayName, context.telemetry);
   setStart();
@@ -72,6 +71,7 @@ export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
       })}
@@ -81,7 +81,8 @@ export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'p', HTMLParagraphElement, HeaderDescriptionProps> &
+  FluentComponentStaticProps<HeaderDescriptionProps>;
 
 HeaderDescription.displayName = 'HeaderDescription';