From ca96865e37ef6b9231523d6b0762656daa84480b Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 2 Mar 2020 11:48:24 -0600
Subject: [PATCH 1/8] feat(header-menuitem): add isActive prop to apply style
 to selected item

---
 packages/components/src/components/ui-shell/_header.scss | 8 +++++++-
 packages/react/src/components/UIShell/HeaderMenuItem.js  | 8 +++++++-
 packages/react/src/components/UIShell/UIShell-story.js   | 4 +++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 319d37704e52..e71f9391a172 100644
--- 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
index 6dc4fc5f55ea..2d03db67884c 100644
--- 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
index 30e804250fc2..fc93fb4f3880 100644
--- 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">

From d176d991f77f48b4f4afc002d46d022e1a931481 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 2 Mar 2020 12:25:28 -0600
Subject: [PATCH 2/8] fix(ui-shell): update snapshots

---
 packages/components/docs/sass.md                     | 12 ++++++++++--
 .../__tests__/__snapshots__/HeaderMenu-test.js.snap  |  6 ++++++
 .../__snapshots__/HeaderMenuItem-test.js.snap        |  2 ++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index a5191dcb8a17..c0b41917ae90 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -7022,6 +7022,7 @@ $inverse-support-04: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [toast-notifications [mixin]](#toast-notifications-mixin)
+  - [carbon-header [mixin]](#carbon-header-mixin)
 
 ### ✅overlay-01 [variable]
 
@@ -24364,7 +24365,6 @@ UI shell header
     right: 0;
     height: mini-units(6);
     background-color: $shell-header-bg-01;
-    border-bottom: 1px solid $shell-header-border-01;
     z-index: z('header');
   }
 
@@ -24556,6 +24556,13 @@ UI shell header
     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;
   }
