Migration update button component

.changeset/neat-balloons-shop.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added migration for `Button` component

polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts

@@ -0,0 +1,17 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-update-button-component';
+const fixtures = [
+  'v12-react-update-button-component',
+  'v12-react-update-button-local-name',
+  'v12-react-update-button-primary-plain-component',
+  'v12-react-update-button-plain-monochrome-component',
+  'v12-react-update-button-self-closing',
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+  });
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type {ButtonProps} from '@shopify/polaris';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+declare function CustomButton(props: ButtonProps): JSX.Element;
+declare const Styles: {
+  [className: string]: string;
+};
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  const MyButton = Button;
+  return (
+    <>
+      <Button destructive outline disabled>
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large" monochrome outline>
+        Call
+      </Button>
+      <Button plain>Edit</Button>
+      <Button monochrome>Monochrome</Button>
+      <Button outline>Outline</Button>
+      <Button destructive>Destructive</Button>
+      <Button primarySuccess>Primary success</Button>
+      <Button destructive outline>
+        Destructive outline
+      </Button>
+      <Button destructive plain>
+        Destructive plain
+      </Button>
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      >
+        Selected branch
+      </Button>
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      >
+        Content
+      </Button>
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      >
+        Button
+      </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type {ButtonProps} from '@shopify/polaris';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+declare function CustomButton(
+  props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  ButtonProps,
+): JSX.Element;
+declare const Styles: {
+  [className: string]: string;
+};
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  const MyButton =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    Button;
+  return (
+    <>
+      <Button disabled tone="critical">
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large">
+        Call
+      </Button>
+      <Button variant="plain">Edit</Button>
+      <Button>Monochrome</Button>
+      <Button>Outline</Button>
+      <Button variant="primary" tone="critical">
+        Destructive
+      </Button>
+      <Button variant="primary" tone="success">
+        Primary success
+      </Button>
+      <Button tone="critical">Destructive outline</Button>
+      <Button variant="plain" tone="critical">
+        Destructive plain
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      >
+        Selected branch
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      >
+        Content
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      >
+        Button
+      </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Button as MyButton} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <MyButton plain primary>
+        Edit
+      </MyButton>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {Button as MyButton} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <MyButton variant="tertiary">Edit</MyButton>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button plain monochrome>
+        Edit
+      </Button>
+      <Button monochrome plain>
+        Edit
+      </Button>
+      <Button plain monochrome={isPolarisUplift}>
+        Edit
+      </Button>
+      <Button plain={isPolarisUplift} monochrome>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} plain monochrome />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button variant="monochromePlain">Edit</Button>
+      <Button variant="monochromePlain">Edit</Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain monochrome={isPolarisUplift}>
+        Edit
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain={isPolarisUplift} monochrome>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} variant="monochromePlain" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button plain primary>
+        Edit
+      </Button>
+      <Button primary plain>
+        Edit
+      </Button>
+      <Button plain primary={isPolarisUplift}>
+        Edit
+      </Button>
+      <Button plain={isPolarisUplift} primary>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} plain primary />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button variant="tertiary">Edit</Button>
+      <Button variant="tertiary">Edit</Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain primary={isPolarisUplift}>
+        Edit
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain={isPolarisUplift} primary>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} variant="tertiary" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  return (
+    <>
+      <Button destructive outline disabled />
+      <Button icon={PhoneMajor} size="large" monochrome outline />
+      <Button plain />
+      <Button monochrome />
+      <Button outline />
+      <Button destructive />
+      <Button primarySuccess />
+      <Button destructive outline />
+      <Button destructive plain />
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      />
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      />
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  return (
+    <>
+      <Button disabled tone="critical" />
+      <Button icon={PhoneMajor} size="large" />
+      <Button variant="plain" />
+      <Button />
+      <Button />
+      <Button variant="primary" tone="critical" />
+      <Button variant="primary" tone="success" />
+      <Button tone="critical" />
+      <Button variant="plain" tone="critical" />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      />
+    </>
+  );
+}