feat(header-menuitem): add isActive prop to apply style to selected item

carbon-design-system · Mar 2, 2020 · ca96865 · ca96865
1 parent 827d959
commit ca96865
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -27,7 +27,6 @@
     right: 0;
     height: mini-units(6);
     background-color: $shell-header-bg-01;
-    border-bottom: 1px solid $shell-header-border-01;
     z-index: z('header');
   }
 
@@ -219,6 +218,13 @@
     fill: $shell-header-icon-01;
   }
 
+  a.#{$prefix}--header__menu-item[aria-current='page'] {
+    color: $shell-header-text-01;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 3px solid $inverse-support-04;
+  }
+
   .#{$prefix}--header__submenu {
     position: relative;
   }

diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -13,13 +13,14 @@ import Link, { LinkPropTypes } from './Link';
 const { prefix } = settings;
 
 const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
-  { className, children, role, ...rest },
+  { className, isActive, children, role, ...rest },
   ref
 ) {
   return (
     <li className={className} role={role}>
       <Link
         {...rest}
+        aria-current={isActive ? 'page' : null}
         className={`${prefix}--header__menu-item`}
         ref={ref}
         tabIndex={0}>
@@ -52,6 +53,11 @@ HeaderMenuItem.propTypes = {
    * <ul> semantics for menus.
    */
   role: PropTypes.string,
+
+  /**
+   * Apply `aria-current='page'` to Link to apply selected styles
+   */
+  isActive: PropTypes.bool,
 };
 
 export default HeaderMenuItem;
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -167,7 +167,9 @@ storiesOf('UI Shell', module)
                 [Platform]
               </HeaderName>
               <HeaderNavigation aria-label="IBM [Platform]">
-                <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
+                <HeaderMenuItem isActive="true" href="#">
+                  Link 1
+                </HeaderMenuItem>
                 <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
                 <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
                 <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">