[Button] Replace booleans with new props (#10090)

### WHY are these changes introduced? Fixes #10047 ### WHAT is this pull request doing? - Adds `variant` and `tone` props - Removes `primary`, `outline`, `plain`, `monochrome`, and `primarySuccess` booleans - Updates props on usages of `Button` - Renames `primaryPlain` variant to `tertiary`
Shopify · Aug 22, 2023 · 4caed28 · 4caed28
1 parent 92c3d96
commit 4caed28
Show file tree

Hide file tree

Showing 76 changed files with 286 additions and 612 deletions.
diff --git a/.changeset/silent-brooms-confess.md b/.changeset/silent-brooms-confess.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Consolidated boolean `Button` props into `variant` prop
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -51,3 +51,6 @@ Secondary, becomes oneThird:
 **HorizontalGrid**
 
 `npx @shopify/polaris-migrator react-rename-component <path> --renameFrom="HorizontalGrid" --renameTo="InlineGrid" --renamePropsFrom="HorizontalGridProps" --renamePropsTo="InlineGridProps"`
+
+**Button**
+// TODO
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -76,7 +76,7 @@ export function AccountConnection({
   ) : null;
 
   const actionElement = action
-    ? buttonFrom(action, {primary: !connected})
+    ? buttonFrom(action, {variant: connected ? undefined : 'primary'})
     : null;
 
   return (

diff --git a/polaris-react/src/components/AccountConnection/tests/AccountConnection.test.tsx b/polaris-react/src/components/AccountConnection/tests/AccountConnection.test.tsx
@@ -63,7 +63,7 @@ describe('<AccountConnection />', () => {
       expect(accountConnection).toContainReactComponent(Button, {
         children: action.content,
         onClick: action.onAction,
-        primary: true,
+        variant: 'primary',
       });
     });
 
@@ -78,7 +78,6 @@ describe('<AccountConnection />', () => {
       expect(accountConnection).toContainReactComponent(Button, {
         children: action.content,
         onClick: action.onAction,
-        primary: false,
       });
     });
   });

diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx
@@ -38,7 +38,6 @@ export function RollupActions({
   const activatorMarkup = (
     <div className={styles.RollupActivator}>
       <Button
-        outline
         icon={HorizontalDotsMinor}
         accessibilityLabel={
           accessibilityLabel ||

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
@@ -150,8 +150,7 @@ export function BannerLayout({
       ) : null,
     dismissButton: onDismiss ? (
       <Button
-        plain
-        primary
+        variant="tertiary"
         icon={
           <span
             className={

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -198,7 +198,7 @@
 
 .primary,
 .destructive,
-.primaryPlain {
+.tertiary {
   // 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
@@ -470,7 +470,7 @@
   }
 }
 
-.primaryPlain {
+.tertiary {
   // stylelint-disable -- Button custom properties
   --pc-button-color: transparent;
   --pc-button-text: var(--p-color-text);
@@ -584,91 +584,6 @@
   }
 }
 
-.outline {
-  background: transparent;
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-  color: var(--p-color-text);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: 1px);
-
-  &:hover {
-    border: var(--p-border-width-1) solid var(--p-color-border);
-    box-shadow: none;
-    background: var(--p-color-bg-hover);
-  }
-
-  &:focus-visible {
-    border: var(--p-border-width-1) solid var(--p-color-border);
-    box-shadow: none;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-  }
-
-  &:active {
-    border: var(--p-border-width-1) solid var(--p-color-border);
-    box-shadow: none;
-    background: var(--p-color-bg-active);
-
-    &::after {
-      box-shadow: none;
-    }
-  }
-
-  &.pressed {
-    background: var(--p-color-bg-subdued-active);
-    border: var(--p-border-width-1) solid var(--p-color-border);
-    box-shadow: none;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    color: var(--pc-button-text);
-  }
-
-  &.disabled {
-    border: var(--p-border-width-1) solid var(--p-color-border-disabled);
-    color: var(--p-color-text-disabled);
-  }
-
-  &.destructive {
-    background: transparent;
-    border: var(--p-border-width-1) solid var(--p-color-border-critical);
-    box-shadow: none;
-    color: var(--p-color-text-critical);
-
-    svg {
-      fill: var(--p-color-icon-critical);
-    }
-
-    &:hover {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
-    }
-
-    &:focus-visible {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include focus-ring($style: 'focused');
-    }
-
-    &:active {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
-    }
-
-    // stylelint-disable-next-line selector-max-class -- too many classes
-    &.disabled {
-      border: var(--p-border-width-1) solid var(--p-color-border-disabled);
-      color: var(--p-color-text-disabled);
-    }
-
-    // stylelint-disable-next-line selector-max-class -- too many classes
-    &.pressed {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
-      color: var(--p-color-text-critical);
-    }
-  }
-}
-
 .disabled {
   cursor: default;
   pointer-events: none;
@@ -1024,7 +939,6 @@
 }
 
 .monochrome {
-  &.outline,
   &.plain {
     color: currentColor;
 
@@ -1070,72 +984,11 @@
         fill: currentColor;
       }
     }
-  }
 
-  &.plain {
     .Text:not(.removeUnderline) {
       text-decoration: underline;
     }
   }
-
-  &.outline {
-    position: relative;
-    border-color: currentColor;
-    box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($border-width: 2px);
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: currentColor;
-      opacity: 0;
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      z-index: 0;
-    }
-
-    &.pressed {
-      background: transparent;
-      box-shadow: none;
-      color: currentColor;
-
-      &::before {
-        opacity: 0.2;
-      }
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: transparent;
-      border-color: currentColor;
-
-      &::before {
-        opacity: 0.07;
-      }
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include focus-ring($style: 'focused');
-    }
-
-    &:active::after {
-      box-shadow: none;
-    }
-
-    &:hover,
-    &:active {
-      &::before {
-        opacity: 0.05;
-      }
-    }
-  }
 }
 // stylelint-enable selector-max-specificity, selector-max-class
 
@@ -1160,12 +1013,6 @@
   &.primary,
   &.destructive {
     margin-left: calc(var(--p-space-05) * -1);
-
-    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
-    &.outline {
-      margin-left: 0;
-      border-left: 0;
-    }
   }
 
   &:active {