From b1ecec131f7fc4a82f80b569cd228c8120815ab0 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Thu, 11 Jan 2024 13:03:24 -0500 Subject: [PATCH] [Button] Bump icon fill specificity (#11429) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? |vite|webpack| |-|-| |Screenshot 2024-01-09 at 4 37 01 PM|Screenshot 2024-01-09 at 4 37 16 PM| 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 --- .changeset/tricky-feet-kick.md | 5 ++ .../src/components/Button/Button.module.scss | 76 ++++++++++++------- 2 files changed, 52 insertions(+), 29 deletions(-) create mode 100644 .changeset/tricky-feet-kick.md diff --git a/.changeset/tricky-feet-kick.md b/.changeset/tricky-feet-kick.md new file mode 100644 index 00000000000..b6324b122e9 --- /dev/null +++ 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 index 5be5d3ce716..ba15a292fca 100644 --- a/polaris-react/src/components/Button/Button.module.scss +++ b/polaris-react/src/components/Button/Button.module.scss @@ -43,24 +43,50 @@ 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, @@ -68,10 +94,6 @@ 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