From f779b0e6769926303be59276c7044917c975991f Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 13 Oct 2023 10:16:22 -0400 Subject: [PATCH 01/13] chore: reduce button complexity --- .changeset/afraid-rocks-happen.md | 5 + .../src/components/Button/Button.scss | 105 +++++++++--------- .../src/components/Button/Button.tsx | 15 +-- 3 files changed, 64 insertions(+), 61 deletions(-) create mode 100644 .changeset/afraid-rocks-happen.md diff --git a/.changeset/afraid-rocks-happen.md b/.changeset/afraid-rocks-happen.md new file mode 100644 index 00000000000..046563edd45 --- /dev/null +++ b/.changeset/afraid-rocks-happen.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Simplified `Button` code diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 944cc4ec8ff..32da173a4fb 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -48,8 +48,8 @@ } // stylelint-disable selector-max-specificity -- focus styles - &:focus:not(.primary):not(.plain):not(.tertiary), - &:focus-visible:not(.primary):not(.plain):not(.tertiary) { + &:focus:not(.variantPrimary):not(.variantPlain):not(.variantTertiary), + &:focus-visible:not(.variantPrimary):not(.variantPlain):not(.variantTertiary) { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property box-shadow: var(--pc-button-shadow); } @@ -86,12 +86,12 @@ line-height: var(--p-font-line-height-400); } - .Button:not(.plain) & { + .Button:not(.variantPlain) & { width: 100%; } // stylelint-disable-next-line selector-max-class -- override primary button font weight - .Button.primary & { + .Button.variantPrimary & { font-weight: var(--p-font-weight-semibold); } } @@ -179,9 +179,9 @@ margin-left: calc(-1 * (var(--pc-button-spinner-size) / 2)); } -.primary, -.critical, -.tertiary { +.toneCritical, +.variantPrimary, +.variantTertiary { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: 0); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -239,7 +239,7 @@ } } -.primary { +.variantPrimary { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-fill-brand); --pc-button-text: var(--p-color-text-brand-on-bg-fill); @@ -319,8 +319,8 @@ } } - &.critical, - &.success { + &.toneCritical, + &.toneSuccess { &::before { left: 0.5px; right: 0.5px; @@ -356,7 +356,7 @@ } } - &.critical { + &.toneCritical { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-fill-critical); --pc-button-text: var(--p-color-text-critical-on-bg-fill); @@ -403,7 +403,7 @@ } } - &.success { + &.toneSuccess { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-fill-success); --pc-button-text: var(--p-color-text-success-on-bg-fill); @@ -435,7 +435,7 @@ } } -.critical { +.toneCritical { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-fill); --pc-button-text: var(--p-color-text-critical); @@ -465,7 +465,7 @@ } } -.tertiary { +.variantTertiary { // stylelint-disable -- Button custom properties --pc-button-color: transparent; --pc-button-text: var(--p-color-text); @@ -526,7 +526,7 @@ display: none; } - &.critical { + &.toneCritical { // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties --pc-button-color: transparent; --pc-button-text: var(--p-color-text-critical); @@ -540,7 +540,7 @@ // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list // stylelint-disable-next-line selector-max-class -- set critical styles - &.critical { + &.toneCritical { box-shadow: none; } @@ -567,7 +567,7 @@ } // stylelint-disable-next-line selector-max-class -- set critical styles - &.critical { + &.toneCritical { // stylelint-disable-next-line selector-max-class, selector-max-specificity -- set svg fill path { fill: var(--p-color-text-critical); @@ -603,7 +603,7 @@ fill: var(--p-color-bg-fill-brand-disabled); } -.primary.disabled svg { +.variantPrimary.disabled svg { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- override Spinner fill color fill: var(--pc-button-text); } @@ -612,7 +612,7 @@ // target the content in pseudo-selectors, so we need higher specificity // in this case. // stylelint-disable selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY -.plain { +.variantPlain { // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list margin: calc(-1 * var(--pc-button-vertical-padding)) calc(-1 * var(--p-space-300)); @@ -716,7 +716,7 @@ } } - &.critical { + &.toneCritical { color: var(--p-color-text-critical); box-shadow: none; @@ -801,7 +801,7 @@ } } - &.critical.iconOnly { + &.toneCritical.iconOnly { svg { fill: var(--p-color-text-critical); } @@ -937,56 +937,59 @@ } } -.monochrome { - &.plain { +.variantMonochromePlain { + color: currentColor; + + svg { + fill: currentColor; + } + + &:hover, + &:focus, + &:active { color: currentColor; svg { fill: currentColor; } + } - &:hover, - &:focus, - &:active { - color: currentColor; + &.disabled { + color: currentColor; + opacity: 0.4; - svg { - fill: currentColor; - } + svg { + fill: currentColor; } + } - &.disabled { - color: var(--p-color-text-disabled); + // Prevents the loading spinner from overlapping the button’s text, while retaining its width. + &.loading .Text { + visibility: hidden; + } - svg { - fill: currentColor; - } + &.iconOnly { + svg { + fill: currentColor; } - // Prevents the loading spinner from overlapping the button’s text, while retaining its width. - &.loading .Text { - visibility: hidden; - } + &.disabled { + color: var(--p-color-text-disabled); - &.iconOnly { svg { fill: currentColor; } - - &:focus svg, - &:active svg { - fill: currentColor; - } - - &.disabled svg { - fill: currentColor; - } } - .Text:not(.removeUnderline) { - text-decoration: underline; + &:focus svg, + &:active svg { + fill: currentColor; } } + + .Text:not(.removeUnderline) { + text-decoration: underline; + } } // stylelint-enable selector-max-specificity, selector-max-class // stylelint-disable selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx index fb1ed1e8f90..16900a55a7f 100644 --- a/polaris-react/src/components/Button/Button.tsx +++ b/polaris-react/src/components/Button/Button.tsx @@ -123,21 +123,16 @@ export function Button({ const className = classNames( styles.Button, - variant === 'primary' && styles.primary, - variant === 'plain' && styles.plain, - variant === 'tertiary' && styles.tertiary, - variant === 'monochromePlain' && styles.monochrome, - variant === 'monochromePlain' && styles.plain, - tone === 'critical' && styles.critical, - tone === 'success' && styles.success, + fullWidth && styles.fullWidth, + icon && children == null && styles.iconOnly, isDisabled && styles.disabled, loading && styles.loading, pressed && !disabled && !url && styles.pressed, + removeUnderline && styles.removeUnderline, size && size !== DEFAULT_SIZE && styles[variationName('size', size)], textAlign && styles[variationName('textAlign', textAlign)], - fullWidth && styles.fullWidth, - icon && children == null && styles.iconOnly, - removeUnderline && styles.removeUnderline, + tone && styles[variationName('tone', tone)], + variant && styles[variationName('variant', variant)], ); const disclosureMarkup = disclosure ? ( From a2c9431291beb9d7ecb0fd88a9beed9d734720f5 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 13 Oct 2023 13:20:06 -0400 Subject: [PATCH 02/13] clean up stylelint comments --- .../src/components/Button/Button.scss | 39 ++++++++----------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 32da173a4fb..6ac748b7de9 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -14,7 +14,6 @@ var(--p-space-050) ) / 2 ); - --pc-button-large-vertical-padding: var(--p-space-200); --pc-button-spinner-size: 20px; --pc-button-segment: 10; --pc-button-focused: 20; @@ -53,7 +52,6 @@ // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property box-shadow: var(--pc-button-shadow); } - // stylelint-enable selector-max-specificity &:hover { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property @@ -249,23 +247,23 @@ // stylelint-enable &::before { - /* shine */ - // stylelint-disable -- set primary styles content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; + // stylelint-disable-next-line polaris/color/function-disallowed-list -- custom background background: linear-gradient( 180deg, rgba(255, 255, 255, 0.07) 80%, rgba(255, 255, 255, 0.15) 100% ); box-shadow: var(--p-shadow-button-primary); + /* stylelint-disable-next-line polaris/border/declaration-property-unit-disallowed-list -- custom radius */ border-radius: 9px; + /* stylelint-disable-next-line polaris/motion/declaration-property-unit-disallowed-list -- custom transition time */ transition: opacity 75ms cubic-bezier(0.19, 0.91, 0.38, 1); - // stylelint-enable } &:not(.disabled) { @@ -290,9 +288,8 @@ --pc-button-text: var(--p-color-text-brand-on-bg-fill-active); background: var(--pc-button-color-active); box-shadow: var(--p-shadow-button-primary-inset); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list + // stylelint-enable - // stylelint-enable-next-line length-zero-no-unit &::before { opacity: 1; // stylelint-disable-next-line -- override background @@ -613,9 +610,9 @@ // in this case. // stylelint-disable selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY .variantPlain { - // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list - margin: calc(-1 * var(--pc-button-vertical-padding)) - calc(-1 * var(--p-space-300)); + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom vertical margin */ + margin-block: calc(-1 * var(--pc-button-vertical-padding)); + margin-inline: calc(-1 * var(--p-space-300)); background: transparent; border: 0; box-shadow: none; @@ -768,9 +765,7 @@ } &.sizeLarge { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property - margin: calc(-1 * var(--pc-button-large-vertical-padding)) - calc(-1 * var(--p-space-500)); + margin: calc(-1 * var(var(--p-space-200))) calc(-1 * var(--p-space-500)); } &.iconOnly { @@ -849,10 +844,8 @@ } &.sizeLarge { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- custom properties - padding-left: var(--pc-button-large-vertical-padding); - padding-right: var(--pc-button-large-vertical-padding); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- custom properties + padding-left: var(var(--p-space-200)); + padding-right: var(var(--p-space-200)); @media #{$p-breakpoints-md-up} { padding-left: var(--p-space-150); @@ -919,11 +912,11 @@ } .sizeLarge { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom height */ min-height: var(--pc-button-large-min-height); + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom height */ min-width: var(--pc-button-large-min-height); - padding: var(--pc-button-large-vertical-padding) var(--p-space-300); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list + padding: var(var(--p-space-200)) var(--p-space-300); .Content { font-size: var(--p-font-size-325); @@ -991,8 +984,7 @@ text-decoration: underline; } } -// stylelint-enable selector-max-specificity, selector-max-class -// stylelint-disable selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + [data-buttongroup-variant='segmented'] { .Button, .Button::after { @@ -1004,6 +996,7 @@ clip-path: none !important; } + /* stylelint-disable selector-max-combinators -- necessary nesting depth */ > :first-child .Button, > :first-child .Button::before, > :first-child .Button::after { @@ -1050,4 +1043,4 @@ width: 100%; } } -// stylelint-enable selector-max-combinators, selector-max-specificity +// stylelint-enable selector-max-specificity From 303e83300f1776ef86ea164e4acd87221794045f Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 13 Oct 2023 14:52:11 -0400 Subject: [PATCH 03/13] fix hacks --- polaris-react/src/components/ButtonGroup/ButtonGroup.scss | 5 +++++ .../components/ContextualSaveBar/ContextualSaveBar.scss | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss index 3ebe2767bac..185f6359969 100644 --- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss +++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss @@ -41,6 +41,11 @@ &:not(:first-child) { margin-left: calc(-1 * var(--p-space-025)); + + /* stylelint-disable-next-line selector-max-specificity, selector-no-qualifying-type, selector-max-combinators -- Primary buttons segment groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. */ + button[class*='Button-variantPrimary'] { + margin-left: calc(-1 * var(--p-space-025)); + } } } diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss index d1451f6157c..441faa2055a 100644 --- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss +++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss @@ -81,8 +81,8 @@ .ActionContainer { flex-shrink: 0; - & [class*='Polaris-Button--primary'], - & [class*='Button-primary'] { + & [class*='Polaris-Button--variantPrimary'], + & [class*='Button-variantPrimary'] { --pc-color-text: rgba(48, 48, 48, 1); --pc-button-text: var(--pc-color-text); --pc-button-color: rgba(255, 255, 255, 1); @@ -122,8 +122,8 @@ } } - & [class*='Polaris-Button--tertiary'], - & [class*='Button-tertiary'] { + & [class*='Polaris-Button--variantTertiary'], + & [class*='Button-variantTertiary'] { --pc-button-color: var(--p-color-bg-fill-inverse); --pc-button-color-hover: var(--p-color-bg-fill-inverse-hover); --pc-button-color-active: var(--p-color-bg-fill-inverse-active); From bd93d763b18fbff418b7d9634f582b4599c51947 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 24 Oct 2023 18:26:27 -0400 Subject: [PATCH 04/13] address comments --- polaris-react/src/components/Button/Button.scss | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 6ac748b7de9..7583bbb6758 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -765,7 +765,8 @@ } &.sizeLarge { - margin: calc(-1 * var(var(--p-space-200))) calc(-1 * var(--p-space-500)); + margin-block: calc(-1 * var(var(--p-space-200))); + margin-inline: calc(-1 * var(--p-space-500)); } &.iconOnly { @@ -916,7 +917,8 @@ min-height: var(--pc-button-large-min-height); /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom height */ min-width: var(--pc-button-large-min-height); - padding: var(var(--p-space-200)) var(--p-space-300); + padding-block: var(var(--p-space-200)); + padding-inline: var(--p-space-300); .Content { font-size: var(--p-font-size-325); @@ -947,15 +949,6 @@ } } - &.disabled { - color: currentColor; - opacity: 0.4; - - svg { - fill: currentColor; - } - } - // Prevents the loading spinner from overlapping the button’s text, while retaining its width. &.loading .Text { visibility: hidden; From f6ca39f6b52f9e45bc6061a79f5eb6241c792daf Mon Sep 17 00:00:00 2001 From: kyledurand Date: Thu, 2 Nov 2023 15:43:08 -0400 Subject: [PATCH 05/13] Fix monochromePlain disabled styles --- polaris-react/src/components/Button/Button.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 7583bbb6758..7ba830c7171 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -153,7 +153,7 @@ margin-left: var(--p-space-050); } - // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line selector-max-class -- necessary specificity .fullWidth.textAlignLeft &:last-child:not(:only-child) { margin-left: auto; } @@ -609,7 +609,8 @@ // target the content in pseudo-selectors, so we need higher specificity // in this case. // stylelint-disable selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY -.variantPlain { +.variantPlain, +.variantMonochromePlain { /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom vertical margin */ margin-block: calc(-1 * var(--pc-button-vertical-padding)); margin-inline: calc(-1 * var(--p-space-300)); From f962bcfb3eba221a22038c6bf983de9dee81537f Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 3 Nov 2023 09:51:55 -0400 Subject: [PATCH 06/13] fix: monochromePlain, add stories --- .../src/components/Button/Button.scss | 8 +++--- .../src/components/Button/Button.stories.tsx | 25 ++++++++++++++++++- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 7ba830c7171..33cd45d90e7 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -47,8 +47,8 @@ } // stylelint-disable selector-max-specificity -- focus styles - &:focus:not(.variantPrimary):not(.variantPlain):not(.variantTertiary), - &:focus-visible:not(.variantPrimary):not(.variantPlain):not(.variantTertiary) { + &:focus:not(.variantPrimary):not(.variantTertiary):not(.variantPlain):not(.variantMonochromePlain), + &:focus-visible:not(.variantPrimary):not(.variantTertiary):not(.variantPlain):not(.variantMonochromePlain) { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property box-shadow: var(--pc-button-shadow); } @@ -84,7 +84,7 @@ line-height: var(--p-font-line-height-400); } - .Button:not(.variantPlain) & { + .Button:not(.variantPlain):not(.variantMonochromePlain) & { width: 100%; } @@ -933,7 +933,7 @@ } } -.variantMonochromePlain { +.Button.variantMonochromePlain { color: currentColor; svg { diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx index 9394b661243..9c6b649fa3d 100644 --- a/polaris-react/src/components/Button/Button.stories.tsx +++ b/polaris-react/src/components/Button/Button.stories.tsx @@ -10,7 +10,6 @@ import { Box, Popover, ActionList, - Divider, } from '@shopify/polaris'; import { Plus, @@ -310,6 +309,30 @@ export function Plain() { ); } +export function MonochromePlain() { + return ( + + + + + + + + + + + + ); +} + export function Tertiary() { return ( From 98b961e2bd32533ed73130cb48c97979859b9212 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 3 Nov 2023 10:12:40 -0400 Subject: [PATCH 07/13] fix: monochrome disabled --- .../src/components/Button/Button.scss | 19 ++----------------- .../src/components/Button/Button.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 33cd45d90e7..a8411eddae7 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -955,23 +955,8 @@ visibility: hidden; } - &.iconOnly { - svg { - fill: currentColor; - } - - &.disabled { - color: var(--p-color-text-disabled); - - svg { - fill: currentColor; - } - } - - &:focus svg, - &:active svg { - fill: currentColor; - } + &.disabled { + color: var(--p-color-text-disabled); } .Text:not(.removeUnderline) { diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx index 9c6b649fa3d..ab854dd73ad 100644 --- a/polaris-react/src/components/Button/Button.stories.tsx +++ b/polaris-react/src/components/Button/Button.stories.tsx @@ -720,7 +720,7 @@ export function DisabledState() { {/* Visual check to ensure the button color is not inherited from the parent */} - From 4d3401328827f5ee316f4b4636d6871bd8344bf8 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 3 Nov 2023 11:08:23 -0400 Subject: [PATCH 08/13] fix: split primary button in web --- polaris-react/src/components/ButtonGroup/ButtonGroup.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss index 185f6359969..bb6473a39ba 100644 --- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss +++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss @@ -42,8 +42,9 @@ &:not(:first-child) { margin-left: calc(-1 * var(--p-space-025)); - /* stylelint-disable-next-line selector-max-specificity, selector-no-qualifying-type, selector-max-combinators -- Primary buttons segment groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. */ - button[class*='Button-variantPrimary'] { + /* stylelint-disable-next-line polaris/conventions/selector-disallowed-list, selector-max-specificity, selector-max-combinators -- Primary buttons segment groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. */ + [class*='Button-variantPrimary'], + [class*='Polaris-Button--variantPrimary'] { margin-left: calc(-1 * var(--p-space-025)); } } From b3d32fcf93c565bde989fd08ab2b1380a2c774ad Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 3 Nov 2023 11:24:55 -0400 Subject: [PATCH 09/13] Update polaris-react/src/components/Button/Button.scss Co-authored-by: Lo Kim --- polaris-react/src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index a8411eddae7..c6a12c16842 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -766,7 +766,7 @@ } &.sizeLarge { - margin-block: calc(-1 * var(var(--p-space-200))); + margin-block: calc(-1 * var(--p-space-200)); margin-inline: calc(-1 * var(--p-space-500)); } From 9f2cc37f41c9eef179e375dfc5084b09e2863778 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 3 Nov 2023 11:25:02 -0400 Subject: [PATCH 10/13] Update polaris-react/src/components/Button/Button.scss Co-authored-by: Lo Kim --- polaris-react/src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index c6a12c16842..b9342cc1271 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -918,7 +918,7 @@ min-height: var(--pc-button-large-min-height); /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom height */ min-width: var(--pc-button-large-min-height); - padding-block: var(var(--p-space-200)); + padding-block: var(--p-space-200); padding-inline: var(--p-space-300); .Content { From a33d90aec9244623b6e93c28d7a37cacf98b6557 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 3 Nov 2023 11:25:49 -0400 Subject: [PATCH 11/13] Update polaris-react/src/components/Button/Button.scss Co-authored-by: Lo Kim --- polaris-react/src/components/Button/Button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index b9342cc1271..1c7f6d7f7b7 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -846,8 +846,8 @@ } &.sizeLarge { - padding-left: var(var(--p-space-200)); - padding-right: var(var(--p-space-200)); + padding-left: var(--p-space-200); + padding-right: var(--p-space-200); @media #{$p-breakpoints-md-up} { padding-left: var(--p-space-150); From f3f977570f5f6b081a6e4c76d5353f566cd06b1a Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 3 Nov 2023 11:33:21 -0400 Subject: [PATCH 12/13] fix missing variantPrimary, remove jank code from buttongroup --- polaris-react/src/components/Button/Button.scss | 2 +- polaris-react/src/components/ButtonGroup/ButtonGroup.scss | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 1c7f6d7f7b7..557c74ec2c0 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -997,7 +997,7 @@ border-radius: var(--p-border-radius-200); } // Primary segmented button groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. - > :not(:first-child) .Button.primary { + > :not(:first-child) .Button.variantPrimary { margin-left: calc(-1 * var(--p-space-025)); } } diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss index bb6473a39ba..3ebe2767bac 100644 --- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss +++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss @@ -41,12 +41,6 @@ &:not(:first-child) { margin-left: calc(-1 * var(--p-space-025)); - - /* stylelint-disable-next-line polaris/conventions/selector-disallowed-list, selector-max-specificity, selector-max-combinators -- Primary buttons segment groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. */ - [class*='Button-variantPrimary'], - [class*='Polaris-Button--variantPrimary'] { - margin-left: calc(-1 * var(--p-space-025)); - } } } From e021e35266a3fd3e6e756b983f491ae90ac07e51 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 3 Nov 2023 12:25:35 -0400 Subject: [PATCH 13/13] update icons --- polaris-react/src/components/Button/Button.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx index ab854dd73ad..4e58fbac76b 100644 --- a/polaris-react/src/components/Button/Button.stories.tsx +++ b/polaris-react/src/components/Button/Button.stories.tsx @@ -314,10 +314,10 @@ export function MonochromePlain() { - - {/* Visual check to ensure the button color is not inherited from the parent */} -