diff --git a/.changeset/breezy-badgers-bow.md b/.changeset/breezy-badgers-bow.md
new file mode 100644
index 00000000000..57392e767f3
--- /dev/null
+++ b/.changeset/breezy-badgers-bow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added the ability to migrate prop values
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx
new file mode 100644
index 00000000000..cab4daf08c6
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+ return (
+ <>
+
+ Hello world
+
+
+ Hello world
+
+ >
+ );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx
new file mode 100644
index 00000000000..2dabc875afe
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+ return (
+ <>
+
+ Hello world
+
+
+ Hello world
+
+ >
+ );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
index 551f612f473..928a361c89b 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
@@ -16,7 +16,7 @@ const fixtures = [
componentName: 'MyComponent',
from: 'prop',
to: 'newProp',
- newValue: 'new-value',
+ toValue: 'new-value',
},
},
{
@@ -25,7 +25,7 @@ const fixtures = [
componentName: 'MyComponent.CompoundComponent',
from: 'prop',
to: 'newProp',
- newValue: 'new-value',
+ toValue: 'new-value',
},
},
{
@@ -34,7 +34,17 @@ const fixtures = [
componentName: 'MyComponent',
from: 'booleanProp',
to: 'variant',
- newValue: 'boolean-prop-value',
+ toValue: 'boolean-prop-value',
+ },
+ },
+ {
+ name: 'react-rename-component-prop-with-specific-value',
+ options: {
+ componentName: 'MyComponent',
+ from: 'prop',
+ to: 'variant',
+ fromValue: 'targetted-value',
+ toValue: 'new-targetted-value',
},
},
];
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
index 3011ce3c3de..aa2508035c6 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
@@ -8,22 +8,17 @@ export default function transformer(
options: Options,
) {
const componentParts = options.componentName?.split('.');
- if (
- !options.componentName ||
- !options.from ||
- !options.to ||
- componentParts?.length > 2
- ) {
+ const {componentName, from, to, fromValue, toValue} = options;
+ if (!componentName || !from || !to || 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 props = {[options.from]: options.to};
+ const props = {[from]: to};
- renameProps(j, source, componentName, props, options.newValue);
+ renameProps(j, source, componentName, props, fromValue, toValue);
return source.toSource();
}
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index a46c9e608c0..a63ab4dc6e9 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -127,7 +127,8 @@ export function renameProps(
source: Collection,
componentName: string,
props: {[from: string]: string},
- newValue?: string,
+ fromValue?: string,
+ toValue?: string,
) {
const [component, subcomponent] = componentName.split('.');
@@ -141,7 +142,7 @@ export function renameProps(
element.node.openingElement.name.property.name === subcomponent
) {
element.node.openingElement.attributes?.forEach((node) =>
- updateNode(node, props, newValue),
+ updateNode(node, props, fromValue, toValue),
);
}
});
@@ -151,7 +152,7 @@ export function renameProps(
// Handle basic components
source.findJSXElements(componentName)?.forEach((element) => {
element.node.openingElement.attributes?.forEach((node) =>
- updateNode(node, props, newValue),
+ updateNode(node, props, fromValue, toValue),
);
});
@@ -160,7 +161,8 @@ export function renameProps(
function updateNode(
node: any,
props: {[from: string]: string},
- newValue?: string,
+ fromValue?: string,
+ toValue?: string,
) {
const isFromProp = (prop: unknown): prop is keyof typeof props =>
Object.keys(props).includes(prop as string);
@@ -170,7 +172,8 @@ export function renameProps(
}
node.name.name = props[node.name.name];
- node.value = j.stringLiteral(newValue ?? node.value.value);
+ if (fromValue && node.value.value !== fromValue) return node;
+ node.value = j.stringLiteral(toValue ?? node.value.value);
return node;
}
}