Fixed visual regressions

Shopify · Jul 19, 2023 · cb7a061 · cb7a061
1 parent 8c17334
commit cb7a061
Showing 1 changed file with 41 additions and 8 deletions.
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -157,6 +157,10 @@ $nav-max-width: 360px;
 
   #{$se23} & {
     padding: 0 var(--p-space-3);
+
+    --secondary-actions-on-hover-background-color: var(
+      --p-color-bg-subdued-hover
+    );
   }
 }
 
@@ -224,16 +228,14 @@ $nav-max-width: 360px;
   background-color: var(--p-color-bg-app-selected);
 
   #{$se23} & {
-    background-color: var(--p-color-bg-app-selected);
-
     // stylelint-disable-next-line selector-max-combinators -- Needed for precision on text
     .Text {
       color: var(--p-color-text);
       // stylelint-disable-next-line --  se23 component custom property
       letter-spacing: var(--pc-navigation-letter-spacing-medium);
     }
 
-    &:is(:hover, :focus-visible) {
+    &:is(:hover, :focus-visible, :focus-within) {
       background: var(--p-color-bg-app-selected);
 
       // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators -- se23
@@ -264,13 +266,28 @@ $nav-max-width: 360px;
   .SecondaryActions {
     background: var(--p-color-bg-app-selected);
 
+    #{$se23} & {
+      background: var(--p-color-bg-app-selected);
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
+    }
+
     &::before {
       // stylelint-disable-next-line -- required for fade effect
       background: linear-gradient(
         to right,
         rgba(0, 0, 0, 0),
         var(--p-color-bg-app-selected) var(--p-space-8)
       );
+
+      #{$se23} & {
+        // stylelint-disable-next-line -- required for fade effect
+        background: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0),
+          var(--p-color-bg-app-selected) var(--p-space-8)
+        );
+      }
     }
   }
 }
@@ -547,10 +564,11 @@ $nav-max-width: 360px;
 
       #{$se23} & {
         z-index: var(--p-z-index-2);
-        background: var(--secondary-actions-on-hover-background-color);
+        background: var(--p-color-bg-subdued-hover);
         padding: 0 var(--p-space-05);
         margin-right: 0;
-        border-radius: var(--p-border-radius-2);
+        border-top-right-radius: var(--p-border-radius-2);
+        border-bottom-right-radius: var(--p-border-radius-2);
         transition: none;
       }
 
@@ -570,7 +588,12 @@ $nav-max-width: 360px;
         );
 
         #{$se23} & {
-          background: transparent;
+          // stylelint-disable-next-line -- required for fade effect
+          background: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0),
+            var(--p-color-bg-subdued-hover) var(--p-space-8)
+          );
         }
       }
     }
@@ -582,6 +605,16 @@ $nav-max-width: 360px;
         opacity: 1;
       }
     }
+
+    &:active {
+      #{$se23} & {
+        // stylelint-disable-next-line -- se23
+        .SecondaryActions {
+          // stylelint-disable-next-line -- required for specific styling se23
+          background-color: var(--p-color-bg-app-selected) !important;
+        }
+      }
+    }
   }
 }
 
@@ -690,7 +723,7 @@ $nav-max-width: 360px;
       padding-left: calc(var(--p-space-8) + var(--p-space-1));
 
       // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
-      &:is(:hover, :focus-visible) {
+      &:is(:hover, :focus-visible, :focus-within) {
         background: var(--p-color-bg-subdued-active);
         color: var(--p-color-text-primary);
       }
@@ -783,7 +816,7 @@ $nav-max-width: 360px;
       }
 
       // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
-      &:is(:hover, :focus-visible) {
+      &:is(:hover, :focus-visible, :focus-within) {
         background: var(--p-color-bg-app-selected);
         color: var(--p-color-text-primary);
       }