fix(ui-shel): fix header panel function (#2993)

carbon-design-system · Jun 10, 2019 · 643912a · 643912a
1 parent 86a499d
commit 643912a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderPanel.js b/packages/react/src/components/UIShell/HeaderPanel.js
@@ -13,15 +13,14 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const HeaderPanel = React.forwardRef(function HeaderPanel(props) {
-  const {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    expanded,
-  } = props;
-
+const HeaderPanel = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  expanded,
+  ...other
+}) => {
   const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -33,11 +32,11 @@ const HeaderPanel = React.forwardRef(function HeaderPanel(props) {
   });
 
   return (
-    <div className={className} {...accessibilityLabel}>
+    <div {...other} className={className} {...accessibilityLabel}>
       {children}
     </div>
   );
-});
+};
 
 HeaderPanel.propTypes = {
   /**

diff --git a/packages/react/src/components/UIShell/Switcher.js b/packages/react/src/components/UIShell/Switcher.js
@@ -13,7 +13,7 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const Switcher = React.forwardRef(function Switcher(props) {
+const Switcher = React.forwardRef(function Switcher(props, ref) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -31,7 +31,7 @@ const Switcher = React.forwardRef(function Switcher(props) {
   });
 
   return (
-    <ul className={className} {...accessibilityLabel}>
+    <ul ref={ref} className={className} {...accessibilityLabel}>
       {children}
     </ul>
   );

diff --git a/packages/react/src/components/UIShell/SwitcherItem.js b/packages/react/src/components/UIShell/SwitcherItem.js
@@ -13,14 +13,18 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const SwitcherItem = React.forwardRef(function SwitcherItem(props) {
+const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
   const { className: customClassName, children } = props;
 
   const className = cx(`${prefix}--switcher__item`, {
     [customClassName]: !!customClassName,
   });
 
-  return <li className={className}>{children}</li>;
+  return (
+    <li ref={ref} className={className}>
+      {children}
+    </li>
+  );
 });
 
 SwitcherItem.propTypes = {

diff --git a/packages/react/src/components/UIShell/SwitcherItemLink.js b/packages/react/src/components/UIShell/SwitcherItemLink.js
@@ -13,7 +13,10 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const SwitcherItemLink = React.forwardRef(function SwitcherItemLink(props) {
+const SwitcherItemLink = React.forwardRef(function SwitcherItemLink(
+  props,
+  ref
+) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -33,7 +36,7 @@ const SwitcherItemLink = React.forwardRef(function SwitcherItemLink(props) {
   });
 
   return (
-    <a className={className} {...accessibilityLabel}>
+    <a ref={ref} className={className} {...accessibilityLabel}>
       {children}
     </a>
   );