fix(header-panel): add refs (#4738)

carbon-design-system · Nov 23, 2019 · 20598c8 · 20598c8
1 parent 5c6b4ee
commit 20598c8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderGlobalAction.js b/packages/react/src/components/UIShell/HeaderGlobalAction.js
@@ -21,15 +21,18 @@ const { prefix } = settings;
  *
  * Note: children passed to this component should be an Icon.
  */
-const HeaderGlobalAction = ({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className: customClassName,
-  onClick,
-  isActive,
-  ...rest
-}) => {
+const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
+  {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    onClick,
+    isActive,
+    ...rest
+  },
+  ref
+) {
   const className = cx({
     [customClassName]: !!customClassName,
     [`${prefix}--header__action`]: true,
@@ -45,11 +48,12 @@ const HeaderGlobalAction = ({
       {...accessibilityLabel}
       className={className}
       onClick={onClick}
-      type="button">
+      type="button"
+      ref={ref}>
       {children}
     </button>
   );
-};
+});
 
 HeaderGlobalAction.propTypes = {
   /**
@@ -80,4 +84,6 @@ HeaderGlobalAction.propTypes = {
   isActive: PropTypes.bool,
 };
 
+HeaderGlobalAction.displayName = 'HeaderGlobalAction';
+
 export default HeaderGlobalAction;
diff --git a/packages/react/src/components/UIShell/HeaderPanel.js b/packages/react/src/components/UIShell/HeaderPanel.js
@@ -13,14 +13,17 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const HeaderPanel = ({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className: customClassName,
-  expanded,
-  ...other
-}) => {
+const HeaderPanel = React.forwardRef(function HeaderPanel(
+  {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    expanded,
+    ...other
+  },
+  ref
+) {
   const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -32,11 +35,11 @@ const HeaderPanel = ({
   });
 
   return (
-    <div {...other} className={className} {...accessibilityLabel}>
+    <div {...other} className={className} {...accessibilityLabel} ref={ref}>
       {children}
     </div>
   );
-};
+});
 
 HeaderPanel.propTypes = {
   /**
@@ -55,4 +58,6 @@ HeaderPanel.propTypes = {
   expanded: PropTypes.bool,
 };
 
+HeaderPanel.displayName = 'HeaderPanel';
+
 export default HeaderPanel;