Update `react-replace-text-components` migration #7783

aaronccasanova · 2022-11-22T01:11:33Z

WHY are these changes introduced?

Resolves #7786.
Updates typography migration to insert comments for complex text migrations.

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

Co-authored-by: Lo Kim <laurkim@users.noreply.github.com>

laurkim · 2022-11-23T16:10:47Z

Added the Skip changelog label temporarily so that other CI checks run.

aaronccasanova · 2022-11-29T18:34:32Z

/snapit

github-actions · 2022-11-29T18:39:20Z

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221129183721

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221129183721

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221129183721

yarn add @shopify/polaris@0.0.0-snapshot-release-20221129183721

sam-b-rose · 2022-12-05T16:31:44Z

polaris-migrator/src/migrate.ts

      extensions: 'tsx,ts,jsx,js',
      parser: 'tsx',
      verbose: 2,
-      runInBand: true,


laurkim · 2022-12-07T18:23:08Z

/snapit

github-actions · 2022-12-07T18:27:10Z

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221207182522

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221207182522

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221207182522

yarn add @shopify/polaris@0.0.0-snapshot-release-20221207182522

sam-b-rose · 2023-01-03T16:18:59Z

Is this ready to be merged into main? @aaronccasanova

aaronccasanova · 2023-01-03T22:24:54Z

@samrose Thanks for the follow up. Lo mentioned before the holiday break that there are certain cases where legacy typography components are nested and replacements are causing styling/cascade issues. Before merging, I think we need to understand the issue further and decide if we can fix it programmatically or if we need to document a manual workflow.

samrose · 2023-01-04T01:40:13Z

@samrose3 they were looking for you ^^^

sam-b-rose · 2023-01-06T19:40:36Z

After trying out the snapshot of this migration on web, I noticed an edge-case we are missing with nested TextStyle components and injecting InlineCode:

<TextStyle>
  This is nested <TextStyle variation="code">InlineCode</TextStyle>
</TextStyle>

The above will not properly inject the InlineCode component. I've tried adjusting the migration script to account for this scenario but without luck. This is something we'll likely want to address or at least add a manual check comment.

aaronccasanova · 2023-01-07T00:03:04Z

Good catch @samrose3! The issue was the removeJSXAttributes util was removing variation attributes deeply. Here's my WIP fix: 5783997

sam-b-rose · 2023-01-07T13:48:30Z

/snapit

github-actions · 2023-01-07T13:52:23Z

🫰✨ Thanks @samrose3! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20230107135043

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230107135043

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230107135043

yarn add @shopify/polaris@0.0.0-snapshot-release-20230107135043

@henryyi

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris@10.19.0 ### Minor Changes - [#7817](#7817) [`6c310101d`](6c31010) Thanks [@henryyi](https://github.com/henryyi)! - Added `secondaryActions` prop in Navigation.Item to support up to two actions ### Patch Changes - [#8018](#8018) [`2620b0a20`](2620b0a) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed modal scroll bug ## @shopify/stylelint-polaris@5.1.0 ### Minor Changes - [#7993](#7993) [`128f147d1`](128f147) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Created `polaris/declaration-property-value-disallowed-list` rule to ignore failures in `@font-face` at-rules ### Patch Changes - [#8006](#8006) [`6404b1638`](6404b16) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Temporarily disabled `border-radius-base` error ## @shopify/plugin-polaris@0.0.26 ### Patch Changes - Updated dependencies \[[`fad3809ef`](fad3809), [`56b0bc2dc`](56b0bc2)]: - @shopify/polaris-migrator@0.10.3 ## @shopify/polaris-migrator@0.10.3 ### Patch Changes - [#7997](#7997) [`fad3809ef`](fad3809) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated `styles-tokenize-font` to ignore `@font-face` at-rules - [#7783](#7783) [`56b0bc2dc`](56b0bc2) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Improve robustness of the `react-replace-text-components` migration - Updated dependencies \[[`6404b1638`](6404b16), [`128f147d1`](128f147)]: - @shopify/stylelint-polaris@5.1.0 ## polaris.shopify.com@0.28.3 ### Patch Changes - Updated dependencies \[[`2620b0a20`](2620b0a), [`6c310101d`](6c31010)]: - @shopify/polaris@10.19.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Co-authored-by: Lo Kim <lo.kim@shopify.com>

