refactor(secnav): implement feedback

HelixDesignSystem · Apr 21, 2021 · 1864675 · 1864675
1 parent 8312104
commit 1864675
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/docs/components/secnav/test.html b/docs/components/secnav/test.html
@@ -84,7 +84,8 @@
   <nav id="hxSecNav">
     <a href="#" class="hxNavLink">SecNav One</a>
     <hx-disclosure aria-controls="secnav-option-menu">
-      <span>SecNav Two</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Two</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu id="secnav-option-menu">
       <section>
@@ -95,7 +96,8 @@
       </section>
     </hx-menu>
     <hx-disclosure aria-controls="secnav-option-menu-two">
-      <span>SecNav Three</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Three</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu id="secnav-option-menu-two">
       <section>
@@ -121,7 +123,8 @@
       </section>
     </hx-menu>
     <hx-disclosure aria-controls="secnav-option-menu-three">
-      <span>SecNav Four</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Four</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu class = "hxSecNavTwoColMenu" id="secnav-option-menu-three">
       <section class="hxLeftColMenu">

diff --git a/src/scss/components/secnav/index.scss b/src/scss/components/secnav/index.scss
@@ -7,6 +7,7 @@
 /// * =================================== * ///
 
 #hxSecNav {
+  display: flex; // prevent browser injected whitespace
   background-color: $gray-0;
   background-color: var(--hxSecNav-bgcolor, $gray-0);
   border-bottom: 0.125rem solid $gray-300;
@@ -19,7 +20,6 @@
   > hx-disclosure {
     color: $gray-950;
     color: var(--hxSecNav-hxNavLink-color, $gray-950);
-    display: inline-block;
     font-size: 1rem;
     height: 3.75rem;
     padding: 1.25rem;
@@ -41,6 +41,22 @@
       color: $gray-0;
       color: var(--hxSecNav-hxNavLink-active-color, $gray-0);
     }
+
+    .hxPrimary, // deprecated
+    .hxToggleNavMenu {
+      font-size: 0.75em;
+      pointer-events: none;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &[aria-expanded="true"] {
+      .hxPrimary, // deprecated
+      .hxToggleNavMenu {
+        font-size: 0.75em;
+        transform: translateY(-50%) scaleY(-1);
+      }
+    }
   }
 
   .hxNavLink {
@@ -49,13 +65,14 @@
 
   > hx-disclosure {
     margin-right: -0.25rem;
+    display: flex; // prevent browser injected whitespace
 
     > hx-icon {
       color: $gray-600;
       color: var(--hxSecNav-hxDisclosure-hxIcon-color, $gray-600);
       font-size: 1rem;
       margin-left: 0.5rem;
-      margin-top: 0.25rem;
+      margin-top: 0.813rem; // 13px
       width: 0.75rem;
     }
 
@@ -71,9 +88,10 @@
     }
 
     &[aria-expanded="true"] {
-      > hx-icon, > span {
+      > hx-icon > span {
         color: $purple-500;
         color: var(--hxSecNav-hxDisclosure-aria-expanded-color, $purple-500);
+        transform: translateY(50%) scaleY(-1);
       }
     }
   }