[Navigation] Allow the NavItem to highlight on hover/action uniformly (#7793)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

As part of an effort to port bug fixes and style changes over from admin
I am adding this highlight change into polaris.

Fixes: Shopify/core-workflows#633

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

I have added a wrapper around the Nav Item contents to allow the nav
item to extend its highlighting over to the secondary actions as well.
This was part of UX changes made to the navigation in Admin during the
pinning work.

This applies for both hover and active state highlights, the secondary
action will now appear as if its part of the navigation items hover
instead of being separate, the focus rings/tab order is maintained.

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

Before:
  <details>
    <summary>video of original interactions</summary>
    

https://user-images.githubusercontent.com/33904740/203415160-147a03a0-dbf3-41ca-b9d6-0164aec33ea0.mov
  </details>
Active and Active hover highlighting:
<img width="290" alt="Original 'various states and sections' showing
that the secondary action highlight when hovered and active is separate
from the text in the navItem'"
src="https://user-images.githubusercontent.com/33904740/203415460-169d648c-24f5-492d-ba7c-ad55719ee076.png">
Hover Highlighting:
<img width="267" alt="Original NavItem hover highlight when not active
showing the secondary item not highlighting on hover"
src="https://user-images.githubusercontent.com/33904740/203415621-d5a329bb-cfad-4cc1-84af-ccbcd018aeb9.png">

After:
<details>
<summary>Video of new interactions and how the highlights appear uniform
now</summary>


https://user-images.githubusercontent.com/33904740/203418162-5c84130d-7b7a-4975-b826-f612b3a2750c.mov
</details>

Active and Active hover highlighting:
<img width="280" alt="New 'various states and sections' showcasing that
the highlight is now uniform across the text and secondary action"
src="https://user-images.githubusercontent.com/33904740/203415977-ce63bd43-3649-420f-8565-a8a8ac483c7e.png">
Hover Highlighting (notice the highlight ends just before the secondary
action):
<img width="262" alt="New NavItem hover highlight when not active
showing that the highlight is also uniform then"
src="https://user-images.githubusercontent.com/33904740/203416068-cc1e4d60-ee45-431e-8f87-b6d061ad81d0.png">

Here we can see that the highlight now is uniform across the text of the
nav item and the secondary action, similarly to how we have in the admin
nav today.

One thing you will notice is that the secondary action spacing is
slightly different than before, it is now identical to the left hand
spacing of the nav item. This is mainly so that the different highlights
can be uniform in the nav now, so they're all aligned. Its a bit
difficult to see but the secondary action highlight juts out past the
non-secondary action items, so now they are the same width.

<img width="293" alt="showcasing-secondaryactionhover-misalignment"
src="https://user-images.githubusercontent.com/33904740/203416721-6cf0678b-c949-464d-9500-c54bb9c8d289.png">




### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: Rmnlly

.changeset/yellow-pillows-visit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Extends Navigation Item highlight 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 {
@@ -203,9 +196,24 @@ $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);
 }
 
 .Text {
@@ -238,8 +246,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>

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

@@ -139,16 +139,20 @@ export function Section({
 
   const toggleRollup = rollup && items.length > rollup.after && (
     <div className={styles.ListItem} key="List Item">
-      <button
-        type="button"
-        className={toggleClassName}
-        onClick={toggleExpanded}
-        aria-label={ariaLabel}
-      >
-        <span className={styles.Icon}>
-          <Icon source={HorizontalDotsMinor} />
-        </span>
-      </button>
+      <div className={styles.ItemWrapper}>
+        <div className={styles.ItemInnerWrapper}>
+          <button
+            type="button"
+            className={toggleClassName}
+            onClick={toggleExpanded}
+            aria-label={ariaLabel}
+          >
+            <span className={styles.Icon}>
+              <Icon source={HorizontalDotsMinor} />
+            </span>
+          </button>
+        </div>
+      </div>
     </div>
   );