Add clip-path to fix visual artifacts

Shopify · Jul 19, 2023 · e5286e1 · e5286e1
1 parent 58fca71
commit e5286e1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -1416,6 +1416,13 @@
     }
   }
 
+  .Button.pressed {
+    #{$se23} & {
+      // stylelint-disable-next-line -- se23 required for styling specificicty
+      clip-path: none !important;
+    }
+  }
+
   > :first-child .Button,
   > :first-child .Button::after {
     border-radius: 0;

diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
@@ -53,6 +53,11 @@
     &:not(:first-child) {
       margin-left: calc(-1 * var(--p-space-025));
     }
+
+    // stylelint-disable-next-line -- se23 specific styling
+    + .Item:not(.selected) > button {
+      clip-path: inset(0 0 0 var(--p-space-025));
+    }
   }
 
   .Item-focused {