Skip to content

Commit 674aa4a

Browse files
snowystingerLFDanLu
snowystinger
and
LFDanLu
authored
chore: S2 Date migrations (#8564)
* chore: S2 Date migrations * remove obsolte snaps --------- Co-authored-by: Daniel Lu <[email protected]>
1 parent e1087ff commit 674aa4a

File tree

13 files changed

+335
-23
lines changed

13 files changed

+335
-23
lines changed

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@ export function Migrating() {
114114
<H3>ButtonGroup</H3>
115115
<P>No updates needed.</P>
116116

117+
<H3>Calendar</H3>
118+
<P>No updates needed.</P>
119+
117120
<H3>Checkbox</H3>
118121
<P>No updates needed.</P>
119122

@@ -158,6 +161,27 @@ export function Migrating() {
158161
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
159162
</ul>
160163

164+
<H3>DateField</H3>
165+
<ul className="sb-unstyled">
166+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
167+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
168+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
169+
</ul>
170+
171+
<H3>DatePicker</H3>
172+
<ul className="sb-unstyled">
173+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
174+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
175+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
176+
</ul>
177+
178+
<H3>DateRangePicker</H3>
179+
<ul className="sb-unstyled">
180+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
181+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
182+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
183+
</ul>
184+
161185
<H3>Dialog</H3>
162186
<ul className="sb-unstyled">
163187
<li className={style({font: 'body', marginY: 8})}>Update children to move render props from being the second child of <Code>DialogTrigger</Code> to being a child of <Code>Dialog</Code></li>
@@ -302,6 +326,9 @@ export function Migrating() {
302326
<li className={style({font: 'body', marginY: 8})}>Remove <Code>showErrorIcon</Code> (it has been removed due to accessibility issues)</li>
303327
</ul>
304328

329+
<H3>RangeCalendar</H3>
330+
<P>No updates needed.</P>
331+
305332
<H3>RangeSlider</H3>
306333
<ul className="sb-unstyled">
307334
<li className={style({font: 'body', marginY: 8})}>Remove <Code>showValueLabel</Code> (it has been removed due to accessibility issues)</li>
@@ -392,6 +419,13 @@ export function Migrating() {
392419
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
393420
</ul>
394421

422+
<H3>TimeField</H3>
423+
<ul className="sb-unstyled">
424+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
425+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
426+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
427+
</ul>
428+
395429
<H3>ToggleButton</H3>
396430
<P>No updates needed.</P>
397431

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

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

3-
exports[`Does nothing 1`] = `
3+
exports[`Removes isQuiet 1`] = `
44
"import { DateField } from "@react-spectrum/s2";
5-
5+
let isQuiet = true;
6+
let props = {isQuiet: true};
67
<div>
7-
<DateField label="Event date" />
8+
<DateField />
9+
<DateField />
10+
<DateField />
11+
<DateField />
12+
<DateField />
13+
<DateField // TODO(S2-upgrade): check this spread for style props
14+
{...props} />
815
</div>"
916
`;
17+
18+
exports[`changes validationState to isInvalid or nothing 1`] = `
19+
"import { DateField } from "@react-spectrum/s2";
20+
let validationState = 'invalid';
21+
let props = {validationState: 'invalid'};
22+
<div>
23+
<DateField isInvalid />
24+
<DateField />
25+
<DateField // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
26+
validationState={validationState} />
27+
<DateField // TODO(S2-upgrade): check this spread for style props
28+
{...props} />
29+
</div>"
30+
`;

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

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

3-
exports[`Does nothing 1`] = `
3+
exports[`Removes isQuiet 1`] = `
44
"import { DatePicker } from "@react-spectrum/s2";
5-
5+
let isQuiet = true;
6+
let props = {isQuiet: true};
67
<div>
7-
<DatePicker label="Event date" />
8+
<DatePicker />
9+
<DatePicker />
10+
<DatePicker />
11+
<DatePicker />
12+
<DatePicker />
13+
<DatePicker // TODO(S2-upgrade): check this spread for style props
14+
{...props} />
815
</div>"
916
`;
17+
18+
exports[`changes validationState to isInvalid or nothing 1`] = `
19+
"import { DatePicker } from "@react-spectrum/s2";
20+
let validationState = 'invalid';
21+
let props = {validationState: 'invalid'};
22+
<div>
23+
<DatePicker isInvalid />
24+
<DatePicker />
25+
<DatePicker // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
26+
validationState={validationState} />
27+
<DatePicker // TODO(S2-upgrade): check this spread for style props
28+
{...props} />
29+
</div>"
30+
`;

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

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

3-
exports[`Does nothing 1`] = `
3+
exports[`Removes isQuiet 1`] = `
44
"import { DateRangePicker } from "@react-spectrum/s2";
5-
5+
let isQuiet = true;
6+
let props = {isQuiet: true};
67
<div>
7-
<DateRangePicker label="Event date range" />
8+
<DateRangePicker />
9+
<DateRangePicker />
10+
<DateRangePicker />
11+
<DateRangePicker />
12+
<DateRangePicker />
13+
<DateRangePicker // TODO(S2-upgrade): check this spread for style props
14+
{...props} />
815
</div>"
916
`;
17+
18+
exports[`changes validationState to isInvalid or nothing 1`] = `
19+
"import { DateRangePicker } from "@react-spectrum/s2";
20+
let validationState = 'invalid';
21+
let props = {validationState: 'invalid'};
22+
<div>
23+
<DateRangePicker isInvalid />
24+
<DateRangePicker />
25+
<DateRangePicker // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
26+
validationState={validationState} />
27+
<DateRangePicker // TODO(S2-upgrade): check this spread for style props
28+
{...props} />
29+
</div>"
30+
`;

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Renames variants 1`] = `
4-
"// import {Button} from '@adobe/react-spectrum';
5-
3+
exports[`Removes isQuiet 1`] = `
4+
"import { TimeField } from "@react-spectrum/s2";
5+
let isQuiet = true;
6+
let props = {isQuiet: true};
67
<div>
8+
<TimeField />
9+
<TimeField />
10+
<TimeField />
11+
<TimeField />
12+
<TimeField />
13+
<TimeField // TODO(S2-upgrade): check this spread for style props
14+
{...props} />
715
</div>"
816
`;
17+
18+
exports[`changes validationState to isInvalid or nothing 1`] = `
19+
"import { TimeField } from "@react-spectrum/s2";
20+
let validationState = 'invalid';
21+
let props = {validationState: 'invalid'};
22+
<div>
23+
<TimeField isInvalid />
24+
<TimeField />
25+
<TimeField // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
26+
validationState={validationState} />
27+
<TimeField // TODO(S2-upgrade): check this spread for style props
28+
{...props} />
29+
</div>"
30+
`;

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
test('Does nothing', `
10-
import {DateField} from '@adobe/react-spectrum';
9+
test('Removes isQuiet', `
1110
11+
import {DateField} from '@adobe/react-spectrum';
12+
let isQuiet = true;
13+
let props = {isQuiet: true};
1214
<div>
13-
<DateField label="Event date" />
15+
<DateField isQuiet />
16+
<DateField isQuiet={true} />
17+
<DateField isQuiet={false} />
18+
<DateField isQuiet={isQuiet} />
19+
<DateField isQuiet={'foo' === 'foo'} />
20+
<DateField {...props} />
1421
</div>
1522
`);
23+
24+
25+
test('changes validationState to isInvalid or nothing', `
26+
import {DateField} from '@adobe/react-spectrum';
27+
let validationState = 'invalid';
28+
let props = {validationState: 'invalid'};
29+
<div>
30+
<DateField validationState="invalid" />
31+
<DateField validationState="valid" />
32+
<DateField validationState={validationState} />
33+
<DateField {...props} />
34+
</div>
35+
`);

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
test('Does nothing', `
10-
import {DatePicker} from '@adobe/react-spectrum';
9+
test('Removes isQuiet', `
1110
11+
import {DatePicker} from '@adobe/react-spectrum';
12+
let isQuiet = true;
13+
let props = {isQuiet: true};
1214
<div>
13-
<DatePicker label="Event date" />
15+
<DatePicker isQuiet />
16+
<DatePicker isQuiet={true} />
17+
<DatePicker isQuiet={false} />
18+
<DatePicker isQuiet={isQuiet} />
19+
<DatePicker isQuiet={'foo' === 'foo'} />
20+
<DatePicker {...props} />
1421
</div>
1522
`);
23+
24+
25+
test('changes validationState to isInvalid or nothing', `
26+
import {DatePicker} from '@adobe/react-spectrum';
27+
let validationState = 'invalid';
28+
let props = {validationState: 'invalid'};
29+
<div>
30+
<DatePicker validationState="invalid" />
31+
<DatePicker validationState="valid" />
32+
<DatePicker validationState={validationState} />
33+
<DatePicker {...props} />
34+
</div>
35+
`);

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
test('Does nothing', `
10-
import {DateRangePicker} from '@adobe/react-spectrum';
9+
test('Removes isQuiet', `
1110
11+
import {DateRangePicker} from '@adobe/react-spectrum';
12+
let isQuiet = true;
13+
let props = {isQuiet: true};
1214
<div>
13-
<DateRangePicker label="Event date range" />
15+
<DateRangePicker isQuiet />
16+
<DateRangePicker isQuiet={true} />
17+
<DateRangePicker isQuiet={false} />
18+
<DateRangePicker isQuiet={isQuiet} />
19+
<DateRangePicker isQuiet={'foo' === 'foo'} />
20+
<DateRangePicker {...props} />
1421
</div>
1522
`);
23+
24+
25+
test('changes validationState to isInvalid or nothing', `
26+
import {DateRangePicker} from '@adobe/react-spectrum';
27+
let validationState = 'invalid';
28+
let props = {validationState: 'invalid'};
29+
<div>
30+
<DateRangePicker validationState="invalid" />
31+
<DateRangePicker validationState="valid" />
32+
<DateRangePicker validationState={validationState} />
33+
<DateRangePicker {...props} />
34+
</div>
35+
`);

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,30 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
test('Renames variants', `
10-
// import {Button} from '@adobe/react-spectrum';
9+
test('Removes isQuiet', `
1110
11+
import {TimeField} from '@adobe/react-spectrum';
12+
let isQuiet = true;
13+
let props = {isQuiet: true};
1214
<div>
15+
<TimeField isQuiet />
16+
<TimeField isQuiet={true} />
17+
<TimeField isQuiet={false} />
18+
<TimeField isQuiet={isQuiet} />
19+
<TimeField isQuiet={'foo' === 'foo'} />
20+
<TimeField {...props} />
1321
</div>
1422
`);
23+
24+
25+
test('changes validationState to isInvalid or nothing', `
26+
import {TimeField} from '@adobe/react-spectrum';
27+
let validationState = 'invalid';
28+
let props = {validationState: 'invalid'};
29+
<div>
30+
<TimeField validationState="invalid" />
31+
<TimeField validationState="valid" />
32+
<TimeField validationState={validationState} />
33+
<TimeField {...props} />
34+
</div>
35+
`);

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {NodePath} from '@babel/traverse';
2+
import {
3+
removeProp,
4+
updatePropNameAndValue
5+
} from '../../shared/transforms';
6+
import * as t from '@babel/types';
7+
8+
/**
9+
* Transforms DateField:
10+
* - Remove isQuiet (it is no longer supported in Spectrum 2).
11+
* - Change validationState="invalid" to isInvalid.
12+
* - Remove validationState="valid" (it is no longer supported in Spectrum 2).
13+
*/
14+
export default function transformDateField(path: NodePath<t.JSXElement>): void {
15+
// Change validationState="invalid" to isInvalid
16+
updatePropNameAndValue(path, {
17+
oldPropName: 'validationState',
18+
oldPropValue: 'invalid',
19+
newPropName: 'isInvalid',
20+
newPropValue: true
21+
});
22+
23+
// Remove validationState="valid"
24+
removeProp(path, {propName: 'validationState', propValue: 'valid'});
25+
26+
// Remove isQuiet
27+
removeProp(path, {propName: 'isQuiet'});
28+
}

0 commit comments

Comments
 (0)