[Navigation] Allow the NavItem to highlight on hover/action uniformly

[Rmnlly]

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: https://github.com/Shopify/core-workflows/issues/633

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.

Before:

video of original interactions

OldVideo.mov

Active and Active hover highlighting:

Hover Highlighting:

After:

Video of new interactions and how the highlights appear uniform now

NewVideo.mov

Active and Active hover highlighting:

Hover Highlighting (notice the highlight ends just before the secondary action):

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.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

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>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.73 KB (+0.03% 🔺)
polaris-react-esm	136.07 KB (+0.03% 🔺)
polaris-react-esnext	191.83 KB (+0.03% 🔺)
polaris-react-css	42.06 KB (+0.01% 🔺)

[Rmnlly]

/snapit

[github-actions]

🫰✨ Thanks @Rmnlly! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[Rmnlly]

/snapit

[github-actions]

🫰✨ Thanks @Rmnlly! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[sam-b-rose]

Fix looks excellent! Thanks @Rmnlly 💯

[Rmnlly]

/snapit

[github-actions]

🫰✨ Thanks @Rmnlly! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]