From f279b63f9fb9940f175c62f4a607ca39f3471cbc Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 25 Aug 2023 10:14:12 -0700
Subject: [PATCH 01/22] Add remove prop util

---
 polaris-migrator/src/utilities/jsx.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index a46c9e608c0..ba32c67f8a4 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -175,6 +175,21 @@ export function renameProps(
   }
 }
 
+export function removeProp(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  componentName: string,
+  prop: string,
+) {
+  source
+    .findJSXElements(componentName)
+    .find(j.JSXAttribute)
+    .filter((path) => path.node.name.name === prop)
+    .remove();
+
+  return source;
+}
+
 export function insertJSXComment(
   j: core.JSCodeshift,
   element: ASTPath<any>,

From 9df6b7b76136e031176491912ccd8bc37c83a055 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 25 Aug 2023 10:14:25 -0700
Subject: [PATCH 02/22] scaffold out button migration

---
 .../tests/transform.test.ts                   | 20 ++++++++++++
 ...2-react-update-button-components.input.tsx | 21 ++++++++++++
 ...-react-update-button-components.output.tsx | 19 +++++++++++
 .../transform.ts                              | 32 +++++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
new file mode 100644
index 00000000000..9f8c8682b53
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
@@ -0,0 +1,20 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-update-button-components';
+const fixtures = [
+  {
+    name: 'v12-react-update-button-components',
+    options: {
+      componentName: 'Button',
+      removeProp: 'outline',
+    },
+  },
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture: fixture.name,
+    transform,
+    options: fixture.options,
+  });
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
new file mode 100644
index 00000000000..9c1b52195c8
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+const MyButton = Button;
+
+export function App() {
+  return (
+    <>
+      <MyButton outline destructive>
+        hello
+      </MyButton>
+      <Button destructive outline disabled={true}>
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large" monochrome outline>
+        Call
+      </Button>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
new file mode 100644
index 00000000000..94eb3f660fe
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+const MyButton = Button;
+
+export function App() {
+  return (
+    <>
+      <MyButton destructive>hello</MyButton>
+      <Button destructive disabled={true}>
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large" monochrome>
+        Call
+      </Button>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
new file mode 100644
index 00000000000..ae1a0be3a00
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -0,0 +1,32 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+
+import {removeProp} from '../../utilities/jsx';
+
+export interface MigrationOptions extends Options {
+  removeProp: string;
+}
+
+export default function transformer(
+  file: FileInfo,
+  {jscodeshift: j}: API,
+  options: MigrationOptions,
+) {
+  const componentParts = options.componentName?.split('.');
+  if (
+    !options.componentName ||
+    !options.removeProp ||
+    componentParts?.length > 2
+  ) {
+    throw new Error(
+      'Missing required options: componentName, from, to, or your compound component exceeds 2 levels',
+    );
+  }
+
+  const source = j(file.source);
+  const componentName = options.componentName;
+  const prop = options.removeProp;
+
+  removeProp(j, source, componentName, prop);
+
+  return source.toSource();
+}

From 444cf5c2fee7a9eb365dca20f0b032a2b596c717 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 25 Aug 2023 14:01:04 -0700
Subject: [PATCH 03/22] Button migration remove prop

---
 ...2-react-update-button-components.input.tsx |  7 +-----
 ...-react-update-button-components.output.tsx |  5 +---
 .../transform.ts                              | 23 ++++---------------
 3 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index 9c1b52195c8..c5d5d56d448 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -2,15 +2,10 @@ import React from 'react';
 import {Button} from '@shopify/polaris';
 import {PhoneMajor} from '@shopify/polaris-icons';
 
-const MyButton = Button;
-
 export function App() {
   return (
     <>
-      <MyButton outline destructive>
-        hello
-      </MyButton>
-      <Button destructive outline disabled={true}>
+      <Button destructive outline disabled>
         Delete App
       </Button>
       <Button icon={PhoneMajor} size="large" monochrome outline>
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index 94eb3f660fe..475eae6e9fb 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -2,13 +2,10 @@ import React from 'react';
 import {Button} from '@shopify/polaris';
 import {PhoneMajor} from '@shopify/polaris-icons';
 
-const MyButton = Button;
-
 export function App() {
   return (
     <>
-      <MyButton destructive>hello</MyButton>
-      <Button destructive disabled={true}>
+      <Button destructive disabled>
         Delete App
       </Button>
       <Button icon={PhoneMajor} size="large" monochrome>
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index ae1a0be3a00..721bf326399 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -2,31 +2,16 @@ import type {API, FileInfo, Options} from 'jscodeshift';
 
 import {removeProp} from '../../utilities/jsx';
 
-export interface MigrationOptions extends Options {
-  removeProp: string;
-}
-
 export default function transformer(
   file: FileInfo,
   {jscodeshift: j}: API,
-  options: MigrationOptions,
+  _: Options,
 ) {
-  const componentParts = options.componentName?.split('.');
-  if (
-    !options.componentName ||
-    !options.removeProp ||
-    componentParts?.length > 2
-  ) {
-    throw new Error(
-      'Missing required options: componentName, from, to, or your compound component exceeds 2 levels',
-    );
-  }
-
   const source = j(file.source);
-  const componentName = options.componentName;
-  const prop = options.removeProp;
+  const componentName = 'Button';
 
-  removeProp(j, source, componentName, prop);
+  // Remove `outline` prop from Button
+  removeProp(j, source, componentName, 'outline');
 
   return source.toSource();
 }

From 793079ecf7bec7407183cc8bcc971fc410f26023 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Mon, 28 Aug 2023 10:06:23 -0700
Subject: [PATCH 04/22] Handle `button` `plain` `primary` migration

Co-Authored-By: Lo Kim <26749317+laurkim@users.noreply.github.com>
---
 .../tests/transform.test.ts                   | 12 ++---
 ...2-react-update-button-components.input.tsx |  4 ++
 ...-react-update-button-components.output.tsx |  4 ++
 ...-button-primary-plain-components.input.tsx | 20 +++++++
 ...button-primary-plain-components.output.tsx | 20 +++++++
 .../transform.ts                              | 54 +++++++++++++++++--
 6 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
index 9f8c8682b53..ed6b76ee9ef 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
@@ -2,19 +2,13 @@ import {check} from '../../../utilities/check';
 
 const transform = 'v12-react-update-button-components';
 const fixtures = [
-  {
-    name: 'v12-react-update-button-components',
-    options: {
-      componentName: 'Button',
-      removeProp: 'outline',
-    },
-  },
+  'v12-react-update-button-components',
+  'v12-react-update-button-primary-plain-components',
 ];
 
 for (const fixture of fixtures) {
   check(__dirname, {
-    fixture: fixture.name,
+    fixture,
     transform,
-    options: fixture.options,
   });
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index c5d5d56d448..5a0d0603670 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -11,6 +11,10 @@ export function App() {
       <Button icon={PhoneMajor} size="large" monochrome outline>
         Call
       </Button>
+      <Button plain monochrome>
+        Edit
+      </Button>
+      <Button plain>Edit</Button>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index 475eae6e9fb..ba45017e676 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -11,6 +11,10 @@ export function App() {
       <Button icon={PhoneMajor} size="large" monochrome>
         Call
       </Button>
+      <Button plain monochrome>
+        Edit
+      </Button>
+      <Button plain>Edit</Button>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
new file mode 100644
index 00000000000..5c7e0528e62
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
@@ -0,0 +1,20 @@
+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 plain primary={isPolarisUplift}>
+        Edit
+      </Button>
+      <Button plain={isPolarisUplift} primary>
+        Edit
+      </Button>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
new file mode 100644
index 00000000000..418f7d74bd1
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
@@ -0,0 +1,20 @@
+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>
+      {/* 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>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index 721bf326399..932e1c94f06 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -1,15 +1,61 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
+import type {
+  API,
+  FileInfo,
+  JSXAttribute,
+  JSXOpeningElement,
+  Options,
+} from 'jscodeshift';
 
-import {removeProp} from '../../utilities/jsx';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import {hasImportDeclaration} from '../../utilities/imports';
+import {
+  insertJSXComment,
+  removeProp,
+  renameProps,
+  insertJSXAttribute,
+  removeJSXAttributes,
+} from '../../utilities/jsx';
 
 export default function transformer(
-  file: FileInfo,
+  fileInfo: FileInfo,
   {jscodeshift: j}: API,
   _: Options,
 ) {
-  const source = j(file.source);
+  const source = j(fileInfo.source);
   const componentName = 'Button';
 
+  if (!hasImportDeclaration(j, source, '@shopify/polaris')) {
+    return fileInfo.source;
+  }
+
+  // Rename `primary` `plain` to `variant=`tertiary`
+  source.findJSXElements(componentName).forEach((element) => {
+    const allAttributes =
+      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
+        .attributes ?? [];
+    const jsxAttributes = allAttributes as JSXAttribute[];
+    const primaryAttribute = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'primary',
+    );
+    const plainAttribute = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'plain',
+    );
+
+    if (primaryAttribute && plainAttribute) {
+      if (
+        primaryAttribute.value?.type === 'JSXExpressionContainer' ||
+        plainAttribute.value?.type === 'JSXExpressionContainer'
+      ) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+
+      insertJSXAttribute(j, element, 'variant', 'tertiary');
+      removeJSXAttributes(j, element, 'plain');
+      removeJSXAttributes(j, element, 'primary');
+    }
+  });
+
   // Remove `outline` prop from Button
   removeProp(j, source, componentName, 'outline');
 

From ae9ab668b6d81782a63e29e42db5e48bcabb893f Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Mon, 28 Aug 2023 14:02:04 -0700
Subject: [PATCH 05/22] Handle `Button` `plain` `monochrome` bools to variant

---
 .../steps/replace-bool-props-with-variant.ts  | 72 +++++++++++++++++++
 .../tests/transform.test.ts                   |  1 +
 ...2-react-update-button-components.input.tsx |  3 -
 ...-react-update-button-components.output.tsx |  3 -
 ...tton-plain-monochrome-components.input.tsx | 24 +++++++
 ...ton-plain-monochrome-components.output.tsx | 22 ++++++
 ...-button-primary-plain-components.input.tsx |  4 ++
 ...button-primary-plain-components.output.tsx |  2 +
 .../transform.ts                              | 65 ++++++-----------
 9 files changed, 148 insertions(+), 48 deletions(-)
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts
new file mode 100644
index 00000000000..377ae26039a
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts
@@ -0,0 +1,72 @@
+import type {
+  JSXOpeningElement,
+  JSXAttribute,
+  ASTPath,
+  Collection,
+} from 'jscodeshift';
+import type core from 'jscodeshift';
+
+import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
+import {
+  insertJSXComment,
+  insertJSXAttribute,
+  removeJSXAttributes,
+} from '../../../utilities/jsx';
+
+export function replaceBoolPropsWithVariant(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  componentName: string,
+  prop1: string,
+  prop2: string,
+  variantValue: string,
+) {
+  source.findJSXElements(componentName).forEach((element: ASTPath<any>) => {
+    const allAttributes =
+      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
+        .attributes ?? [];
+    const jsxAttributes = allAttributes as JSXAttribute[];
+    const attribute1 = jsxAttributes.find(
+      (attribute) => attribute.name.name === prop1,
+    );
+    const attribute2 = jsxAttributes.find(
+      (attribute) => attribute.name.name === prop2,
+    );
+
+    if (attribute1 && attribute2) {
+      if (
+        attribute1.value?.type === 'JSXExpressionContainer' ||
+        attribute2.value?.type === 'JSXExpressionContainer'
+      ) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+
+      // Handle self-closing elements
+      if (
+        element.node.openingElement.selfClosing === true &&
+        element.node.openingElement.name.type === 'JSXIdentifier'
+      ) {
+        // Add variant prop
+        element.node.openingElement.attributes = [
+          ...element.node.openingElement.attributes,
+          j.jsxAttribute(
+            j.jsxIdentifier('variant'),
+            j.stringLiteral(variantValue),
+          ),
+        ];
+
+        attribute1.name.name = '';
+        attribute1.value = null;
+        attribute2.name.name = '';
+        attribute2.value = null;
+        return;
+      }
+
+      // Handle regular elements
+      insertJSXAttribute(j, element, 'variant', variantValue);
+      removeJSXAttributes(j, element, prop2);
+      removeJSXAttributes(j, element, prop1);
+    }
+  });
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
index ed6b76ee9ef..86df8f2a4bd 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
@@ -4,6 +4,7 @@ const transform = 'v12-react-update-button-components';
 const fixtures = [
   'v12-react-update-button-components',
   'v12-react-update-button-primary-plain-components',
+  'v12-react-update-button-plain-monochrome-components',
 ];
 
 for (const fixture of fixtures) {
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index 5a0d0603670..706152ef981 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -11,9 +11,6 @@ export function App() {
       <Button icon={PhoneMajor} size="large" monochrome outline>
         Call
       </Button>
-      <Button plain monochrome>
-        Edit
-      </Button>
       <Button plain>Edit</Button>
     </>
   );
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index ba45017e676..7b43210190a 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -11,9 +11,6 @@ export function App() {
       <Button icon={PhoneMajor} size="large" monochrome>
         Call
       </Button>
-      <Button plain monochrome>
-        Edit
-      </Button>
       <Button plain>Edit</Button>
     </>
   );
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx
new file mode 100644
index 00000000000..f9f2bf5aeaa
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.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 />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx
new file mode 100644
index 00000000000..0b31d175342
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.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" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
index 5c7e0528e62..086825057ba 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
@@ -9,12 +9,16 @@ export function App() {
       <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 />
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
index 418f7d74bd1..79ca57641ed 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
@@ -6,6 +6,7 @@ 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}>
@@ -15,6 +16,7 @@ export function App() {
       <Button plain={isPolarisUplift} primary>
         Edit
       </Button>
+      <Button icon={PhoneMajor} variant="tertiary" />
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index 932e1c94f06..f5b362e6510 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -1,20 +1,9 @@
-import type {
-  API,
-  FileInfo,
-  JSXAttribute,
-  JSXOpeningElement,
-  Options,
-} from 'jscodeshift';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {API, FileInfo, Options} from 'jscodeshift';
+
 import {hasImportDeclaration} from '../../utilities/imports';
-import {
-  insertJSXComment,
-  removeProp,
-  renameProps,
-  insertJSXAttribute,
-  removeJSXAttributes,
-} from '../../utilities/jsx';
+import {removeProp} from '../../utilities/jsx';
+
+import {replaceBoolPropsWithVariant} from './steps/replace-bool-props-with-variant';
 
 export default function transformer(
   fileInfo: FileInfo,
@@ -29,32 +18,24 @@ export default function transformer(
   }
 
   // Rename `primary` `plain` to `variant=`tertiary`
-  source.findJSXElements(componentName).forEach((element) => {
-    const allAttributes =
-      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
-        .attributes ?? [];
-    const jsxAttributes = allAttributes as JSXAttribute[];
-    const primaryAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'primary',
-    );
-    const plainAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'plain',
-    );
-
-    if (primaryAttribute && plainAttribute) {
-      if (
-        primaryAttribute.value?.type === 'JSXExpressionContainer' ||
-        plainAttribute.value?.type === 'JSXExpressionContainer'
-      ) {
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-
-      insertJSXAttribute(j, element, 'variant', 'tertiary');
-      removeJSXAttributes(j, element, 'plain');
-      removeJSXAttributes(j, element, 'primary');
-    }
-  });
+  replaceBoolPropsWithVariant(
+    j,
+    source,
+    componentName,
+    'plain',
+    'primary',
+    'tertiary',
+  );
+
+  // Rename `plain` `monochrome` to `variant=`plainMonochrome`
+  replaceBoolPropsWithVariant(
+    j,
+    source,
+    componentName,
+    'plain',
+    'monochrome',
+    'monochromePlain',
+  );
 
   // Remove `outline` prop from Button
   removeProp(j, source, componentName, 'outline');

From f486b16126b9185d86dd2654c4618cae0e031160 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Mon, 28 Aug 2023 14:37:13 -0700
Subject: [PATCH 06/22] Remove `monochrome` prop

---
 .../tests/v12-react-update-button-components.input.tsx        | 2 ++
 .../tests/v12-react-update-button-components.output.tsx       | 4 +++-
 .../v12-react-update-button-components/transform.ts           | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index 706152ef981..2d16f87cf17 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -12,6 +12,8 @@ export function App() {
         Call
       </Button>
       <Button plain>Edit</Button>
+      <Button monochrome>Monochrome</Button>
+      <Button outline>Outline</Button>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index 7b43210190a..3a2993840fb 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -8,10 +8,12 @@ export function App() {
       <Button destructive disabled>
         Delete App
       </Button>
-      <Button icon={PhoneMajor} size="large" monochrome>
+      <Button icon={PhoneMajor} size="large">
         Call
       </Button>
       <Button plain>Edit</Button>
+      <Button>Monochrome</Button>
+      <Button>Outline</Button>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index f5b362e6510..069551bc5d4 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -39,6 +39,7 @@ export default function transformer(
 
   // Remove `outline` prop from Button
   removeProp(j, source, componentName, 'outline');
+  removeProp(j, source, componentName, 'monochrome');
 
   return source.toSource();
 }

From 2df9a4ca7e0b31fa8477f123d81bb41feb70d151 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 30 Aug 2023 10:23:02 -0700
Subject: [PATCH 07/22] Update test cases

---
 .../v12-react-update-button-components.input.tsx      |  7 +++++++
 .../v12-react-update-button-components.output.tsx     | 11 +++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index 2d16f87cf17..df494d7d1be 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -14,6 +14,13 @@ export function App() {
       <Button plain>Edit</Button>
       <Button monochrome>Monochrome</Button>
       <Button outline>Outline</Button>
+      <Button destructive>Destructive</Button>
+      <Button destructive outline>
+        Destructive outline
+      </Button>
+      <Button destructive plain>
+        Destructive plain
+      </Button>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index 3a2993840fb..54fe1a7b3b1 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -5,15 +5,22 @@ import {PhoneMajor} from '@shopify/polaris-icons';
 export function App() {
   return (
     <>
-      <Button destructive disabled>
+      <Button disabled tone="critical">
         Delete App
       </Button>
       <Button icon={PhoneMajor} size="large">
         Call
       </Button>
-      <Button plain>Edit</Button>
+      <Button variant="plain">Edit</Button>
       <Button>Monochrome</Button>
       <Button>Outline</Button>
+      <Button tone="critical" variant="primary">
+        Destructive
+      </Button>
+      <Button tone="critical">Destructive outline</Button>
+      <Button tone="critical" variant="plain">
+        Destructive plain
+      </Button>
     </>
   );
 }

From 947a8d36930fbbdda03a11dd35a4502562b4b0a6 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:39:38 -0700
Subject: [PATCH 08/22] Update test cases

---
 .../tests/v12-react-update-button-components.output.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index 54fe1a7b3b1..c32c081af91 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -14,11 +14,11 @@ export function App() {
       <Button variant="plain">Edit</Button>
       <Button>Monochrome</Button>
       <Button>Outline</Button>
-      <Button tone="critical" variant="primary">
+      <Button variant="primary" tone="critical">
         Destructive
       </Button>
       <Button tone="critical">Destructive outline</Button>
-      <Button tone="critical" variant="plain">
+      <Button variant="plain" tone="critical">
         Destructive plain
       </Button>
     </>

From 18478cfcce5adbb9df108857ffec7e8201d6c9d0 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:41:35 -0700
Subject: [PATCH 09/22] Refactor migration

Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .../transform.ts                              | 283 ++++++++++++++++--
 polaris-migrator/src/utilities/jsx.ts         |  15 -
 2 files changed, 256 insertions(+), 42 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index 069551bc5d4..63bdd63d46e 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -1,9 +1,15 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
+import type {
+  API,
+  ASTPath,
+  FileInfo,
+  JSXAttribute,
+  JSXOpeningElement,
+  Options,
+} from 'jscodeshift';
 
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {hasImportDeclaration} from '../../utilities/imports';
-import {removeProp} from '../../utilities/jsx';
-
-import {replaceBoolPropsWithVariant} from './steps/replace-bool-props-with-variant';
+import {insertJSXComment} from '../../utilities/jsx';
 
 export default function transformer(
   fileInfo: FileInfo,
@@ -17,29 +23,252 @@ export default function transformer(
     return fileInfo.source;
   }
 
-  // Rename `primary` `plain` to `variant=`tertiary`
-  replaceBoolPropsWithVariant(
-    j,
-    source,
-    componentName,
-    'plain',
-    'primary',
-    'tertiary',
-  );
-
-  // Rename `plain` `monochrome` to `variant=`plainMonochrome`
-  replaceBoolPropsWithVariant(
-    j,
-    source,
-    componentName,
-    'plain',
-    'monochrome',
-    'monochromePlain',
-  );
-
-  // Remove `outline` prop from Button
-  removeProp(j, source, componentName, 'outline');
-  removeProp(j, source, componentName, 'monochrome');
+  // For each instance of a `Button` get all the attributes and update accordingly
+  source.findJSXElements(componentName).forEach((element: ASTPath<any>) => {
+    const openingElement = j(element).find(j.JSXOpeningElement).get()
+      .value as JSXOpeningElement;
+
+    const allAttributes = openingElement.attributes ?? [];
+    const jsxAttributes = allAttributes as JSXAttribute[];
+
+    const plain = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'plain',
+    );
+    const isPlainValid = plain?.value === null;
+    const monochrome = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'monochrome',
+    );
+    const isMonochromeValid = monochrome?.value === null;
+    const primary = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'primary',
+    );
+    const isPrimaryValid = primary?.value === null;
+    const primarySuccess = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'primarySuccess',
+    );
+    const isPrimarySuccessValid = primarySuccess?.value === null;
+    const outline = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'outline',
+    );
+    const isOutlineValid = outline?.value === null;
+    const destructive = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'destructive',
+    );
+    const isDestructiveValid = destructive?.value === null;
+
+    const variantAttributes = [
+      plain,
+      monochrome,
+      primary,
+      outline,
+      primarySuccess,
+    ].filter(Boolean);
+
+    let canRemovePlain = false;
+    let canRemoveMonochrome = false;
+    let canRemovePrimary = false;
+    let canRemoveOutline = false;
+    let canRemovePrimarySuccess = false;
+    let canRemoveDestructive = false;
+    let variantValue = '';
+    let toneValue = '';
+
+    if (plain) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (plain && primary && isPlainValid && isPrimaryValid) {
+        canRemovePlain = true;
+        canRemovePrimary = true;
+        variantValue = 'tertiary';
+      } else if (plain && monochrome && isPlainValid && isMonochromeValid) {
+        canRemovePlain = true;
+        canRemoveMonochrome = true;
+        variantValue = 'monochromePlain';
+      } else if (plain && destructive && isPlainValid && isDestructiveValid) {
+        canRemovePlain = true;
+        canRemoveDestructive = true;
+        variantValue = 'plain';
+        toneValue = 'critical';
+      } else if (plain && isPlainValid) {
+        canRemovePlain = true;
+        variantValue = 'plain';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (monochrome) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (monochrome && outline && isMonochromeValid && isOutlineValid) {
+        canRemoveMonochrome = true;
+        canRemoveOutline = true;
+      } else if (plain && monochrome && isPlainValid && isMonochromeValid) {
+        canRemovePlain = true;
+        canRemoveMonochrome = true;
+        variantValue = 'monochromePlain';
+      } else if (monochrome && isMonochromeValid) {
+        canRemoveMonochrome = true;
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (primary) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (plain && primary && isPlainValid && isPrimaryValid) {
+        canRemovePlain = true;
+        canRemovePrimary = true;
+        variantValue = 'tertiary';
+      } else if (
+        primary &&
+        destructive &&
+        isPrimaryValid &&
+        isDestructiveValid
+      ) {
+        canRemovePrimary = true;
+        canRemoveDestructive = true;
+        variantValue = 'primary';
+        toneValue = 'critical';
+      } else if (primary && isPrimaryValid) {
+        canRemovePrimary = true;
+        variantValue = 'primary';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (outline) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (outline && destructive && isOutlineValid && isDestructiveValid) {
+        canRemoveOutline = true;
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else if (monochrome && outline && isMonochromeValid && isOutlineValid) {
+        canRemoveMonochrome = true;
+        canRemoveOutline = true;
+      } else if (outline && isOutlineValid) {
+        canRemoveOutline = true;
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (primarySuccess) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (primarySuccess && isPrimarySuccessValid) {
+        canRemovePrimarySuccess = true;
+        variantValue = 'primary';
+        toneValue = 'success';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (destructive) {
+      if (plain && destructive && isPlainValid && isDestructiveValid) {
+        canRemovePlain = true;
+        canRemoveDestructive = true;
+        variantValue = 'plain';
+        toneValue = 'critical';
+      } else if (
+        outline &&
+        destructive &&
+        isOutlineValid &&
+        isDestructiveValid
+      ) {
+        canRemoveOutline = true;
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else if (
+        primary &&
+        destructive &&
+        isPrimaryValid &&
+        isDestructiveValid
+      ) {
+        canRemovePrimary = true;
+        canRemoveDestructive = true;
+        variantValue = 'primary';
+        toneValue = 'critical';
+      } else if (
+        destructive &&
+        isDestructiveValid &&
+        variantAttributes.length === 0
+      ) {
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+        variantValue = 'primary';
+      } else if (destructive && isDestructiveValid) {
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (plain && canRemovePlain) {
+      plain.name.name = '';
+      plain.value = null;
+    }
+
+    if (monochrome && canRemoveMonochrome) {
+      monochrome.name.name = '';
+      monochrome.value = null;
+    }
+
+    if (primary && canRemovePrimary) {
+      primary.name.name = '';
+      primary.value = null;
+    }
+
+    if (outline && canRemoveOutline) {
+      outline.name.name = '';
+      outline.value = null;
+    }
+
+    if (primarySuccess && canRemovePrimarySuccess) {
+      primarySuccess.name.name = '';
+      primarySuccess.value = null;
+    }
+
+    if (destructive && canRemoveDestructive) {
+      destructive.name.name = '';
+      destructive.value = null;
+    }
+
+    if (variantValue && openingElement && openingElement.attributes) {
+      openingElement.attributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('variant'),
+          j.stringLiteral(variantValue),
+        ),
+      );
+    }
 
+    if (toneValue && openingElement && openingElement.attributes) {
+      openingElement.attributes.push(
+        j.jsxAttribute(j.jsxIdentifier('tone'), j.stringLiteral(toneValue)),
+      );
+    }
+  });
   return source.toSource();
 }
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index ba32c67f8a4..a46c9e608c0 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -175,21 +175,6 @@ export function renameProps(
   }
 }
 
-export function removeProp(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  componentName: string,
-  prop: string,
-) {
-  source
-    .findJSXElements(componentName)
-    .find(j.JSXAttribute)
-    .filter((path) => path.node.name.name === prop)
-    .remove();
-
-  return source;
-}
-
 export function insertJSXComment(
   j: core.JSCodeshift,
   element: ASTPath<any>,

From 70bc2897faa2175f06f678f8d8cccf2bc6c061f9 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:39:09 -0700
Subject: [PATCH 10/22] Add more test cases

---
 ...2-react-update-button-components.input.tsx | 33 ++++++++++++++++
 ...-react-update-button-components.output.tsx | 38 +++++++++++++++++++
 2 files changed, 71 insertions(+)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
index df494d7d1be..04983fb4dd3 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
@@ -3,6 +3,10 @@ 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>
@@ -15,12 +19,41 @@ export function App() {
       <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>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
index c32c081af91..a9a043a8209 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
@@ -3,6 +3,10 @@ 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">
@@ -17,10 +21,44 @@ export function App() {
       <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>
     </>
   );
 }

From 6645fee831768d5e5d9ba4cfeec9ad9e990bb010 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 31 Aug 2023 09:16:51 -0700
Subject: [PATCH 11/22] Add tests for self-closing case

---
 .../tests/transform.test.ts                   |  1 +
 ...react-update-button-self-closing.input.tsx | 45 +++++++++++++++++
 ...eact-update-button-self-closing.output.tsx | 48 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.output.tsx

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
index 86df8f2a4bd..2e5a43f1225 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
@@ -5,6 +5,7 @@ const fixtures = [
   'v12-react-update-button-components',
   'v12-react-update-button-primary-plain-components',
   'v12-react-update-button-plain-monochrome-components',
+  'v12-react-update-button-self-closing',
 ];
 
 for (const fixture of fixtures) {
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.input.tsx
new file mode 100644
index 00000000000..12d4a38b810
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/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}
+      />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.output.tsx
new file mode 100644
index 00000000000..5c3c4d8efa9
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/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}
+      />
+    </>
+  );
+}

From 8e4fb07c2170862fb210d7b61ac95644452f9f6a Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 31 Aug 2023 09:17:08 -0700
Subject: [PATCH 12/22] Delete replace-bool-props-with-variant.ts

---
 .../steps/replace-bool-props-with-variant.ts  | 72 -------------------
 1 file changed, 72 deletions(-)
 delete mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts
deleted file mode 100644
index 377ae26039a..00000000000
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/steps/replace-bool-props-with-variant.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type {
-  JSXOpeningElement,
-  JSXAttribute,
-  ASTPath,
-  Collection,
-} from 'jscodeshift';
-import type core from 'jscodeshift';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
-import {
-  insertJSXComment,
-  insertJSXAttribute,
-  removeJSXAttributes,
-} from '../../../utilities/jsx';
-
-export function replaceBoolPropsWithVariant(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  componentName: string,
-  prop1: string,
-  prop2: string,
-  variantValue: string,
-) {
-  source.findJSXElements(componentName).forEach((element: ASTPath<any>) => {
-    const allAttributes =
-      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
-        .attributes ?? [];
-    const jsxAttributes = allAttributes as JSXAttribute[];
-    const attribute1 = jsxAttributes.find(
-      (attribute) => attribute.name.name === prop1,
-    );
-    const attribute2 = jsxAttributes.find(
-      (attribute) => attribute.name.name === prop2,
-    );
-
-    if (attribute1 && attribute2) {
-      if (
-        attribute1.value?.type === 'JSXExpressionContainer' ||
-        attribute2.value?.type === 'JSXExpressionContainer'
-      ) {
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-
-      // Handle self-closing elements
-      if (
-        element.node.openingElement.selfClosing === true &&
-        element.node.openingElement.name.type === 'JSXIdentifier'
-      ) {
-        // Add variant prop
-        element.node.openingElement.attributes = [
-          ...element.node.openingElement.attributes,
-          j.jsxAttribute(
-            j.jsxIdentifier('variant'),
-            j.stringLiteral(variantValue),
-          ),
-        ];
-
-        attribute1.name.name = '';
-        attribute1.value = null;
-        attribute2.name.name = '';
-        attribute2.value = null;
-        return;
-      }
-
-      // Handle regular elements
-      insertJSXAttribute(j, element, 'variant', variantValue);
-      removeJSXAttributes(j, element, prop2);
-      removeJSXAttributes(j, element, prop1);
-    }
-  });
-}

From 266d0c79abb28c58e472ce3414ab099b9a8ee9b2 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 31 Aug 2023 09:24:34 -0700
Subject: [PATCH 13/22] Add comments

---
 .../v12-react-update-button-components/transform.ts        | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index 63bdd63d46e..7ee6148244d 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -31,6 +31,8 @@ export default function transformer(
     const allAttributes = openingElement.attributes ?? [];
     const jsxAttributes = allAttributes as JSXAttribute[];
 
+    // Find the boolean props we want to update
+    // and ensure they are not set to a conditional value
     const plain = jsxAttributes.find(
       (attribute) => attribute.name.name === 'plain',
     );
@@ -56,6 +58,7 @@ export default function transformer(
     );
     const isDestructiveValid = destructive?.value === null;
 
+    // A collection of the booleans that will be updated to a variant
     const variantAttributes = [
       plain,
       monochrome,
@@ -64,6 +67,7 @@ export default function transformer(
       primarySuccess,
     ].filter(Boolean);
 
+    // Set flags
     let canRemovePlain = false;
     let canRemoveMonochrome = false;
     let canRemovePrimary = false;
@@ -225,6 +229,7 @@ export default function transformer(
       }
     }
 
+    // Remove the boolean attributes based on the checks
     if (plain && canRemovePlain) {
       plain.name.name = '';
       plain.value = null;
@@ -255,6 +260,7 @@ export default function transformer(
       destructive.value = null;
     }
 
+    // Add the variant attribute based on the checks
     if (variantValue && openingElement && openingElement.attributes) {
       openingElement.attributes.push(
         j.jsxAttribute(
@@ -264,6 +270,7 @@ export default function transformer(
       );
     }
 
+    // Add the tone attribute based on the checks
     if (toneValue && openingElement && openingElement.attributes) {
       openingElement.attributes.push(
         j.jsxAttribute(j.jsxIdentifier('tone'), j.stringLiteral(toneValue)),

From 782961b9b63a62ec6aa070ad7cb5a2737f4fbf6c Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 31 Aug 2023 10:46:04 -0700
Subject: [PATCH 14/22] Clean up checks

---
 .../transform.ts                              | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index 7ee6148244d..afd6efc4bbc 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -77,20 +77,34 @@ export default function transformer(
     let variantValue = '';
     let toneValue = '';
 
+    // Checks for combinations
+    const isPrimaryAndPlain =
+      plain && primary && isPlainValid && isPrimaryValid;
+    const isPrimaryAndDestructive =
+      primary && destructive && isPrimaryValid && isDestructiveValid;
+    const isPlainAndMonochrome =
+      plain && monochrome && isPlainValid && isMonochromeValid;
+    const isPlainAndDestructive =
+      plain && destructive && isPlainValid && isDestructiveValid;
+    const isMonochromeAndOutline =
+      monochrome && outline && isMonochromeValid && isOutlineValid;
+    const isOutlineAndDestructive =
+      outline && destructive && isOutlineValid && isDestructiveValid;
+
     if (plain) {
       if (variantAttributes.length > 2) {
         insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
         return;
       }
-      if (plain && primary && isPlainValid && isPrimaryValid) {
+      if (isPrimaryAndPlain) {
         canRemovePlain = true;
         canRemovePrimary = true;
         variantValue = 'tertiary';
-      } else if (plain && monochrome && isPlainValid && isMonochromeValid) {
+      } else if (isPlainAndMonochrome) {
         canRemovePlain = true;
         canRemoveMonochrome = true;
         variantValue = 'monochromePlain';
-      } else if (plain && destructive && isPlainValid && isDestructiveValid) {
+      } else if (isPlainAndDestructive) {
         canRemovePlain = true;
         canRemoveDestructive = true;
         variantValue = 'plain';
@@ -109,10 +123,10 @@ export default function transformer(
         insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
         return;
       }
-      if (monochrome && outline && isMonochromeValid && isOutlineValid) {
+      if (isMonochromeAndOutline) {
         canRemoveMonochrome = true;
         canRemoveOutline = true;
-      } else if (plain && monochrome && isPlainValid && isMonochromeValid) {
+      } else if (isPlainAndMonochrome) {
         canRemovePlain = true;
         canRemoveMonochrome = true;
         variantValue = 'monochromePlain';
@@ -129,16 +143,11 @@ export default function transformer(
         insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
         return;
       }
-      if (plain && primary && isPlainValid && isPrimaryValid) {
+      if (isPrimaryAndPlain) {
         canRemovePlain = true;
         canRemovePrimary = true;
         variantValue = 'tertiary';
-      } else if (
-        primary &&
-        destructive &&
-        isPrimaryValid &&
-        isDestructiveValid
-      ) {
+      } else if (isPrimaryAndDestructive) {
         canRemovePrimary = true;
         canRemoveDestructive = true;
         variantValue = 'primary';
@@ -157,11 +166,11 @@ export default function transformer(
         insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
         return;
       }
-      if (outline && destructive && isOutlineValid && isDestructiveValid) {
+      if (isOutlineAndDestructive) {
         canRemoveOutline = true;
         canRemoveDestructive = true;
         toneValue = 'critical';
-      } else if (monochrome && outline && isMonochromeValid && isOutlineValid) {
+      } else if (isMonochromeAndOutline) {
         canRemoveMonochrome = true;
         canRemoveOutline = true;
       } else if (outline && isOutlineValid) {
@@ -188,26 +197,16 @@ export default function transformer(
     }
 
     if (destructive) {
-      if (plain && destructive && isPlainValid && isDestructiveValid) {
+      if (isPlainAndDestructive) {
         canRemovePlain = true;
         canRemoveDestructive = true;
         variantValue = 'plain';
         toneValue = 'critical';
-      } else if (
-        outline &&
-        destructive &&
-        isOutlineValid &&
-        isDestructiveValid
-      ) {
+      } else if (isOutlineAndDestructive) {
         canRemoveOutline = true;
         canRemoveDestructive = true;
         toneValue = 'critical';
-      } else if (
-        primary &&
-        destructive &&
-        isPrimaryValid &&
-        isDestructiveValid
-      ) {
+      } else if (isPrimaryAndDestructive) {
         canRemovePrimary = true;
         canRemoveDestructive = true;
         variantValue = 'primary';

From 41b6491f3b245303b458712721809afad00305b3 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 31 Aug 2023 10:48:39 -0700
Subject: [PATCH 15/22] Create neat-balloons-shop.md

---
 .changeset/neat-balloons-shop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/neat-balloons-shop.md

diff --git a/.changeset/neat-balloons-shop.md b/.changeset/neat-balloons-shop.md
new file mode 100644
index 00000000000..96a068148e5
--- /dev/null
+++ b/.changeset/neat-balloons-shop.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Added migration for `Button` component

From 43cd049fc33a53a4efe12dc6dd02a9e47814be17 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:10:11 -0700
Subject: [PATCH 16/22] Add check and test for local element name

---
 .../tests/transform.test.ts                    |  1 +
 ...12-react-update-button-local-name.input.tsx | 12 ++++++++++++
 ...2-react-update-button-local-name.output.tsx | 10 ++++++++++
 .../transform.ts                               | 18 ++++++++++++++----
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.output.tsx

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
index 2e5a43f1225..db6c4626f76 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
@@ -3,6 +3,7 @@ import {check} from '../../../utilities/check';
 const transform = 'v12-react-update-button-components';
 const fixtures = [
   'v12-react-update-button-components',
+  'v12-react-update-button-local-name',
   'v12-react-update-button-primary-plain-components',
   'v12-react-update-button-plain-monochrome-components',
   'v12-react-update-button-self-closing',
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.input.tsx
new file mode 100644
index 00000000000..2e648ea37e3
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/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>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.output.tsx
new file mode 100644
index 00000000000..0184b91337c
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/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>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
index afd6efc4bbc..721737bc5d7 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
@@ -8,7 +8,11 @@ import type {
 } from 'jscodeshift';
 
 import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
-import {hasImportDeclaration} from '../../utilities/imports';
+import {
+  getImportSpecifierName,
+  hasImportDeclaration,
+  hasImportSpecifier,
+} from '../../utilities/imports';
 import {insertJSXComment} from '../../utilities/jsx';
 
 export default function transformer(
@@ -17,14 +21,20 @@ export default function transformer(
   _: Options,
 ) {
   const source = j(fileInfo.source);
-  const componentName = 'Button';
 
-  if (!hasImportDeclaration(j, source, '@shopify/polaris')) {
+  // If `Button` component name is not imported, exit
+  if (
+    !hasImportDeclaration(j, source, '@shopify/polaris') &&
+    !hasImportSpecifier(j, source, 'Button', '@shopify/polaris')
+  ) {
     return fileInfo.source;
   }
 
+  const localElementName =
+    getImportSpecifierName(j, source, 'Button', '@shopify/polaris') || 'Button';
+
   // For each instance of a `Button` get all the attributes and update accordingly
-  source.findJSXElements(componentName).forEach((element: ASTPath<any>) => {
+  source.findJSXElements(localElementName).forEach((element: ASTPath<any>) => {
     const openingElement = j(element).find(j.JSXOpeningElement).get()
       .value as JSXOpeningElement;
 

From 01a7657c706289615c6c21df54a5ff022543cbd6 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:14:28 -0700
Subject: [PATCH 17/22] Update .changeset/neat-balloons-shop.md

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/neat-balloons-shop.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/neat-balloons-shop.md b/.changeset/neat-balloons-shop.md
index 96a068148e5..e8648219fca 100644
--- a/.changeset/neat-balloons-shop.md
+++ b/.changeset/neat-balloons-shop.md
@@ -1,5 +1,5 @@
 ---
-'@shopify/polaris-migrator': patch
+'@shopify/polaris-migrator': minor
 ---
 
 Added migration for `Button` component

From b673ac734971c44db0c8f8ed46b445da8afe200e Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:23:15 -0700
Subject: [PATCH 18/22] Rename migration to singular

---
 .../tests/transform.test.ts                               | 8 ++++----
 .../tests/v12-react-update-button-component.input.tsx}    | 0
 .../tests/v12-react-update-button-component.output.tsx}   | 0
 .../tests/v12-react-update-button-local-name.input.tsx    | 0
 .../tests/v12-react-update-button-local-name.output.tsx   | 0
 ...ct-update-button-plain-monochrome-component.input.tsx} | 0
 ...t-update-button-plain-monochrome-component.output.tsx} | 0
 ...react-update-button-primary-plain-component.input.tsx} | 0
 ...eact-update-button-primary-plain-component.output.tsx} | 0
 .../tests/v12-react-update-button-self-closing.input.tsx  | 0
 .../tests/v12-react-update-button-self-closing.output.tsx | 0
 .../transform.ts                                          | 0
 12 files changed, 4 insertions(+), 4 deletions(-)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/tests/transform.test.ts (54%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx => v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx => v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/tests/v12-react-update-button-local-name.input.tsx (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/tests/v12-react-update-button-local-name.output.tsx (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx => v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx => v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx => v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx => v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx} (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/tests/v12-react-update-button-self-closing.input.tsx (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/tests/v12-react-update-button-self-closing.output.tsx (100%)
 rename polaris-migrator/src/migrations/{v12-react-update-button-components => v12-react-update-button-component}/transform.ts (100%)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
similarity index 54%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
index db6c4626f76..b922361c8e7 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
@@ -1,11 +1,11 @@
 import {check} from '../../../utilities/check';
 
-const transform = 'v12-react-update-button-components';
+const transform = 'v12-react-update-button-component';
 const fixtures = [
-  'v12-react-update-button-components',
+  'v12-react-update-button-component',
   'v12-react-update-button-local-name',
-  'v12-react-update-button-primary-plain-components',
-  'v12-react-update-button-plain-monochrome-components',
+  'v12-react-update-button-primary-plain-component',
+  'v12-react-update-button-plain-monochrome-component',
   'v12-react-update-button-self-closing',
 ];
 
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.input.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-components.output.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.input.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-local-name.output.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.input.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-plain-monochrome-components.output.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.input.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-primary-plain-components.output.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.input.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/tests/v12-react-update-button-self-closing.output.tsx
rename to polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
similarity index 100%
rename from polaris-migrator/src/migrations/v12-react-update-button-components/transform.ts
rename to polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts

From 4f78b26efcdaa614347d0d6e6aefa1c750ab5231 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:25:44 -0700
Subject: [PATCH 19/22] Fix conditional check

---
 .../v12-react-update-button-component/transform.ts          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
index 721737bc5d7..4b0475a6d47 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -24,8 +24,10 @@ export default function transformer(
 
   // If `Button` component name is not imported, exit
   if (
-    !hasImportDeclaration(j, source, '@shopify/polaris') &&
-    !hasImportSpecifier(j, source, 'Button', '@shopify/polaris')
+    !(
+      hasImportDeclaration(j, source, '@shopify/polaris') &&
+      hasImportSpecifier(j, source, 'Button', '@shopify/polaris')
+    )
   ) {
     return fileInfo.source;
   }

From 35831f0c79ea822d87b358489e46246bb26f90dd Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:43:14 -0700
Subject: [PATCH 20/22] Add check for spread sytax

---
 .../v12-react-update-button-component/transform.ts          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
index 4b0475a6d47..e0f386aa9b4 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -43,6 +43,12 @@ export default function transformer(
     const allAttributes = openingElement.attributes ?? [];
     const jsxAttributes = allAttributes as JSXAttribute[];
 
+    // Check for spread syntax on props
+    if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) {
+      insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+      return;
+    }
+
     // Find the boolean props we want to update
     // and ensure they are not set to a conditional value
     const plain = jsxAttributes.find(

From 7a771dd8575bf2c4fe587f337f2eea09fa664b69 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 09:49:46 -0700
Subject: [PATCH 21/22] Add checks for Identifiers and ButtonProps

Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 ...12-react-update-button-component.input.tsx |  6 +++++
 ...2-react-update-button-component.output.tsx | 11 ++++++++
 .../transform.ts                              | 27 +++++++++++++++++--
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
index 04983fb4dd3..c548eaafc9b 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
@@ -1,12 +1,16 @@
 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;
+
 export function App() {
   const hasFormError = false;
   const polarisSummerEditions2023Enabled = true;
   const disabled = false;
   const primary = true;
+  const MyButton = Button;
   return (
     <>
       <Button destructive outline disabled>
@@ -54,6 +58,8 @@ export function App() {
       >
         Button
       </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
index a9a043a8209..c6f068b38f4 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
@@ -1,12 +1,21 @@
 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;
+
 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">
@@ -59,6 +68,8 @@ export function App() {
       >
         Button
       </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
index e0f386aa9b4..9c8a427cd93 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -13,7 +13,7 @@ import {
   hasImportDeclaration,
   hasImportSpecifier,
 } from '../../utilities/imports';
-import {insertJSXComment} from '../../utilities/jsx';
+import {insertCommentBefore, insertJSXComment} from '../../utilities/jsx';
 
 export default function transformer(
   fileInfo: FileInfo,
@@ -26,7 +26,8 @@ export default function transformer(
   if (
     !(
       hasImportDeclaration(j, source, '@shopify/polaris') &&
-      hasImportSpecifier(j, source, 'Button', '@shopify/polaris')
+      (hasImportSpecifier(j, source, 'Button', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris'))
     )
   ) {
     return fileInfo.source;
@@ -35,6 +36,13 @@ export default function transformer(
   const localElementName =
     getImportSpecifierName(j, source, 'Button', '@shopify/polaris') || 'Button';
 
+  const localElementTypeName = getImportSpecifierName(
+    j,
+    source,
+    'ButtonProps',
+    '@shopify/polaris',
+  );
+
   // For each instance of a `Button` get all the attributes and update accordingly
   source.findJSXElements(localElementName).forEach((element: ASTPath<any>) => {
     const openingElement = j(element).find(j.JSXOpeningElement).get()
@@ -294,5 +302,20 @@ export default function transformer(
       );
     }
   });
+
+  source
+    .find(j.Identifier)
+    .filter(
+      (path) =>
+        path.node.name === localElementName ||
+        path.node.name === localElementTypeName,
+    )
+    .forEach((path) => {
+      if (path.node.type !== 'Identifier') return;
+
+      if (path.parent.value.type === 'ImportSpecifier') return;
+
+      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
+    });
   return source.toSource();
 }

From 32352e9e88c4694169a2aaf362f8751febe8da3d Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:42:08 -0700
Subject: [PATCH 22/22] Add check to not capture children of `MemberExpression`

Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .../tests/v12-react-update-button-component.input.tsx      | 4 ++++
 .../tests/v12-react-update-button-component.output.tsx     | 4 ++++
 .../v12-react-update-button-component/transform.ts         | 7 ++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
index c548eaafc9b..56c14974592 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
@@ -4,6 +4,9 @@ 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;
@@ -60,6 +63,7 @@ export function App() {
       </Button>
       <MyButton plain>My Button</MyButton>
       <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
index c6f068b38f4..ed3a7974399 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
@@ -7,6 +7,9 @@ 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;
@@ -70,6 +73,7 @@ export function App() {
       </Button>
       <MyButton plain>My Button</MyButton>
       <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
     </>
   );
 }
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
index 9c8a427cd93..fc6f5ff0968 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -313,7 +313,12 @@ export default function transformer(
     .forEach((path) => {
       if (path.node.type !== 'Identifier') return;
 
-      if (path.parent.value.type === 'ImportSpecifier') return;
+      if (
+        path.parent.value.type === 'ImportSpecifier' ||
+        path.parent.value.type === 'MemberExpression'
+      ) {
+        return;
+      }
 
       insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
     });