Skip to content

Commit 553c4ef

Browse files
reidbarberreidbarber
authored
chore(s2): update migration guide and codemods for release (#8242)
* remove "comment out isPending" * Combobox: remove "comment out loadingState" and "comment out onLoadMore" * update comment * fix import * Picker: remove "comment out is isLoading and onLoadMore" * TableViewL: add guide and codemod for "Move loadingState and onLoadMore from TableBody to TableView"
1 parent 50afba9 commit 553c4ef

File tree

13 files changed

+146
-41
lines changed

13 files changed

+146
-41
lines changed

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ export function Migrating() {
106106
<li className={style({font: 'body', marginY: 8})}>Change <Code>variant="cta"</Code> to <Code>variant="accent"</Code></li>
107107
<li className={style({font: 'body', marginY: 8})}>Change <Code>variant="overBackground"</Code> to <Code>variant="primary" staticColor="white"</Code></li>
108108
<li className={style({font: 'body', marginY: 8})}>Change <Code>style</Code> to <Code>fillStyle</Code></li>
109-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>isPending</Code> (it has not been implemented yet)</li>
110109
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
111110
<li className={style({font: 'body', marginY: 8})}>If <Code>href</Code> is present, the <Code>Button</Code> should be converted to a <Code>LinkButton</Code></li>
112111
<li className={style({font: 'body', marginY: 8})}>Remove <Code>elementType</Code> (it is no longer supported in Spectrum 2)</li>
@@ -153,11 +152,9 @@ export function Migrating() {
153152
<ul className="sb-unstyled">
154153
<li className={style({font: 'body', marginY: 8})}>Change <Code>menuWidth</Code> value from a <Code>DimensionValue</Code> to a pixel value</li>
155154
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
156-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>loadingState</Code> (it has not been implemented yet)</li>
157155
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it is no longer supported in Spectrum 2)</li>
158156
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
159157
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
160-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>onLoadMore</Code> (it has not been implemented yet)</li>
161158
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
162159
</ul>
163160

@@ -279,8 +276,6 @@ export function Migrating() {
279276
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
280277
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
281278
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
282-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>isLoading</Code> (it has not been implemented yet)</li>
283-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>onLoadMore</Code> (it has not been implemented yet)</li>
284279
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
285280
</ul>
286281

@@ -354,6 +349,7 @@ export function Migrating() {
354349
<li className={style({font: 'body', marginY: 8})}>For <Code>Column</Code> and <Code>Row</Code>: Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
355350
<li className={style({font: 'body', marginY: 8})}>For dynamic tables, pass a <Code>columns</Code> prop into <Code>Row</Code></li>
356351
<li className={style({font: 'body', marginY: 8})}>For <Code>Row</Code>: Update dynamic render function to pass in <Code>column</Code> instead of <Code>columnKey</Code></li>
352+
<li className={style({font: 'body', marginY: 8})}>Move <Code>loadingState</Code> and <Code>onLoadMore</Code> from <Code>TableBody</Code> to <Code>TableView</Code></li>
357353
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_allowsExpandableRows</Code> (it has not been implemented yet)</li>
358354
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_onExpandedChange</Code> (it has not been implemented yet)</li>
359355
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_expandedKeys</Code> (it has not been implemented yet)</li>

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/button.test.ts.snap

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Comments out isPending 1`] = `
4-
"import { Button } from "@react-spectrum/s2";
5-
6-
<div>
7-
// TODO(S2-upgrade): isPending has not been implemented yet.
8-
<Button>Test</Button>
9-
// TODO(S2-upgrade): isPending has not been implemented yet.
10-
<Button>Test</Button>
11-
</div>"
12-
`;
13-
143
exports[`Converts Button to LinkButton if it has href prop 1`] = `
154
"import { LinkButton, Button } from "@react-spectrum/s2";
165
@@ -36,6 +25,15 @@ import {FakeComponent} from 'fake-package';
3625
</div>"
3726
`;
3827

28+
exports[`Keeps isPending 1`] = `
29+
"import { Button } from "@react-spectrum/s2";
30+
31+
<div>
32+
<Button isPending>Test</Button>
33+
<Button isPending={true}>Test</Button>
34+
</div>"
35+
`;
36+
3937
exports[`Renames variants 1`] = `
4038
"import { Button } from "@react-spectrum/s2";
4139

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@ const items = [
4242
</div>"
4343
`;
4444

45+
exports[`Keeps loadingState and onLoadMore 1`] = `
46+
"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
47+
<>
48+
<ComboBox loadingState="loading" onLoadMore={() => {}}>
49+
<ComboBoxItem>Red Panda</ComboBoxItem>
50+
<ComboBoxItem>Cat</ComboBoxItem>
51+
</ComboBox>
52+
<ComboBox loadingState={true ? 'loading' : 'idle'} onLoadMore={() => {}}>
53+
<ComboBoxItem>Red Panda</ComboBoxItem>
54+
<ComboBoxItem>Cat</ComboBoxItem>
55+
</ComboBox>
56+
</>"
57+
`;
58+
4559
exports[`Removes isQuiet 1`] = `
4660
"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
4761
let isQuiet = true;

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,20 @@ let options = [
2525
</div>"
2626
`;
2727

28+
exports[`Keeps isLoading and onLoadMore 1`] = `
29+
"import { PickerItem, Picker } from "@react-spectrum/s2";
30+
<>
31+
<Picker label="Ice Cream" isLoading onLoadMore={() => {}}>
32+
<PickerItem>Red Panda</PickerItem>
33+
<PickerItem>Cat</PickerItem>
34+
</Picker>
35+
<Picker label="Ice Cream" isLoading={false} onLoadMore={() => {}}>
36+
<PickerItem>Red Panda</PickerItem>
37+
<PickerItem>Cat</PickerItem>
38+
</Picker>
39+
</>"
40+
`;
41+
2842
exports[`Static - Converts menuWidth to px value 1`] = `
2943
"import { PickerItem, Picker } from "@react-spectrum/s2";
3044
let menuWidth = 'size-10';

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/table.test.ts.snap

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,27 @@ let items = [
249249
</TableView>"
250250
`;
251251

252+
exports[`Move loadingState and onLoadMore from TableBody to TableView 1`] = `
253+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
254+
255+
<TableView loadingState="loading" onLoadMore={() => {}}>
256+
<TableHeader>
257+
<Column id="test" isRowHeader={true}>Test</Column>
258+
<Column id="blah">Blah</Column>
259+
</TableHeader>
260+
<TableBody>
261+
<Row>
262+
<Cell>Test1</Cell>
263+
<Cell>One</Cell>
264+
</Row>
265+
<Row>
266+
<Cell>Test2</Cell>
267+
<Cell>One</Cell>
268+
</Row>
269+
</TableBody>
270+
</TableView>"
271+
`;
272+
252273
exports[`Static TableView 1`] = `
253274
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
254275

‎packages/dev/codemods/src/s1-to-s2/__tests__/button.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {Button as RSPButton} from '@adobe/react-spectrum';
2424
</div>
2525
`);
2626

27-
test('Comments out isPending', `
27+
test('Keeps isPending', `
2828
import {Button} from '@adobe/react-spectrum';
2929
3030
<div>

‎packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,3 +223,17 @@ import {ComboBox, Section, Item} from '@adobe/react-spectrum';
223223
</Section>
224224
</ComboBox>
225225
`);
226+
227+
test('Keeps loadingState and onLoadMore', `
228+
import {ComboBox, Section, Item} from '@adobe/react-spectrum';
229+
<>
230+
<ComboBox loadingState="loading" onLoadMore={() => {}}>
231+
<Item>Red Panda</Item>
232+
<Item>Cat</Item>
233+
</ComboBox>
234+
<ComboBox loadingState={true ? 'loading' : 'idle'} onLoadMore={() => {}}>
235+
<Item>Red Panda</Item>
236+
<Item>Cat</Item>
237+
</ComboBox>
238+
</>
239+
`);

‎packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,17 @@ import {Picker, Section, Item} from '@adobe/react-spectrum';
148148
</Section>
149149
</Picker>
150150
`);
151+
152+
test('Keeps isLoading and onLoadMore', `
153+
import {Picker, Section, Item} from '@adobe/react-spectrum';
154+
<>
155+
<Picker label="Ice Cream" isLoading onLoadMore={() => {}}>
156+
<Item>Red Panda</Item>
157+
<Item>Cat</Item>
158+
</Picker>
159+
<Picker label="Ice Cream" isLoading={false} onLoadMore={() => {}}>
160+
<Item>Red Panda</Item>
161+
<Item>Cat</Item>
162+
</Picker>
163+
</>
164+
`);

‎packages/dev/codemods/src/s1-to-s2/__tests__/table.test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,3 +265,24 @@ let items = [
265265
</TableBody>
266266
</TableView>
267267
`);
268+
269+
test('Move loadingState and onLoadMore from TableBody to TableView', `
270+
import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@adobe/react-spectrum';
271+
272+
<TableView>
273+
<TableHeader>
274+
<Column key="test">Test</Column>
275+
<Column key="blah">Blah</Column>
276+
</TableHeader>
277+
<TableBody loadingState="loading" onLoadMore={() => {}}>
278+
<Row>
279+
<Cell>Test1</Cell>
280+
<Cell>One</Cell>
281+
</Row>
282+
<Row>
283+
<Cell>Test2</Cell>
284+
<Cell>One</Cell>
285+
</Row>
286+
</TableBody>
287+
</TableView>
288+
`);

‎packages/dev/codemods/src/s1-to-s2/src/codemods/components/Button/transform.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1+
import {NodePath} from '@babel/traverse';
12
import {
2-
commentOutProp,
33
removeProp,
44
updateComponentIfPropPresent,
55
updatePropName,
66
updatePropNameAndValue,
77
updatePropValueAndAddNewPropName
88
} from '../../shared/transforms';
9-
import {NodePath} from '@babel/traverse';
109
import * as t from '@babel/types';
1110

1211
/**
1312
* Transforms Button:
1413
* - Change variant="cta" to variant="accent"
1514
* - Change variant="overBackground" to variant="primary" staticColor="white"
1615
* - Change style to fillStyle
17-
* - Comment out isPending (it has not been implemented yet)
1816
* - Remove isQuiet (it is no longer supported in Spectrum 2)
1917
* - If href is present, the Button should be converted to a LinkButton
2018
* - Remove elementType (it is no longer supported in Spectrum 2).
@@ -44,9 +42,6 @@ export default function transformButton(path: NodePath<t.JSXElement>) {
4442
newPropName: 'fillStyle'
4543
});
4644

47-
// Comment out isPending
48-
commentOutProp(path, {propName: 'isPending'});
49-
5045
// Remove isQuiet
5146
removeProp(path, {propName: 'isQuiet'});
5247

0 commit comments

Comments
 (0)