@henryyi

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris@10.19.0 ### Minor Changes - [Shopify#7817](Shopify#7817) [`6c310101d`](Shopify@6c31010) Thanks [@henryyi](https://github.com/henryyi)! - Added `secondaryActions` prop in Navigation.Item to support up to two actions ### Patch Changes - [Shopify#8018](Shopify#8018) [`2620b0a20`](Shopify@2620b0a) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed modal scroll bug ## @shopify/stylelint-polaris@5.1.0 ### Minor Changes - [Shopify#7993](Shopify#7993) [`128f147d1`](Shopify@128f147) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Created `polaris/declaration-property-value-disallowed-list` rule to ignore failures in `@font-face` at-rules ### Patch Changes - [Shopify#8006](Shopify#8006) [`6404b1638`](Shopify@6404b16) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Temporarily disabled `border-radius-base` error ## @shopify/plugin-polaris@0.0.26 ### Patch Changes - Updated dependencies \[[`fad3809ef`](Shopify@fad3809), [`56b0bc2dc`](Shopify@56b0bc2)]: - @shopify/polaris-migrator@0.10.3 ## @shopify/polaris-migrator@0.10.3 ### Patch Changes - [Shopify#7997](Shopify#7997) [`fad3809ef`](Shopify@fad3809) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated `styles-tokenize-font` to ignore `@font-face` at-rules - [Shopify#7783](Shopify#7783) [`56b0bc2dc`](Shopify@56b0bc2) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Improve robustness of the `react-replace-text-components` migration - Updated dependencies \[[`6404b1638`](Shopify@6404b16), [`128f147d1`](Shopify@128f147)]: - @shopify/stylelint-polaris@5.1.0 ## polaris.shopify.com@0.28.3 ### Patch Changes - Updated dependencies \[[`2620b0a20`](Shopify@2620b0a), [`6c310101d`](Shopify@6c31010)]: - @shopify/polaris@10.19.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

aaronccasanova and others added 4 commits November 21, 2022 17:09

Initial DisplayText updates

fcdfb3f

Update migration to conditionally insert and remove declarations

8f0bb19

Initial TextStyle updates

beb421a

Co-authored-by: Lo Kim <laurkim@users.noreply.github.com>

Initial Heading, Subheading, Caption, and VisuallyHidden updates

49124f5

laurkim added the 🤖Skip Changelog Causes CI to ignore changelog update check. label Nov 23, 2022

laurkim and others added 2 commits November 23, 2022 15:23

Update TextStyle to account for TextStyleProps

19e5210

Improve robustness of replace-other step

15f6bdf

laurkim force-pushed the update-text-migration branch 3 times, most recently from 9c9ee88 to e5d9db9 Compare November 28, 2022 19:01

laurkim added 7 commits November 28, 2022 14:04

Update replace-display-text step to check for component type

5447039

Update replace-text-style step to check for component type

d33402e

Update replace-other step to check for component type

ee61343

Add tests for replace-other step type checks

baea724

Add tests for replace-text-style step type checks

e229a5a

Update react-replace-text-component test files

ff78431

Update hasImportDeclaration util to include type imports

b8db06b

laurkim force-pushed the update-text-migration branch from e5d9db9 to b8db06b Compare November 28, 2022 19:05

laurkim and others added 10 commits November 28, 2022 15:20

Update replace-display-text step when relative

8b15931

Update replace-other step when relative

98a8b51

Update replace-text-style step when relative

0ecda0c

Add relative test for replace-display-text step

2e1a6da

Add relative test for replace-other step

42f9395

Add relative test for replace-text-style step

e2dc3c3

Update root test file to include relative tests