@@ -24677,8 +24684,8 @@ UI shell header
   - [mini-units [function]](#mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [shell-header-bg-01 [variable]](#shell-header-bg-01-variable)
-  - [shell-header-border-01 [variable]](#shell-header-border-01-variable)
   - [shell-header-bg-04 [variable]](#shell-header-bg-04-variable)
+  - [shell-header-border-01 [variable]](#shell-header-border-01-variable)
   - [shell-header-focus [variable]](#shell-header-focus-variable)
   - [shell-header-bg-03 [variable]](#shell-header-bg-03-variable)
   - [shell-header-icon-02 [variable]](#shell-header-icon-02-variable)
@@ -24686,6 +24693,7 @@ UI shell header
   - [shell-header-bg-02 [variable]](#shell-header-bg-02-variable)
   - [shell-header-text-01 [variable]](#shell-header-text-01-variable)
   - [shell-header-text-02 [variable]](#shell-header-text-02-variable)
+  - [inverse-support-04 [variable]](#inverse-support-04-variable)
   - [shell-header-bg-06 [variable]](#shell-header-bg-06-variable)
   - [shell-header-icon-03 [variable]](#shell-header-icon-03-variable)
 
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
index ed9eae8a7e05..ad24ac3019c8 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -64,12 +64,14 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
+              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/a"
               tabIndex={0}
             >
               <a
+                aria-current={null}
                 className="bx--header__menu-item"
                 href="/a"
                 tabIndex={0}
@@ -89,12 +91,14 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
+              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/b"
               tabIndex={0}
             >
               <a
+                aria-current={null}
                 className="bx--header__menu-item"
                 href="/b"
                 tabIndex={0}
@@ -114,12 +118,14 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
+              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/c"
               tabIndex={0}
             >
               <a
+                aria-current={null}
                 className="bx--header__menu-item"
                 href="/c"
                 tabIndex={0}
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
index aed4a4e59d32..712ce40f3f7f 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
@@ -10,11 +10,13 @@ exports[`HeaderMenuItem should render 1`] = `
     role="none"
   >
     <Link
+      aria-current={null}
       className="bx--header__menu-item"
       element="a"
       tabIndex={0}
     >
       <a
+        aria-current={null}
         className="bx--header__menu-item"
         tabIndex={0}
       >

From 9785361c80980cb8353f4a06a471a792bf87cdac Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 4 Mar 2020 12:14:04 -0600
Subject: [PATCH 3/8] feat(ui-shell): adjust selected style and change isActive
 to isCurrentPage

---
 packages/components/docs/sass.md              |  3 ++-
 .../src/components/ui-shell/_header.scss      | 10 ++++++-
 .../src/components/UIShell/HeaderMenuItem.js  | 26 +++++++++++++++----
 .../src/components/UIShell/UIShell-story.js   |  2 +-
 .../__snapshots__/HeaderMenu-test.js.snap     |  6 -----
 .../__snapshots__/HeaderMenuItem-test.js.snap |  2 --
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index c0b41917ae90..682a7715afe6 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -24556,7 +24556,8 @@ UI shell header
     fill: $shell-header-icon-01;
   }
 
-  a.#{$prefix}--header__menu-item[aria-current='page'] {
+  a.#{$prefix}--header__menu-item[aria-current='page'],
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
     color: $shell-header-text-01;
     border-left: 0;
     border-right: 0;
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index e71f9391a172..720e3cb47701 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -218,13 +218,21 @@
     fill: $shell-header-icon-01;
   }
 
-  a.#{$prefix}--header__menu-item[aria-current='page'] {
+  // Styles for selected state
+
+  a.#{$prefix}--header__menu-item[aria-current='page'],
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
     color: $shell-header-text-01;
     border-left: 0;
     border-right: 0;
     border-bottom: 3px solid $inverse-support-04;
   }
 
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus,
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
+    border: 2px solid $shell-header-focus;
+  }
+
   .#{$prefix}--header__submenu {
     position: relative;
   }
diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
index 2d03db67884c..fc2d9fccea3c 100644
--- a/packages/react/src/components/UIShell/HeaderMenuItem.js
+++ b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -8,20 +8,36 @@
 import { settings } from 'carbon-components';
 import PropTypes from 'prop-types';
 import React from 'react';
+import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link';
 
 const { prefix } = settings;
 
 const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
-  { className, isActive, children, role, ...rest },
+  {
+    className,
+    isCurrentPage,
+    'aria-current': ariaCurrent,
+    children,
+    role,
+    ...rest
+  },
   ref
 ) {
+  const linkClassName = cx({
+    [`${prefix}--header__menu-item`]: true,
+    // We set the current class only if `isCurrentPage` is passed in and we do
+    // not have an `aria-current="page"` set for the breadcrumb item
+    [`${prefix}--header__menu-item--current`]:
+      isCurrentPage && ariaCurrent !== 'page',
+  });
+
   return (
     <li className={className} role={role}>
       <Link
         {...rest}
-        aria-current={isActive ? 'page' : null}
-        className={`${prefix}--header__menu-item`}
+        aria-current={ariaCurrent}
+        className={linkClassName}
         ref={ref}
         tabIndex={0}>
         <span className={`${prefix}--text-truncate--end`}>{children}</span>
@@ -55,9 +71,9 @@ HeaderMenuItem.propTypes = {
   role: PropTypes.string,
 
   /**
-   * Apply `aria-current='page'` to Link to apply selected styles
+   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
    */
-  isActive: PropTypes.bool,
+  isCurrentPage: 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
index fc93fb4f3880..f64e053b1c74 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -167,7 +167,7 @@ storiesOf('UI Shell', module)
                 [Platform]
               </HeaderName>
               <HeaderNavigation aria-label="IBM [Platform]">
-                <HeaderMenuItem isActive="true" href="#">
+                <HeaderMenuItem isCurrentPage="true" href="#">
                   Link 1
                 </HeaderMenuItem>
                 <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
index ad24ac3019c8..ed9eae8a7e05 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -64,14 +64,12 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
-              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/a"
               tabIndex={0}
             >
               <a
-                aria-current={null}
                 className="bx--header__menu-item"
                 href="/a"
                 tabIndex={0}
@@ -91,14 +89,12 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
-              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/b"
               tabIndex={0}
             >
               <a
-                aria-current={null}
                 className="bx--header__menu-item"
                 href="/b"
                 tabIndex={0}
@@ -118,14 +114,12 @@ exports[`HeaderMenu should render 1`] = `
         >
           <li>
             <Link
-              aria-current={null}
               className="bx--header__menu-item"
               element="a"
               href="/c"
               tabIndex={0}
             >
               <a
-                aria-current={null}
                 className="bx--header__menu-item"
                 href="/c"
                 tabIndex={0}
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
index 712ce40f3f7f..aed4a4e59d32 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
@@ -10,13 +10,11 @@ exports[`HeaderMenuItem should render 1`] = `
     role="none"
   >
     <Link
-      aria-current={null}
       className="bx--header__menu-item"
       element="a"
       tabIndex={0}
     >
       <a
-        aria-current={null}
         className="bx--header__menu-item"
         tabIndex={0}
       >

From 01fc4da029e2bfdac35cfc8c8e40de8c3c4d7617 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 4 Mar 2020 13:29:54 -0600
Subject: [PATCH 4/8] chore(ui-shell): run build for sass.md changes

---
 packages/components/docs/sass.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 682a7715afe6..98c94468f9f2 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -24556,6 +24556,8 @@ UI shell header
     fill: $shell-header-icon-01;
   }
 
+  // Styles for selected state
+
   a.#{$prefix}--header__menu-item[aria-current='page'],
   a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
     color: $shell-header-text-01;
@@ -24564,6 +24566,11 @@ UI shell header
     border-bottom: 3px solid $inverse-support-04;
   }
 
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus,
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
+    border: 2px solid $shell-header-focus;
+  }
+
   .#{$prefix}--header__submenu {
     position: relative;
   }

From 3f27035b1490e8092ccb55808b7647863200c7ed Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 4 Mar 2020 13:41:36 -0600
Subject: [PATCH 5/8] fix(ui-shell): update snapshots

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 37a8d2b200cf..6379e15782fb 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6209,6 +6209,9 @@ Map {
       "element": Object {
         "type": "elementType",
       },
+      "isCurrentPage": Object {
+        "type": "bool",
+      },
       "isSideNavExpanded": Object {
         "type": "bool",
       },

From a3455060c61667561ccad49222c84d963643ff6b Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 9 Mar 2020 12:43:29 -0500
Subject: [PATCH 6/8] fix(header-menu-item): adjust border styles

---
 packages/components/src/components/ui-shell/_header.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 720e3cb47701..91d5a944c29b 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -223,9 +223,7 @@
   a.#{$prefix}--header__menu-item[aria-current='page'],
   a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
     color: $shell-header-text-01;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 3px solid $inverse-support-04;
+    border-bottom: 2px solid $inverse-support-04;
   }
 
   a.#{$prefix}--header__menu-item[aria-current='page']:focus,

From 41581d04fb82f3c1208d0938552b5b9224605e1c Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 23 Mar 2020 10:42:13 -0500
Subject: [PATCH 7/8] fix(ui-shell): adjust styles so focus is rectangular

---
 .../src/components/ui-shell/_header.scss      | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 7d42b97648b2..4ea1e3b53562 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -175,6 +175,7 @@
   }
 
   a.#{$prefix}--header__menu-item {
+    position: relative;
     display: flex;
     align-items: center;
     color: $shell-header-text-02;
@@ -220,10 +221,22 @@
 
   // Styles for selected state
 
-  a.#{$prefix}--header__menu-item[aria-current='page'],
-  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
-    color: $shell-header-text-01;
-    border-bottom: 2px solid $inverse-support-04;
+  a.#{$prefix}--header__menu-item[aria-current='page']::after,
+  .#{$prefix}--header__menu-item--current::after {
+    content: '';
+    // color: $shell-header-text-01;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    border-bottom: 3px solid $inverse-support-04;
+  }
+
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
+  .#{$prefix}--header__menu-item--current:focus::after {
+    border: 0;
   }
 
   a.#{$prefix}--header__menu-item[aria-current='page']:focus,

From 971ab4fbc5fd57452279db2c8b5bd4ccb96db162 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 23 Mar 2020 10:45:06 -0500
Subject: [PATCH 8/8] Update
 packages/components/src/components/ui-shell/_header.scss

---
 packages/components/src/components/ui-shell/_header.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 4ea1e3b53562..4adf009890ba 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -224,7 +224,6 @@
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     content: '';
-    // color: $shell-header-text-01;
     width: 100%;
     position: absolute;
     top: 0;