diff --git a/.changeset/fresh-rats-pay.md b/.changeset/fresh-rats-pay.md new file mode 100644 index 00000000000..a81a8f6ab05 --- /dev/null +++ b/.changeset/fresh-rats-pay.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': patch +--- + +Add support to replace Identifiers along with JSXIdentifiers for Text migration diff --git a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-display-text.ts b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-display-text.ts index cc353ff0467..013166939d4 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-display-text.ts +++ b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-display-text.ts @@ -57,4 +57,11 @@ export function replaceDisplayText( insertJSXAttribute(j, element, 'as', 'p'); } }); + + source + .find(j.Identifier) + .filter((path) => path.node.name === localElementName) + .forEach((path) => { + path.node.name = 'Text'; + }); } diff --git a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-other.ts b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-other.ts index a4315f6da49..d74faf54394 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-other.ts +++ b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-other.ts @@ -76,5 +76,12 @@ export function replaceOther( insertJSXAttribute(j, element, 'visuallyHidden'); } }); + + source + .find(j.Identifier) + .filter((path) => path.node.name === localElementName) + .forEach((path) => { + path.node.name = 'Text'; + }); }); } diff --git a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-text-style.ts b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-text-style.ts index 6145ff0bbb9..fe2d7750050 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-text-style.ts +++ b/polaris-migrator/src/migrations/react-replace-text-components/steps/replace-text-style.ts @@ -113,4 +113,11 @@ export function replaceTextStyle( insertJSXAttribute(j, element, 'as', 'span'); } }); + + source + .find(j.Identifier) + .filter((path) => path.node.name === localElementName) + .forEach((path) => { + path.node.name = 'Text'; + }); } diff --git a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.input.tsx b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.input.tsx index e66f9b5041e..d81f72a0ae2 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.input.tsx +++ b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.input.tsx @@ -8,7 +8,12 @@ import { VisuallyHidden, } from '@shopify/polaris'; +const noop = (..._: any) => {}; + export function App() { + const textStyle = TextStyle; + noop(textStyle); + return ( <> Display text diff --git a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.output.tsx b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.output.tsx index 44dff8d6017..ea1cb7297b2 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.output.tsx +++ b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.output.tsx @@ -1,7 +1,12 @@ import React from 'react'; import {Text, InlineCode} from '@shopify/polaris'; +const noop = (..._: any) => {}; + export function App() { + const textStyle = Text; + noop(textStyle); + return ( <> @@ -16,16 +21,16 @@ export function App() { Display text - + Heading - + Heading - + Subheading - + Subheading diff --git a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.test.ts b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.test.ts index 6c475497c15..e8caefcafce 100644 --- a/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.test.ts +++ b/polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.test.ts @@ -1,7 +1,11 @@ import {check} from '../../../utilities/testUtils'; const migration = 'react-replace-text-components'; -const fixtures = ['with-relative']; +const fixtures = [ + 'react-replace-text-components', + 'with-identifier', + 'with-relative', +]; for (const fixture of fixtures) { check(__dirname, { diff --git a/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.input.tsx b/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.input.tsx new file mode 100644 index 00000000000..bf8d962ba5e --- /dev/null +++ b/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.input.tsx @@ -0,0 +1,27 @@ +import '@shopify/react-testing/matchers'; + +import React from 'react'; +import { + DisplayText, + Heading, + Subheading, + Caption, + TextStyle, + VisuallyHidden, +} from '@shopify/polaris'; + +const mount = (..._: any) => {}; +const MyComponent = () =>
; + +describe('MyComponent', () => { + it('renders', () => { + const container = mount(); + + expect(container).not.toContainReactComponent(DisplayText); + expect(container).not.toContainReactComponent(Heading); + expect(container).not.toContainReactComponent(Subheading); + expect(container).not.toContainReactComponent(Caption); + expect(container).not.toContainReactComponent(TextStyle); + expect(container).not.toContainReactComponent(VisuallyHidden); + }); +}); diff --git a/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.output.tsx b/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.output.tsx new file mode 100644 index 00000000000..148ce6375b3 --- /dev/null +++ b/polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.output.tsx @@ -0,0 +1,20 @@ +import '@shopify/react-testing/matchers'; + +import React from 'react'; +import {Text} from '@shopify/polaris'; + +const mount = (..._: any) => {}; +const MyComponent = () =>
; + +describe('MyComponent', () => { + it('renders', () => { + const container = mount(); + + expect(container).not.toContainReactComponent(Text); + expect(container).not.toContainReactComponent(Text); + expect(container).not.toContainReactComponent(Text); + expect(container).not.toContainReactComponent(Text); + expect(container).not.toContainReactComponent(Text); + expect(container).not.toContainReactComponent(Text); + }); +});