[Button] Bump icon fill specificity (#11429)

### WHY are these changes introduced? |vite|webpack| |-|-| |<img width="840" alt="Screenshot 2024-01-09 at 4 37 01 PM" src="https://github.com/Shopify/web/assets/20652326/cb4b71a2-f730-4d30-9562-7e07caf8ca9b">|<img width="842" alt="Screenshot 2024-01-09 at 4 37 16 PM" src="https://github.com/Shopify/web/assets/20652326/3943bc4b-8060-41de-8adb-323af4443c15">| The `Button` icon fill specificity was the same as `Icon`'s fill specificity `(0, 1, 1)` which were causing inconsistent results locally vs. production. This PR bumps `Button`'s icon fill to `(0, 2, 1)` so that it is always greater than `Icon`'s fill ### How to 🎩 - Make sure storybook's icon buttons still look the same (no UI regressions) - check on staging
Shopify · Jan 11, 2024 · b1ecec1 · b1ecec1
1 parent 1908a3a
commit b1ecec1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 29 deletions.
diff --git a/.changeset/tricky-feet-kick.md b/.changeset/tricky-feet-kick.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Bumped `Button` icon fill specificity to always be greater than `Icon` fill
diff --git a/polaris-react/src/components/Button/Button.module.scss b/polaris-react/src/components/Button/Button.module.scss
@@ -43,35 +43,57 @@
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 
-  svg {
-    fill: var(--pc-button-icon-fill);
-  }
-
   @media (--p-breakpoints-md-up) {
     font-size: var(--p-font-size-300);
     line-height: var(--p-font-line-height-400);
   }
 }
 
+// stylelint-disable selector-max-specificity -- Duplicate selectors to bump specificity to be greater than Icon's svg fill (0, 1, 1)
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector
+// Remove the duplicate selectors once `Icon` supports no fill so there won't be competing specificity
+.Button.Button svg {
+  fill: var(--pc-button-icon-fill);
+}
+
+.Button.Button:hover svg {
+  fill: var(--pc-button-icon-fill_hover);
+}
+
+.Button.Button:active,
+.Button.Button[data-state='open'] svg {
+  fill: var(--pc-button-icon-fill_active);
+}
+
+.Button.Button:disabled,
+.Button.Button[disabled],
+.disabled.disabled svg {
+  fill: var(--pc-button-icon-fill_disabled);
+}
+
+.pressed.pressed,
+.pressed.pressed:hover,
+.pressed.pressed:active,
+.pressed.pressed:focus-visible svg {
+  fill: var(--pc-button-icon-fill_pressed);
+}
+
+.Spinner.Spinner svg {
+  fill: var(--pc-button-icon-fill_disabled);
+}
+// stylelint-enable selector-max-specificity
+
 .Button:hover {
   background: var(--pc-button-bg_hover);
   color: var(--pc-button-color_hover);
   box-shadow: var(--pc-button-box-shadow_hover);
-
-  svg {
-    fill: var(--pc-button-icon-fill_hover);
-  }
 }
 
 .Button:active,
 .Button[data-state='open'] {
   background: var(--pc-button-bg_active);
   color: var(--pc-button-color_active);
   box-shadow: var(--pc-button-box-shadow_active);
-
-  svg {
-    fill: var(--pc-button-icon-fill_active);
-  }
 }
 
 .Button:focus-visible {
@@ -89,10 +111,6 @@
   box-shadow: none;
   user-select: none;
   pointer-events: none;
-
-  svg {
-    fill: var(--pc-button-icon-fill_disabled);
-  }
 }
 
 .pressed,
@@ -102,16 +120,16 @@
   background: var(--pc-button-bg_pressed);
   color: var(--pc-button-color_pressed);
   box-shadow: var(--pc-button-box-shadow_pressed);
-
-  svg {
-    fill: var(--pc-button-icon-fill_pressed);
-  }
 }
 
 // VARIANTS
 .variantPrimary {
   // stylelint-disable  -- custom button tokens
-  --pc-button-bg-gradient: linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%);
+  --pc-button-bg-gradient: linear-gradient(
+    180deg,
+    rgba(48, 48, 48, 0) 63.53%,
+    rgba(255, 255, 255, 0.15) 100%
+  );
   --pc-button-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset,
     0px 0px 0px 1px rgba(48, 48, 48, 1) inset,
     0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) inset;
@@ -131,9 +149,11 @@
 
 .variantSecondary {
   // stylelint-disable  -- custom button tokens
-  --pc-button-box-shadow: 0 -1px 0 0 #b5b5b5 inset, 0 0 0 1px rgba(0, 0, 0, 0.10) inset, 0 0.5px 0 1.5px #fff inset;
+  --pc-button-box-shadow: 0 -1px 0 0 #b5b5b5 inset,
+    0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0.5px 0 1.5px #fff inset;
   --pc-button-box-shadow_active: -1px 0 1px 0 rgba(26, 26, 26, 0.122) inset,
-    1px 0 1px 0 rgba(26, 26, 26, 0.122) inset, 0 2px 1px 0 rgba(26, 26, 26, 0.2) inset;
+    1px 0 1px 0 rgba(26, 26, 26, 0.122) inset,
+    0 2px 1px 0 rgba(26, 26, 26, 0.2) inset;
   // stylelint-enable
   --pc-button-bg: var(--p-color-bg-fill);
   --pc-button-bg_hover: var(--p-color-bg-fill-hover);
@@ -196,7 +216,8 @@
 .toneSuccess:is(.variantPrimary) {
   // stylelint-disable  -- custom button tokens
   --pc-button-box-shadow: 0 -1px 0 1px rgba(12, 81, 50, 0.8) inset,
-    0 0 0 1px rgba(19, 111, 69, 0.8) inset, 0 0.5px 0 1.5px rgba(255, 255, 255, 0.251) inset;
+    0 0 0 1px rgba(19, 111, 69, 0.8) inset,
+    0 0.5px 0 1.5px rgba(255, 255, 255, 0.251) inset;
   --pc-button-box-shadow_active: -1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
     1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset;
@@ -210,7 +231,8 @@
 .toneCritical:is(.variantPrimary) {
   // stylelint-disable  -- custom button tokens
   --pc-button-box-shadow: 0 -1px 0 1px rgba(142, 31, 11, 0.8) inset,
-    0 0 0 1px rgba(181, 38, 11, 0.8) inset, 0 0.5px 0 1.5px rgba(255, 255, 255, 0.349) inset;
+    0 0 0 1px rgba(181, 38, 11, 0.8) inset,
+    0 0.5px 0 1.5px rgba(255, 255, 255, 0.349) inset;
   --pc-button-box-shadow_active: -1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
     1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset;
@@ -360,10 +382,6 @@
   top: calc(var(--pc-button-padding-block) / 2 + 50%);
   left: 50%;
   transform: translate(-50%, -50%);
-
-  svg {
-    fill: var(--pc-button-icon-fill_disabled);
-  }
 }
 
 // BUTTON GROUP