Navigation v11 style updates

mateus · mateus · commit 0678a050a179 · 2023-05-31T18:23:06.000Z
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
@@ -1,11 +1,148 @@
 import React from 'react';
+import {
+  HomeMinor,
+  MarketingMinor,
+  OrdersMinor,
+  ProductsMinor,
+  ViewMinor,
+} from '@shopify/polaris-icons';
 
-import {Page} from '../src';
+import {Frame, Navigation} from '../src';
 
 export function Playground() {
+  const [selected, setSelected] = React.useState('home');
+
   return (
-    <Page title="Playground">
-      {/* Add the code you want to test in here */}
-    </Page>
+    <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>
   );
 }
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -108,6 +108,10 @@ $disabled-fade: 0.6;
 .Item,
 .ItemInnerWrapper {
   border-radius: var(--p-border-radius-1);
+
+  #{$se23} & {
+    border-radius: var(--p-border-radius-2);
+  }
 }
 
 .Item-selected {
@@ -127,6 +131,12 @@ $disabled-fade: 0.6;
     border-bottom-right-radius: var(--p-border-radius-1);
   }
 
+  #{$se23} & {
+    &::before {
+      display: none;
+    }
+  }
+
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
 
@@ -197,6 +207,10 @@ $disabled-fade: 0.6;
   &:not(:first-child) {
     .ItemInnerWrapper {
       border-top: var(--p-border-width-1) solid var(--p-color-bg-app);
+
+      #{$se23} & {
+        border-top: 0;
+      }
     }
   }
 }
@@ -238,11 +252,19 @@ $disabled-fade: 0.6;
   margin-top: calc(var(--p-space-2) + var(--p-space-05));
   margin-bottom: calc(var(--p-space-2) + var(--p-space-05));
 
+  #{$se23} & {
+    font-size: var(--p-font-size-100);
+  }
+
   @media #{$p-breakpoints-md-up} {
     font-size: var(--p-font-size-100);
     line-height: var(--p-font-line-height-2);
     margin-top: var(--p-space-1);
     margin-bottom: var(--p-space-1);
+
+    #{$se23} & {
+      font-size: var(--p-font-experimental-size-80);
+    }
   }
 }
 
@@ -423,12 +445,29 @@ $disabled-fade: 0.6;
       line-height: 1;
       padding-left: var(--p-space-10);
     }
+
+    #{$se23} & {
+      &:is(:hover, :focus-visible) {
+        background: var(--p-color-experimental-bg-transparent-hover);
+      }
+    }
   }
 
   .Text {
     margin-top: var(--p-space-1);
     margin-bottom: var(--p-space-1);
     line-height: var(--p-space-5);
+
+    #{$se23} & {
+      font-weight: var(--p-font-weight-regular);
+      color: var(--p-color-text-subdued);
+    }
+  }
+
+  #{$se23} & {
+    .ItemInnerWrapper-selected {
+      background-color: var(--p-color-experimental-bg-transparent-active);
+    }
   }
 
   .Item-selected {
@@ -449,6 +488,12 @@ $disabled-fade: 0.6;
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include no-focus-ring;
     }
+
+    #{$se23} & {
+      .Text {
+        color: var(--p-color-text);
+      }
+    }
   }
 
   .Item-disabled {
diff --git a/polaris-react/src/components/Navigation/components/Item/Item.tsx b/polaris-react/src/components/Navigation/components/Item/Item.tsx
@@ -3,6 +3,7 @@ import type {MouseEvent, ReactNode} from 'react';
 
 import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
 import {classNames} from '../../../../utilities/css';
+import {useFeatures} from '../../../../utilities/features';
 import {NavigationContext} from '../../context';
 import {Badge} from '../../../Badge';
 import {Icon} from '../../../Icon';
@@ -107,6 +108,7 @@ export function Item({
   const {location, onNavigationDismiss} = useContext(NavigationContext);
   const navTextRef = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
+  const {polarisSummerEditions2023} = useFeatures();
 
   useEffect(() => {
     if (!isNavigationCollapsed && expanded) {
@@ -284,7 +286,9 @@ export function Item({
   const itemClassName = classNames(
     styles.Item,
     disabled && styles['Item-disabled'],
-    selected && canBeActive && styles['Item-selected'],
+    polarisSummerEditions2023
+      ? (selected || childIsActive) && styles['Item-selected']
+      : selected && canBeActive && styles['Item-selected'],
     showExpanded && styles.subNavigationActive,
     childIsActive && styles['Item-child-active'],
   );
@@ -376,7 +380,10 @@ export function Item({
         <div
           className={classNames(
             styles.ItemInnerWrapper,
-            selected && canBeActive && styles['ItemInnerWrapper-selected'],
+            polarisSummerEditions2023
+              ? (selected || childIsActive) &&
+                  styles['ItemInnerWrapper-selected']
+              : selected && canBeActive && styles['ItemInnerWrapper-selected'],
             displayActionsOnHover &&
               styles['ItemInnerWrapper-display-actions-on-hover'],
             disabled && styles.ItemInnerDisabled,
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
@@ -12,13 +12,16 @@ export type FontSizeScale =
   | '600'
   | '700';
 
+export type FontExperimentalSizeScale = '70' | '80';
+
 export type FontLineHeightScale = '1' | '2' | '3' | '4' | '5' | '6' | '7';
 
 export type FontWeightAlias = 'regular' | 'medium' | 'semibold' | 'bold';
 
 export type FontTokenName =
   | `font-family-${FontFamilyAlias}`
   | `font-size-${FontSizeScale}`
+  | `font-experimental-size-${FontExperimentalSizeScale}`
   | `font-weight-${FontWeightAlias}`
   | `font-line-height-${FontLineHeightScale}`;
 
@@ -37,9 +40,15 @@ export const font: {
     value:
       "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
   },
+  'font-experimental-size-70': {
+    value: '11px',
+  },
   'font-size-75': {
     value: '12px',
   },
+  'font-experimental-size-80': {
+    value: '13px',
+  },
   'font-size-100': {
     value: '14px',
   },
