chore(Header): use React.forwardRef() (#4237)

Author: layershifter

src/elements/Header/Header.js

@@ -23,7 +23,7 @@ import HeaderContent from './HeaderContent'
 /**
  * A header provides a short summary of content
  */
-function Header(props) {
+const Header = React.forwardRef(function HeaderInner(props, ref) {
   const {
     attached,
     block,
@@ -65,7 +65,7 @@ function Header(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -77,7 +77,7 @@ function Header(props) {
 
   if (iconElement || imageElement) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {iconElement || imageElement}
         {(content || subheaderElement) && (
           <HeaderContent>
@@ -90,13 +90,14 @@ function Header(props) {
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {content}
       {subheaderElement}
     </ElementType>
   )
-}
+})
 
+Header.displayName = 'Header'
 Header.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Header/HeaderContent.js

@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
-function HeaderContent(props) {
+const HeaderContent = React.forwardRef(function HeaderContentInner(props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
   const ElementType = getElementType(HeaderContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+HeaderContent.displayName = 'HeaderContent'
 HeaderContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Header/HeaderSubheader.js

@@ -13,19 +13,20 @@ import {
 /**
  * Headers may contain subheaders.
  */
-function HeaderSubheader(props) {
+const HeaderSubheader = React.forwardRef(function HeaderSubheaderInner(props, ref) {
   const { children, className, content } = props
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)
   const ElementType = getElementType(HeaderSubheader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+HeaderSubheader.displayName = 'HeaderSubheader'
 HeaderSubheader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/elements/Header/Header-test.js

@@ -10,6 +10,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('Header', () => {
   common.hasUIClassName(Header)
+  common.forwardsRef(Header, { children: <span /> })
+  common.forwardsRef(Header, { icon: 'book' })
   common.hasSubcomponents(Header, [HeaderContent, HeaderSubheader])
   common.rendersChildren(Header)
 

test/specs/elements/Header/HeaderContent-test.js

@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('HeaderContent', () => {
   common.isConformant(HeaderContent)
+  common.forwardsRef(HeaderContent)
   common.rendersChildren(HeaderContent)
 })

test/specs/elements/Header/HeaderSubheader-test.js

@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('HeaderSubheader', () => {
   common.isConformant(HeaderSubheader)
+  common.forwardsRef(HeaderSubheader)
   common.rendersChildren(HeaderSubheader)
 })