fix(UIShell): add bg color to selected states (NEW) (#13402)

* refactor(UIShell): finish CSS for selected states * fix(state): change parent state if child selected * fix(UIShell): refactor some code * fix(UIShell): more refactoring --------- Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · May 16, 2023 · e33e8d3 · e33e8d3
1 parent 6d29f6d
commit e33e8d3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 16 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -193,6 +193,10 @@ class HeaderMenu extends React.Component {
       ...rest
     } = this.props;
 
+    const hasActiveChildren = React.Children.toArray(children).some(
+      (child) => child.props.isActive || child.props.isCurrentPage
+    );
+
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -207,7 +211,8 @@ class HeaderMenu extends React.Component {
       [`${prefix}--header__menu-title`]: true,
       // We set the current class only if `isActive` is passed in and we do
       // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isActivePage,
+      [`${prefix}--header__menu-item--current`]:
+        isActivePage || (hasActiveChildren && !this.state.expanded),
     });
 
     // Notes on eslint comments and based on the examples in:

diff --git a/packages/react/src/components/UIShell/UIShell.stories.js b/packages/react/src/components/UIShell/UIShell.stories.js
@@ -192,14 +192,14 @@ export const HeaderBaseWNavigation = () => (
           [Platform]
         </HeaderName>
         <HeaderNavigation aria-label="IBM [Platform]">
-          <HeaderMenuItem isActive href="#">
-            Link 1
-          </HeaderMenuItem>
+          <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
           <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
             <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-            <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
+            <HeaderMenuItem isActive href="#">
+              Sub-link 2
+            </HeaderMenuItem>
             <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
           </HeaderMenu>
         </HeaderNavigation>
@@ -215,7 +215,9 @@ export const HeaderBaseWNavigation = () => (
               <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
               <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
                 <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-                <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
+                <HeaderMenuItem isActive href="#">
+                  Sub-link 2
+                </HeaderMenuItem>
                 <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
               </HeaderMenu>
             </HeaderSideNavItems>

diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss
@@ -254,12 +254,11 @@
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     position: absolute;
-    top: 0;
-    right: 0;
     bottom: -2px;
-    left: 0;
-    width: 100%;
-    border-bottom: 3px solid $border-interactive;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: 3px;
+    background-color: $border-interactive;
     content: '';
   }
 
@@ -271,16 +270,21 @@
   .#{$prefix}--header__submenu .#{$prefix}--header__menu {
     a.#{$prefix}--header__menu-item[aria-current='page']::after,
     .#{$prefix}--header__menu-item--current::after {
-      bottom: 0;
+      top: -2px;
       left: -2px;
-      border-bottom: none;
-      border-left: 3px solid $border-interactive;
+      width: 3px;
+      height: calc(100% + 4px);
+      background-color: $border-interactive;
     }
 
     a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
     .#{$prefix}--header__menu-item--current:focus::after {
-      left: 0;
-      border-left: 3px solid $border-interactive;
+      top: -2px;
+      left: -2px;
+      // extra, hidden width prevents flickering on focus change
+      width: 5px;
+      height: calc(100% + 4px);
+      background-color: $border-interactive;
     }
   }
 
@@ -351,6 +355,17 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--header__menu-title[aria-expanded='true']
+    + .#{$prefix}--header__menu
+    .#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
+    // used for both desktop and mobile
+    background-color: $layer-selected;
+
+    &:hover {
+      background-color: $layer-selected-hover;
+    }
+  }
+
   .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(6);
   }

diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
@@ -495,6 +495,21 @@
       background-color: $background-hover;
       color: $text-primary;
     }
+
+    // non-hover, selected state inherited from `_header.scss`
+    a.#{$prefix}--header__menu-item--current:hover {
+      background-color: $layer-selected-hover;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--side-nav__header-navigation
+    a.#{$prefix}--header__menu-item[aria-current='page']::after,
+  .#{$prefix}--side-nav
+    .#{$prefix}--side-nav__header-navigation
+    .#{$prefix}--header__menu-item--current::after {
+    width: 3px;
+    height: calc(100% + 4px);
   }
 
   .#{$prefix}--side-nav