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..557c74ec2c0 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;
@@ -48,12 +47,11 @@
}
// 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(.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);
}
- // stylelint-enable selector-max-specificity
&:hover {
// stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property
@@ -86,12 +84,12 @@
line-height: var(--p-font-line-height-400);
}
- .Button:not(.plain) & {
+ .Button:not(.variantPlain):not(.variantMonochromePlain) & {
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);
}
}
@@ -155,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;
}
@@ -179,9 +177,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 +237,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);
@@ -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
@@ -319,8 +316,8 @@
}
}
- &.critical,
- &.success {
+ &.toneCritical,
+ &.toneSuccess {
&::before {
left: 0.5px;
right: 0.5px;
@@ -356,7 +353,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 +400,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 +432,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 +462,7 @@
}
}
-.tertiary {
+.variantTertiary {
// stylelint-disable -- Button custom properties
--pc-button-color: transparent;
--pc-button-text: var(--p-color-text);
@@ -526,7 +523,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 +537,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 +564,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 +600,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,10 +609,11 @@
// 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 {
- // 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));
+.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));
background: transparent;
border: 0;
box-shadow: none;
@@ -716,7 +714,7 @@
}
}
- &.critical {
+ &.toneCritical {
color: var(--p-color-text-critical);
box-shadow: none;
@@ -768,9 +766,8 @@
}
&.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-block: calc(-1 * var(--p-space-200));
+ margin-inline: calc(-1 * var(--p-space-500));
}
&.iconOnly {
@@ -801,7 +798,7 @@
}
}
- &.critical.iconOnly {
+ &.toneCritical.iconOnly {
svg {
fill: var(--p-color-text-critical);
}
@@ -849,10 +846,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(--p-space-200);
+ padding-right: var(--p-space-200);
@media #{$p-breakpoints-md-up} {
padding-left: var(--p-space-150);
@@ -919,11 +914,12 @@
}
.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-block: var(--p-space-200);
+ padding-inline: var(--p-space-300);
.Content {
font-size: var(--p-font-size-325);
@@ -937,59 +933,37 @@
}
}
-.monochrome {
- &.plain {
+.Button.variantMonochromePlain {
+ color: currentColor;
+
+ svg {
+ fill: currentColor;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
color: currentColor;
svg {
fill: currentColor;
}
+ }
- &:hover,
- &:focus,
- &:active {
- color: currentColor;
-
- svg {
- fill: currentColor;
- }
- }
-
- &.disabled {
- color: var(--p-color-text-disabled);
-
- svg {
- fill: currentColor;
- }
- }
-
- // Prevents the loading spinner from overlapping the button’s text, while retaining its width.
- &.loading .Text {
- visibility: hidden;
- }
-
- &.iconOnly {
- svg {
- fill: currentColor;
- }
-
- &:focus svg,
- &:active svg {
- fill: currentColor;
- }
+ // Prevents the loading spinner from overlapping the button’s text, while retaining its width.
+ &.loading .Text {
+ visibility: hidden;
+ }
- &.disabled svg {
- fill: currentColor;
- }
- }
+ &.disabled {
+ color: var(--p-color-text-disabled);
+ }
- .Text:not(.removeUnderline) {
- text-decoration: underline;
- }
+ .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
+
[data-buttongroup-variant='segmented'] {
.Button,
.Button::after {
@@ -1001,6 +975,7 @@
clip-path: none !important;
}
+ /* stylelint-disable selector-max-combinators -- necessary nesting depth */
> :first-child .Button,
> :first-child .Button::before,
> :first-child .Button::after {
@@ -1022,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));
}
}
@@ -1047,4 +1022,4 @@
width: 100%;
}
}
-// stylelint-enable selector-max-combinators, selector-max-specificity
+// stylelint-enable selector-max-specificity
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 9394b661243..4e58fbac76b 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 (
@@ -697,7 +720,7 @@ export function DisabledState() {
{/* Visual check to ensure the button color is not inherited from the parent */}
-
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 ? (
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);