Add underline to SubNav active link (#865)

* add underline styles to active page links

* add changeset

* update changeset

* resolve PR feedback

* add vertical padding back to SubNav

* update snapshots

* reword changeset

* reword changeset

Author: joshfarrant

.changeset/loud-swans-repeat.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Style improvements to the `SubNav` component.
+
+- Fixed a bug in `SubNav.Link` elements with `aria-current`, which caused inconsistent appearance across viewports.

packages/react/src/SubNav/SubNav.module.css

@@ -151,7 +151,6 @@
 .SubNav__link:focus-visible .SubNav__link-label::after,
 .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
   opacity: 1;
-  transform: translate3d(0, 0.2em, 0);
   transform: scale(0.8, 1);
 }
 
@@ -427,8 +426,17 @@
     position: relative;
   }
 
-  .SubNav .SubNav__link--has-sub-menu:hover .SubNav__sub-menu-children .SubNav__link-label::after {
-    display: none;
+  .SubNav .SubNav__link-label::after {
+    opacity: 0;
+    transform: scale(0);
+    bottom: 0;
+  }
+
+  .SubNav__link:hover .SubNav__link-label::after,
+  .SubNav__link:focus-visible .SubNav__link-label::after,
+  .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
@@ -522,16 +530,20 @@
     text-decoration: none !important; /* dotcom override */
     transition: color 0.2s var(--brand-animation-easing-glide);
     position: relative;
-    padding: 4px 0;
+    padding: var(--base-size-4) 0;
   }
 
   .SubNav__link-label {
     font-size: var(--brand-text-size-100);
     line-height: var(--brand-text-lineHeight-100);
   }
 
+  .SubNav__link--has-sub-menu {
+    padding: var(--base-size-4) 0;
+  }
+
   /* To fix hover distance between link and dropdown */
-  .SubNav__link.SubNav__link--has-sub-menu::after {
+  .SubNav__link--has-sub-menu::after {
     content: '';
     position: absolute;
     bottom: calc(var(--base-size-12) * -1);
@@ -596,16 +608,37 @@
   }
 
   .SubNav__sub-menu--dropdown .SubNav__link-label::after {
-    display: none;
+    opacity: 1;
+    transform: scale(0);
   }
 
   .SubNav__link--has-sub-menu {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--base-size-4);
     cursor: pointer;
   }
 
+  .SubNav__sub-menu--dropdown .SubNav__link-label {
+    position: relative;
+    padding: var(--base-size-4) 0;
+  }
+
+  /* Show underline on submenu parent when child has aria-current */
+  .SubNav__link--has-sub-menu:has(.SubNav__link[aria-current]:not([aria-current='false']))
+    > .SubNav__link
+    .SubNav__link-label::after {
+    opacity: 1;
+    transform: scale(0.8, 1);
+  }
+
+  .SubNav__link--has-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after,
+  .SubNav__link--has-sub-menu .SubNav__link:hover .SubNav__link-label::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+
   .SubNav__sub-menu-icon {
     display: inline-block !important;
     fill: var(--brand-color-text-muted);

packages/react/src/SubNav/SubNav.tsx

@@ -370,11 +370,7 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
 
     return (
       <div
-        className={clsx(
-          styles['SubNav__link'],
-          styles['SubNav__link--has-sub-menu'],
-          isExpanded && styles['SubNav__link--expanded'],
-        )}
+        className={clsx(styles['SubNav__link--has-sub-menu'], isExpanded && styles['SubNav__link--expanded'])}
         data-testid={testId || testIds.subMenu}
         ref={ref}
         onMouseOver={() => setIsExpanded(true)}