created a wrapper to allow the nav item with its secondary actions to highlight uniformly

Author: Rmnlly

.changeset/yellow-pillows-visit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Extending highlighting for the Navigation Item to full width to cover secondary actions

polaris-react/src/components/Navigation/Navigation.scss

@@ -92,18 +92,11 @@ $disabled-fade: 0.6;
 .Item {
   @include nav-item-attributes;
   position: relative;
-
-  margin-inline-start: var(--p-space-2);
-
-  &:last-child {
-    margin-inline-end: var(--p-space-2);
-  }
 }
 
 .Item-selected {
   font-weight: var(--p-font-weight-semibold);
   color: var(--p-text-primary);
-  background-color: var(--p-background-selected);
   outline: var(--p-border-width-1) solid transparent;
 
   &::before {
@@ -118,18 +111,6 @@ $disabled-fade: 0.6;
     border-bottom-right-radius: var(--p-border-radius-1);
   }
 
-  @include focus-ring;
-
-  &:hover,
-  &.keyFocused {
-    background-color: var(--p-background-hovered);
-    color: var(--p-text-primary-hovered);
-  }
-
-  .keyFocused {
-    @include focus-ring($style: 'focused');
-  }
-
   &:active,
   &:active:hover {
     @include no-focus-ring;
@@ -203,9 +184,35 @@ $disabled-fade: 0.6;
 }
 
 .ItemWrapper {
+  width: 100%;
+  padding: 0 var(--p-space-2);
+}
+
+.ItemInnerWrapper {
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
+
+  &:hover {
+    background: var(--p-background-hovered);
+    color: var(--p-text);
+    text-decoration: none;
+  }
+}
+
+.ItemInnerWrapper-Selected {
+  background-color: var(--p-background-selected);
+  @include focus-ring;
+
+  &:hover,
+  &.keyFocused {
+    background-color: var(--p-background-hovered);
+    color: var(--p-text-primary-hovered);
+  }
+
+  .keyFocused {
+    @include focus-ring($style: 'focused');
+  }
 }
 
 .Text {
@@ -238,8 +245,7 @@ $disabled-fade: 0.6;
   display: flex;
   align-items: center;
   height: nav(mobile-height);
-  padding: var(--p-space-1) var(--p-space-4);
-  margin-right: var(--p-space-1);
+  padding: var(--p-space-1) var(--p-space-3) var(--p-space-1) var(--p-space-4);
   border-radius: var(--p-border-radius-1);
 
   @media #{$p-breakpoints-md-up} {

polaris-react/src/components/Navigation/_variables.scss

@@ -34,12 +34,6 @@ $nav-animation-variables: (
   text-decoration: none;
   text-align: left;
 
-  &:hover {
-    background: var(--p-background-hovered);
-    color: var(--p-text);
-    text-decoration: none;
-  }
-
   @include focus-ring;
 
   &.keyFocused {

polaris-react/src/components/Navigation/components/Item/Item.tsx

@@ -315,25 +315,32 @@ export function Item({
   return (
     <li className={className}>
       <div className={styles.ItemWrapper}>
-        <UnstyledLink
-          url={url}
-          className={itemClassName}
-          external={external}
-          tabIndex={tabIndex}
-          aria-disabled={disabled}
-          aria-label={accessibilityLabel}
-          onClick={getClickHandler(onClick)}
-          onKeyUp={handleKeyUp}
-          onBlur={handleBlur}
-          {...normalizeAriaAttributes(
-            secondaryNavigationId,
-            subNavigationItems.length > 0,
-            showExpanded,
+        <div
+          className={classNames(
+            styles.ItemInnerWrapper,
+            selected && canBeActive && styles['ItemInnerWrapper-Selected'],
           )}
         >
-          {itemContentMarkup}
-        </UnstyledLink>
-        {secondaryActionMarkup}
+          <UnstyledLink
+            url={url}
+            className={itemClassName}
+            external={external}
+            tabIndex={tabIndex}
+            aria-disabled={disabled}
+            aria-label={accessibilityLabel}
+            onClick={getClickHandler(onClick)}
+            onKeyUp={handleKeyUp}
+            onBlur={handleBlur}
+            {...normalizeAriaAttributes(
+              secondaryNavigationId,
+              subNavigationItems.length > 0,
+              showExpanded,
+            )}
+          >
+            {itemContentMarkup}
+          </UnstyledLink>
+          {secondaryActionMarkup}
+        </div>
       </div>
       {secondaryNavigationMarkup}
     </li>