Navigation v11 style updates

Author: mateus

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

@@ -20,6 +20,11 @@ $nav-max-width: 360px;
   -webkit-overflow-scrolling: touch;
   border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
+  #{$se23} & {
+    background-color: var(--p-color-bg-subdued-active);
+    border-right: 0;
+  }
+
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-bottom, 0, bottom);
 
@@ -108,6 +113,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 +136,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;
 
@@ -147,6 +162,10 @@ $disabled-fade: 0.6;
     @include no-focus-ring;
     color: var(--p-color-text-primary);
     background-color: var(--p-color-bg-app-active);
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-strong);
+    }
   }
 
   @media #{$p-breakpoints-md-up} {
@@ -197,6 +216,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 +261,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);
+    }
   }
 }
 
@@ -392,13 +423,25 @@ $disabled-fade: 0.6;
   .Item {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     font-size: 15px;
-    font-weight: var(--p-font-weight-medium);
     line-height: nav(item-line-height);
     color: var(--p-color-text-subdued);
     padding-left: calc(var(--p-space-8) + var(--p-space-3));
 
+    #{$se23} & {
+      font-weight: var(--p-font-weight-regular);
+
+      // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
+      &:is(:hover, :focus-visible) {
+        background: var(--p-color-experimental-bg-transparent-hover);
+      }
+    }
+
     &:hover {
       color: var(--p-color-text-subdued);
+
+      #{$se23} & {
+        color: var(--p-color-text);
+      }
     }
 
     &:focus-visible {
@@ -412,6 +455,10 @@ $disabled-fade: 0.6;
     &:active:hover {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include no-focus-ring;
+
+      #{$se23} & {
+        background: var(--p-color-experimental-bg-transparent-active);
+      }
     }
 
     &:active {
@@ -429,13 +476,33 @@ $disabled-fade: 0.6;
     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);
+    }
+  }
+
+  #{$se23} & {
+    // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
+    .ItemInnerWrapper-selected {
+      background-color: var(--p-color-experimental-bg-transparent-active);
+    }
   }
 
   .Item-selected {
     color: var(--p-color-text-primary);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring;
 
+    #{$se23} & {
+      color: var(--p-color-text);
+
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- necessary to override the specificity of the Text class
+      .Text {
+        font-weight: var(--p-font-weight-medium);
+      }
+    }
+
     &:hover {
       color: var(--p-color-text-primary-hover);
     }

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,