[Navigation] Update styles for v11

[mateus]

WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-summer-editions/issues/10

WHAT is this pull request doing?

Update Navigation styles for v11

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {
  HomeMinor,
  MarketingMinor,
  OrdersMinor,
  ProductsMinor,
  ViewMinor,
} from '@shopify/polaris-icons';

import {Frame, Navigation} from '../src';

export function Playground() {
  const [selected, setSelected] = React.useState('home');

  return (
    <Frame>
      <Navigation location="/">
        <Navigation.Section
          items={[
            {
              url: '#',
              excludePaths: ['#'],
              label: 'Home',
              icon: HomeMinor,
              onClick: () => setSelected('home'),
              matches: selected === 'home',
              secondaryAction: {
                url: '#',
                accessibilityLabel: 'View your online store',
                icon: ViewMinor,
                tooltip: {
                  content: 'View your online store',
                },
              },
            },
            {
              url: '#',
              excludePaths: ['#'],
              label: 'Orders',
              icon: OrdersMinor,
              badge: '15',
              onClick: () => setSelected('orders'),
              matches: selected === 'orders',
              subNavigationItems: [
                {
                  url: '#',
                  excludePaths: ['#'],
                  disabled: false,
                  label: 'Drafts',
                  onClick: () => setSelected('drafts'),
                  matches: selected === 'drafts',
                },
                {
                  url: '#',
                  excludePaths: ['#'],
                  disabled: false,
                  label: 'Shipping labels',
                  onClick: () => setSelected('shippinglabels'),
                  matches: selected === 'shippinglabels',
                },
              ],
            },
            {
              url: '#',
              excludePaths: ['#'],
              label: 'Marketing',
              icon: MarketingMinor,
              badge: '15',
              onClick: () => setSelected('marketing'),
              matches: selected === 'marketing',
              secondaryAction: {
                url: '#',
                accessibilityLabel: 'View your online store',
                icon: ViewMinor,
                tooltip: {
                  content: 'View your online store',
                },
              },
              subNavigationItems: [
                {
                  url: '#',
                  excludePaths: ['#'],
                  disabled: false,
                  label: 'Reports',
                  onClick: () => setSelected('reports'),
                  matches: selected === 'reports',
                },
                {
                  url: '#',
                  excludePaths: ['#'],
                  disabled: false,
                  label: 'Live view',
                  onClick: () => setSelected('liveView'),
                  matches: selected === 'liveView',
                },
              ],
            },
            {
              url: '#',
              label: 'Products',
              icon: ProductsMinor,
              onClick: () => setSelected('products'),
              matches: selected === 'products',
              subNavigationItems: [
                {
                  url: '#',
                  disabled: false,
                  label: 'Inventory',
                  onClick: () => setSelected('inventory'),
                  matches: selected === 'inventory',
                },
                {
                  url: '#',
                  disabled: false,
                  label: 'Transfers',
                  onClick: () => setSelected('transfers'),
                  matches: selected === 'transfers',
                },
                {
                  url: '#',
                  excludePaths: ['#'],
                  disabled: false,
                  label: 'Collections',
                  onClick: () => setSelected('collections'),
                  matches: selected === 'collections',
                },
                {
                  url: '#',
                  disabled: false,
                  label: 'Gift cards',
                  onClick: () => setSelected('gift_cards'),
                  matches: selected === 'gift_cards',
                },
                {
                  url: '#',
                  disabled: false,
                  label: 'Price lists',
                  onClick: () => setSelected('price_lists'),
                  matches: selected === 'price_lists',
                },
              ],
            },
          ]}
        />
      </Navigation>
    </Frame>
  );
}

🎩 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

[mateus]

polarisSummerEditions2023 was missing from the FeaturesContext and it was causing some tests to fail.

[sophschneider]

Code looks good! Did a tophat on storybook as well (looks great) but didn't cross reference with the Figma

[kyledurand]

Can you update the focus states?

We've made the change to outline with outline offset. Here's an example of a focus ring override

[kyledurand]

Code looks pretty good just some minor things 👍

[kyledurand]

I think this can be content: none so the pseudo element doesn't render. Probably doesn't really matter but less dom elements

[mateus]

I can change it. Both should achieve the same result 👍🏻