Fix header navigation current link styling regression (#352)

* Fix header navigation current link styling regression * Restore bottom border to side navigation parent * Add usa-sidenav--sticky removal to CHANGELOG * Remove border radius from current nav link #352 (review) * Remove unused variable * Reduce size of navigation close icon * Remove border between header and content * Increase font size of nav links to 14px https://www.figma.com/file/kXLUewllU5YoQ6xG2fhwOM?node-id=1726:3042#183033221 * Limit nav border removal to dark section sibling * Vertically center nav expander icon * Remove border between mobile nav submenu items * Vertically center both expanded and collapsed https://github.com/uswds/uswds/pull/5267/files#r1182691031 * Apply hover bg color override to dropdown expander buttons * Show dark section headings as white text We expect this already on the brochure site and developer site * Restore flex header display for navbar To support headers with logo + search distributed as flex * Bump version to 7.0.1-beta.1
18F · May 2, 2023 · fa9c7d4 · fa9c7d4
1 parent c45f684
commit fa9c7d4
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 274 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## Unreleased
+
+### Bug Fixes
+
+- Fix header navigation current link styling regression in 7.0.0 release. ([#352](https://github.com/18F/identity-design-system/pull/352))
+- Fix dark background sections to show heading text as white. ([#352](https://github.com/18F/identity-design-system/pull/352))
+
+### Breaking Changes for Undocumented APIs
+
+_Note:_ While these are backwards-incompatible changes, the major version is not being changed because they impact features which were never part of a publicly-documented API.
+
+- Remove `.usa-sidenav--sticky` CSS class. ([#352](https://github.com/18F/identity-design-system/pull/352))
+
 ## 7.0.0
 
 ### Breaking Changes

diff --git a/docs/_components/side-navigation.md b/docs/_components/side-navigation.md
@@ -9,13 +9,13 @@ lead: >
 {% capture example %}
 <nav aria-label="Secondary navigation" class="tablet:grid-col-4">
   <ul class="usa-sidenav">
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="" class="usa-current">Current page</a>
     </li>
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="">Parent link</a>
     </li>
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="">Parent link</a>
     </li>
   </ul>
@@ -28,7 +28,7 @@ lead: >
 {% capture example %}
 <nav aria-label="Secondary navigation" class="tablet:grid-col-4">
   <ul class="usa-sidenav">
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="" class="usa-current">Current page</a>
       <ul class="usa-sidenav__sublist">
         <li class="usa-sidenav__item">
@@ -39,7 +39,7 @@ lead: >
         </li>
       </ul>
     </li>
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="">Parent link</a>
     </li>
   </ul>
@@ -52,7 +52,7 @@ lead: >
 {% capture example %}
 <nav aria-label="Secondary navigation" class="tablet:grid-col-4">
   <ul class="usa-accordion usa-sidenav">
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="" class="usa-current">Current page</a>
       <ul class="usa-sidenav__sublist">
         <li class="usa-sidenav__item">
@@ -71,7 +71,7 @@ lead: >
         </li>
       </ul>
     </li>
-    <li class="usa-sidenav__item usa-parent">
+    <li class="usa-sidenav__item">
       <a href="">Parent link</a>
     </li>
   </ul>

diff --git a/docs/_includes/nav/link-item.html b/docs/_includes/nav/link-item.html
@@ -1,5 +1,5 @@
 {% assign is_current_page = include.link.href | eq: page.url -%}
-<a href="{{ include.link.href }}" class="{% if is_current_page %}usa-current{% endif %}">
+<a href="{{ include.link.href }}" class="{% if is_current_page %}usa-current{% endif %} usa-nav__link">
   <span>
     {{ include.link.text | smartify }}
   </span>

diff --git a/docs/_includes/nav/page-item.html b/docs/_includes/nav/page-item.html
@@ -1,5 +1,5 @@
 {% assign is_current_page = true | if_is_current_page: include.jekyll_page, include.highlight_collection_when_is_current -%}
-<a href="{{ include.jekyll_page.url | relative_url }}" class="{% if is_current_page %}usa-current{% endif %}">
+<a href="{{ include.jekyll_page.url | relative_url }}" class="{% if is_current_page %}usa-current{% endif %} usa-nav__link">
   <span>
     {{ include.text | default: include.jekyll_page.title | smartify }}
   </span>

diff --git a/docs/_layouts/main.html b/docs/_layouts/main.html
@@ -35,7 +35,7 @@ <h1>{{ page.title }}</h1>
           {{ content }}
         </div>
 
-        <aside class="grid-col-3 tablet:display-none padding-top-4">
+        <aside class="grid-col-12 tablet:display-none padding-top-4">
           <nav>
             <ul class="usa-sidenav">
               {%

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@18f/identity-design-system",
-  "version": "7.0.0",
+  "version": "7.0.1-beta.1",
   "description": "The global style of Login.gov",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",

diff --git a/src/scss/packages/_usa-header.scss b/src/scss/packages/_usa-header.scss
@@ -1,7 +1,37 @@
 @use 'uswds-core' as *;
 @forward './usa-header/index';
 
-$header-height: 10;
+// Header
+// ---------------------------------
+
+.usa-header + .usa-section--dark {
+  @include at-media($theme-header-min-width) {
+    border-top: none;
+  }
+}
+
+.usa-logo img {
+  display: block;
+  height: units(2);
+
+  @include at-media($theme-header-min-width) {
+    height: units(3);
+  }
+}
+
+.usa-logo__text {
+  @include at-media-max($theme-header-min-width) {
+    @include u-font-size($theme-header-font-family, 3);
+    padding-left: 17px;
+  }
+
+  @include at-media($theme-header-min-width) {
+    @include u-font-size($theme-header-font-family, 4);
+    padding-left: 27px;
+  }
+
+  color: color('secondary');
+}
 
 .usa-overlay {
   background: color('base-darker');
@@ -11,72 +41,44 @@ $header-height: 10;
   }
 }
 
-// Header navigation
+// usa-header--extended
 // ---------------------------------
 
-.usa-header--extended,
-.usa-header--basic {
+.usa-header--extended {
   .usa-logo {
-    @include at-media-max($theme-header-min-width) {
-      font-size: unset;
-      flex: unset;
-    }
-
     @include at-media($theme-header-min-width) {
-      font-size: unset;
-      margin: 0;
+      @include u-margin-y(2.5);
     }
-
-    line-height: units(2);
   }
 
   .usa-navbar {
-    @include at-media-max($theme-header-min-width) {
-      border-bottom: units(1px) solid color('base-light');
-      justify-content: space-between;
-    }
-
     @include at-media($theme-header-min-width) {
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      height: units($header-height);
-    }
-  }
-}
-
-.usa-header {
-  + .usa-section,
-  + main {
-    @include at-media($theme-header-min-width) {
-      border-top: units(1px) solid color('base-light');
     }
   }
-}
 
-// Header navigation for basic
-// ---------------------------------
-
-.usa-header--basic {
-  .usa-nav-container {
+  .usa-nav {
     @include at-media($theme-header-min-width) {
-      align-items: center;
+      border-top: none;
     }
   }
 
-  .usa-nav {
+  .usa-nav__primary {
     @include at-media($theme-header-min-width) {
-      padding: 0;
+      margin-left: units(-1.5);
     }
   }
-}
-
-// Header navigation for extended
-// ---------------------------------
 
-.usa-header--extended .usa-nav {
   @include at-media($theme-header-min-width) {
-    border-top: 0;
-    padding: 0;
-    width: 100%;
+    .usa-nav__primary-item > .usa-current,
+    .usa-nav__primary-item > .usa-nav__link:hover {
+      &::after {
+        background-color: color('secondary');
+        left: units(1.5);
+        right: units(1.5);
+      }
+    }
   }
 }