[Button] Reduce code complexity

.changeset/afraid-rocks-happen.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Simplified `Button` code

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