From 7e1044852a7041851e718d15ca774209c52583c7 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 15 Aug 2024 17:21:15 -0500 Subject: [PATCH] Update codemod and migration docs with latest changes (#6887) * upgrade migration docs with latest changes * update migration docs for avatar and numberfield * update codemods and snapshots for numberfield and taggroup * fix numberfield tests * update migration docs --- .storybook-s2/docs/Migrating.jsx | 86 +++++++++++------- .../__snapshots__/numberfield.test.ts.snap | 41 +++++++++ .../__snapshots__/taggroup.test.ts.snap | 17 ++-- .../s1-to-s2/__tests__/numberfield.test.ts | 42 +++++++++ .../src/s1-to-s2/src/codemods/changes.ts | 91 ++++++++++++------- 5 files changed, 206 insertions(+), 71 deletions(-) create mode 100644 packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap create mode 100644 packages/dev/codemods/src/s1-to-s2/__tests__/numberfield.test.ts diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx index a695e930146..8e0fdfda1e6 100644 --- a/.storybook-s2/docs/Migrating.jsx +++ b/.storybook-s2/docs/Migrating.jsx @@ -12,6 +12,18 @@ export function Migrating() {

An automated upgrade assistant is available by running the following command in the project you want to upgrade:

npx @react-spectrum/codemods s1-to-s2
+

To only upgrade specific components, provide a --components argument with a comma-separated list of components to upgrade:

+ + 
npx @react-spectrum/codemods s1-to-s2 --components=Button,TextField
+ +

The following arguments are also available:

+ + +

For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.

Note that [PENDING] indicates that future changes will occur before the final release, and the current solution should be considered temporary.

@@ -33,10 +45,13 @@ export function Migrating() {
  • Update Item to be a MenuItem
    • +

    AlertDialog

    +

    No updates needed.

    +

    Avatar

    Breadcrumbs

    @@ -50,8 +65,8 @@ export function Migrating() {

    Button

    @@ -116,8 +131,8 @@ export function Migrating() {

    DialogTrigger

    @@ -146,11 +161,13 @@ export function Migrating() {

    IllustratedMessage

    -

    No updates needed.

    +

    InlineAlert

    Item

    @@ -169,7 +186,7 @@ export function Migrating() {

    Link

    ListBox

    @@ -187,12 +204,20 @@ export function Migrating() {
  • [PENDING] Comment out closeOnSelect (it has not been implemented yet)
    • +

    NumberField

    + +

    Picker

    Section

    @@ -254,7 +279,7 @@ export function Migrating() {

    StatusLight

    SubmenuTrigger

    @@ -271,12 +296,9 @@ export function Migrating() {

    TagGroup

    @@ -285,8 +307,8 @@ export function Migrating() {
  • [PENDING] Comment out icon (it has not been implemented yet)
  • Remove isQuiet (it is no longer supported in Spectrum 2)
  • Remove placeholder (it has been removed due to accessibility issues)
    • -
  • Change validationState=“invalid” to isInvalid
    • -
  • Remove validationState=“valid” (it is no longer supported in Spectrum 2)
    • +
  • Change validationState="invalid" to isInvalid
    • +
  • Remove validationState="valid" (it is no longer supported in Spectrum 2)

    • TextField

    @@ -294,8 +316,8 @@ export function Migrating() {
  • [PENDING] Comment out icon (it has not been implemented yet)
  • Remove isQuiet (it is no longer supported in Spectrum 2)
  • Remove placeholder (it has been removed due to accessibility issues)
    • -
  • Change validationState=“invalid” to isInvalid
    • -
  • Remove validationState=“valid” (it is no longer supported in Spectrum 2)
    • +
  • Change validationState="invalid" to isInvalid
    • +
  • Remove validationState="valid" (it is no longer supported in Spectrum 2)

    • ToggleButton

    @@ -311,7 +333,7 @@ export function Migrating() {

    TooltipTrigger

    View

    diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap new file mode 100644 index 00000000000..682d470e152 --- /dev/null +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Comments out hideStepper 1`] = ` +"import { NumberField } from "@react-spectrum/s2"; + +
    + // TODO(S2-upgrade): hideStepper has not been implemented yet. + + // TODO(S2-upgrade): hideStepper has not been implemented yet. + +
    " +`; + +exports[`Removes isQuiet 1`] = ` +"import { NumberField } from "@react-spectrum/s2"; +let isQuiet = true; +let props = {isQuiet: true}; +
    + + + + + + +
    " +`; + +exports[`changes validationState to isInvalid or nothing 1`] = ` +"import { NumberField } from "@react-spectrum/s2"; +let validationState = 'invalid'; +let props = {validationState: 'invalid'}; +
    + + + + +
    " +`; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap index fdfcd729d6c..cb28f5c4531 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap @@ -76,20 +76,23 @@ import { Item } from '@adobe/react-spectrum'; let validationState = 'invalid'; let props = {validationState: 'invalid'};
    - // TODO(S2-upgrade): validationState has not been implemented yet. - + News - // TODO(S2-upgrade): validationState has not been implemented yet. News - // TODO(S2-upgrade): validationState has not been implemented yet. - + News - // TODO(S2-upgrade): validationState has not been implemented yet. - + News { + defineSnapshotTest(transform, {}, input, name); +}; + +test('Removes isQuiet', ` +import {NumberField} from '@adobe/react-spectrum'; +let isQuiet = true; +let props = {isQuiet: true}; +
    + + + + + + +
    +`); + +test('changes validationState to isInvalid or nothing', ` +import {NumberField} from '@adobe/react-spectrum'; +let validationState = 'invalid'; +let props = {validationState: 'invalid'}; +
    + + + + +
    +`); + +test('Comments out hideStepper', ` +import {NumberField} from '@adobe/react-spectrum'; + +
    + + +
    +`); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts index b10ee2313fd..f4cc810b1c8 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts @@ -639,6 +639,44 @@ export const changes: ChangesJSON = { } ] }, + NumberField: { + changes: [ + { + description: 'Remove isQuiet', + reason: 'It is no longer supported', + function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}} + }, + { + description: "Change validationState='invalid' to isInvalid", + reason: 'Updated API', + function: { + name: 'updatePropNameAndValue', + args: { + oldProp: 'validationState', + oldValue: 'invalid', + newProp: 'isInvalid', + newValue: true + } + } + }, + { + description: "Remove validationState='valid'", + reason: 'It is no longer supported', + function: { + name: 'removeProp', + args: {propToRemove: 'validationState', propValue: 'valid'} + } + }, + { + description: 'Comment out hideStepper', + reason: 'It has not been implemented yet', + function: { + name: 'commentOutProp', + args: {propToComment: 'hideStepper'} + } + } + ] + }, Picker: { changes: [ { @@ -953,51 +991,40 @@ export const changes: ChangesJSON = { TagGroup: { changes: [ { - description: 'Comment out actionLabel', - reason: 'It has not been implemented yet', + description: 'Change actionLabel to groupActionLabel', + reason: 'To match new onGroupAction prop', function: { - name: 'commentOutProp', - args: {propToComment: 'actionLabel'} - } - }, - { - description: 'Comment out onAction', - reason: 'It has not been implemented yet', - function: { - name: 'commentOutProp', - args: {propToComment: 'onAction'} - } - }, - { - description: 'Comment out maxRows', - reason: 'It has not been implemented yet', - function: { - name: 'commentOutProp', - args: {propToComment: 'maxRows'} + name: 'updatePropName', + args: {oldProp: 'actionLabel', newProp: 'groupActionLabel'} } }, { - description: 'Comment out errorMessage', - reason: 'It has not been implemented yet', + description: 'Change onAction to onGroupAction', + reason: 'To avoid confusion with existing onAction prop on other collection components', function: { - name: 'commentOutProp', - args: {propToComment: 'errorMessage'} + name: 'updatePropName', + args: {oldProp: 'onAction', newProp: 'onGroupAction'} } }, { - description: 'Comment out isInvalid', - reason: 'It has not been implemented yet', + description: "Change validationState='invalid' to isInvalid", + reason: 'Updated API', function: { - name: 'commentOutProp', - args: {propToComment: 'isInvalid'} + name: 'updatePropNameAndValue', + args: { + oldProp: 'validationState', + oldValue: 'invalid', + newProp: 'isInvalid', + newValue: true + } } }, { - description: 'Comment out validationState', - reason: 'isInvalid should be used when it becomes available', + description: "Remove validationState='valid'", + reason: 'It is no longer supported', function: { - name: 'commentOutProp', - args: {propToComment: 'validationState'} + name: 'removeProp', + args: {propToRemove: 'validationState', propValue: 'valid'} } } ]