5cdefaa

Fix tsconfig exclude pattern

36677e1

Add individual tests for conditional import removal

7b10b8e

Add more invalid/unsupported prop test cases

7d71066

aaronccasanova self-assigned this Nov 29, 2022

laurkim added #gsd:29805 and removed 🤖Skip Changelog Causes CI to ignore changelog update check. labels Nov 29, 2022

Update runner to execute migrations in parallel

b88da5b

laurkim changed the title ~~WIP Update react-replace-text-components migration~~ Update react-replace-text-components migration Dec 5, 2022

laurkim marked this pull request as ready for review December 5, 2022 15:43

laurkim requested review from sam-b-rose and laurkim December 5, 2022 15:44

laurkim approved these changes Dec 5, 2022

View reviewed changes

sam-b-rose reviewed Dec 5, 2022

View reviewed changes

polaris-migrator/src/migrate.ts

extensions: 'tsx,ts,jsx,js',

parser: 'tsx',

verbose: 2,

runInBand: true,

Copy link

Member

sam-b-rose Dec 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!! ⚡

sam-b-rose approved these changes Dec 5, 2022

View reviewed changes

Update removeJSXAttributes to only remove elements own attributes

5783997

Ignore unread variable warning

8ffd13d

aaronccasanova merged commit 56b0bc2 into main Jan 10, 2023

aaronccasanova deleted the update-text-migration branch January 10, 2023 19:50

shopify-github-actions-access bot mentioned this pull request Jan 10, 2023

Version Packages #7998

Merged

gwyneplaine mentioned this pull request Feb 14, 2023

8248/fix toc layout #8338

Merged

juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023

Update react-replace-text-components migration (Shopify#7783)

0ed147a

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update `react-replace-text-components` migration #7783

Update `react-replace-text-components` migration #7783

Uh oh!

aaronccasanova commented Nov 22, 2022 •

edited by laurkim

Loading

Uh oh!

laurkim commented Nov 23, 2022

Uh oh!

aaronccasanova commented Nov 29, 2022

Uh oh!

github-actions bot commented Nov 29, 2022

Uh oh!

sam-b-rose Dec 5, 2022

Uh oh!

laurkim commented Dec 7, 2022

Uh oh!

github-actions bot commented Dec 7, 2022

Uh oh!

sam-b-rose commented Jan 3, 2023

Uh oh!

aaronccasanova commented Jan 3, 2023

Uh oh!

samrose commented Jan 4, 2023

Uh oh!

sam-b-rose commented Jan 6, 2023

Uh oh!

aaronccasanova commented Jan 7, 2023

Uh oh!

sam-b-rose commented Jan 7, 2023

Uh oh!

github-actions bot commented Jan 7, 2023

Uh oh!

Uh oh!

Update react-replace-text-components migration #7783

Update react-replace-text-components migration #7783

Uh oh!

Conversation

aaronccasanova commented Nov 22, 2022 • edited by laurkim Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

laurkim commented Nov 23, 2022

Uh oh!

aaronccasanova commented Nov 29, 2022

Uh oh!

github-actions bot commented Nov 29, 2022

Uh oh!

sam-b-rose Dec 5, 2022

Choose a reason for hiding this comment

Uh oh!

laurkim commented Dec 7, 2022

Uh oh!

github-actions bot commented Dec 7, 2022

Uh oh!

sam-b-rose commented Jan 3, 2023

Uh oh!

aaronccasanova commented Jan 3, 2023

Uh oh!

samrose commented Jan 4, 2023

Uh oh!

sam-b-rose commented Jan 6, 2023

Uh oh!

aaronccasanova commented Jan 7, 2023

Uh oh!

sam-b-rose commented Jan 7, 2023

Uh oh!

github-actions bot commented Jan 7, 2023

Uh oh!

Uh oh!

Update `react-replace-text-components` migration #7783

Update `react-replace-text-components` migration #7783

aaronccasanova commented Nov 22, 2022 •

edited by laurkim

Loading