Skip to content

Commit 0f2c781

Browse files
reidbarberreidbarber
authored
Tabs codemods (#6896)
* codemod for new S2 Tabs API * move items from Tabs to TabList * remove transformItem * support dynamic tab panels * pass items into collection * fix ts * update index path to get components * remove private from package.json * cleanup dist * fix test env * remove TabPanels import
1 parent ac6116d commit 0f2c781

File tree

11 files changed

+490
-79
lines changed

11 files changed

+490
-79
lines changed

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,10 @@ export function Migrating() {
290290
<H3>Tabs</H3>
291291
<ul className="sb-unstyled">
292292
<li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Inside <Code>TabList</Code>: Update <Code>Item</Code> to be <Code>Tab</Code></li>
293+
<li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Update <Code>items</Code> on <Code>Tabs</Code> to be on <Code>TabList</Code></li>
293294
<li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Inside <Code>TabPanels</Code>: Update <Code>Item</Code> to be a <Code>TabPanel</Code> and remove the surrounding <Code>TabPanels</Code></li>
295+
<li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Remove <Code>isEmphasized</Code> (it is no longer supported in Spectrum 2)</li>
296+
<li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
294297
</ul>
295298

296299
<H3>TagGroup</H3>

‎packages/@react-spectrum/s2/src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextFiel
6060
export {ToggleButton, ToggleButtonContext} from './ToggleButton';
6161
export {Tooltip, TooltipTrigger} from './Tooltip';
6262

63+
export {Collection} from 'react-aria-components';
6364
export {FileTrigger} from 'react-aria-components';
6465

6566
export type {ActionButtonProps} from './ActionButton';
@@ -102,7 +103,7 @@ export type {SliderProps} from './Slider';
102103
export type {RangeSliderProps} from './RangeSlider';
103104
export type {StatusLightProps} from './StatusLight';
104105
export type {SwitchProps} from './Switch';
105-
export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs'
106+
export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
106107
export type {TagGroupProps, TagProps} from './TagGroup';
107108
export type {TextFieldProps, TextAreaProps} from './TextField';
108109
export type {ToggleButtonProps} from './ToggleButton';

‎packages/@react-spectrum/s2/stories/Tabs.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
1413
import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
14+
import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
1515
import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
1616
import type {Meta} from '@storybook/react';
1717
import {style} from '../style/spectrum-theme' with { type: 'macro' };
@@ -35,18 +35,18 @@ export const Example = (args: any) => (
3535
</TabList>
3636
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
3737
<div style={{overflow: 'auto'}}>
38-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
39-
</div>
38+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
39+
</div>
4040
</TabPanel>
4141
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
42-
<div style={{overflow: 'auto'}}>
43-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
44-
<p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
45-
</div>
42+
<div style={{overflow: 'auto'}}>
43+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
44+
<p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
45+
</div>
4646
</TabPanel>
4747
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
48-
<div style={{overflow: 'auto'}}>
49-
<p>Alea jacta est.</p>
48+
<div style={{overflow: 'auto'}}>
49+
<p>Alea jacta est.</p>
5050
</div>
5151
</TabPanel>
5252
</Tabs>

‎packages/dev/codemods/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "@react-spectrum/codemods",
33
"version": "0.0.1",
4-
"private": true,
54
"main": "dist/index.js",
65
"source": "src/index.ts",
76
"bin": "dist/index.js",

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

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

3-
exports[`Renames variants 1`] = `
4-
"// import {Button} from '@adobe/react-spectrum';
3+
exports[`Move items from Tabs to TabList 1`] = `
4+
"import { Collection, TabPanel, Tabs, TabList } from "@react-spectrum/s2";
5+
import { Item } from '@adobe/react-spectrum';
56
7+
let items = [
8+
{name: 'Tab 1', children: 'Tab Body 1'},
9+
{name: 'Tab 2', children: 'Tab Body 2'},
10+
{name: 'Tab 3', children: 'Tab Body 3'},
11+
{name: 'Tab 4', children: 'Tab Body 4'},
12+
{name: 'Tab 5', children: 'Tab Body 5'},
13+
{name: 'Tab 6', children: 'Tab Body 6'}
14+
];
15+
16+
<Tabs aria-label="Dynamic tabs"><TabList items={tabs}>
17+
{(item) => (
18+
<Item key={item.name}>
19+
{item.name}
20+
</Item>
21+
)}
22+
</TabList><Collection items={tabs}>
23+
{(item) => (
24+
<TabPanel id={item.name}>
25+
{item.children}
26+
</TabPanel>
27+
)}
28+
</Collection></Tabs>"
29+
`;
30+
31+
exports[`Remove isEmphasized 1`] = `
32+
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2";
33+
import { Item } from '@adobe/react-spectrum';
34+
let isEmphasized = true;
35+
let props = {isEmphasized: true};
36+
<div>
37+
<Tabs aria-label="History of Ancient Rome"><TabList>
38+
<Tab id="FoR">Founding of Rome</Tab>
39+
<Tab id="MaR">Monarchy and Republic</Tab>
40+
<Tab id="Emp">Empire</Tab>
41+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
42+
<Tabs aria-label="History of Ancient Rome"><TabList>
43+
<Tab id="FoR">Founding of Rome</Tab>
44+
<Tab id="MaR">Monarchy and Republic</Tab>
45+
<Tab id="Emp">Empire</Tab>
46+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
47+
<Tabs aria-label="History of Ancient Rome"><TabList>
48+
<Tab id="FoR">Founding of Rome</Tab>
49+
<Tab id="MaR">Monarchy and Republic</Tab>
50+
<Tab id="Emp">Empire</Tab>
51+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
52+
<Tabs aria-label="History of Ancient Rome"><TabList>
53+
<Tab id="FoR">Founding of Rome</Tab>
54+
<Tab id="MaR">Monarchy and Republic</Tab>
55+
<Tab id="Emp">Empire</Tab>
56+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
57+
<Tabs aria-label="History of Ancient Rome" // TODO(S2-upgrade): check this spread for style props
58+
{...props}><TabList>
59+
<Tab id="FoR">Founding of Rome</Tab>
60+
<Tab id="MaR">Monarchy and Republic</Tab>
61+
<Tab id="Emp">Empire</Tab>
62+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
63+
</div>"
64+
`;
65+
66+
exports[`Remove isQuiet 1`] = `
67+
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2";
68+
import { Item } from '@adobe/react-spectrum';
69+
let isQuiet = true;
70+
let props = {isQuiet: true};
671
<div>
72+
<Tabs aria-label="History of Ancient Rome"><TabList>
73+
<Tab id="FoR">Founding of Rome</Tab>
74+
<Tab id="MaR">Monarchy and Republic</Tab>
75+
<Tab id="Emp">Empire</Tab>
76+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
77+
<Tabs aria-label="History of Ancient Rome"><TabList>
78+
<Tab id="FoR">Founding of Rome</Tab>
79+
<Tab id="MaR">Monarchy and Republic</Tab>
80+
<Tab id="Emp">Empire</Tab>
81+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
82+
<Tabs aria-label="History of Ancient Rome"><TabList>
83+
<Tab id="FoR">Founding of Rome</Tab>
84+
<Tab id="MaR">Monarchy and Republic</Tab>
85+
<Tab id="Emp">Empire</Tab>
86+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
87+
<Tabs aria-label="History of Ancient Rome"><TabList>
88+
<Tab id="FoR">Founding of Rome</Tab>
89+
<Tab id="MaR">Monarchy and Republic</Tab>
90+
<Tab id="Emp">Empire</Tab>
91+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
92+
<Tabs aria-label="History of Ancient Rome" // TODO(S2-upgrade): check this spread for style props
93+
{...props}><TabList>
94+
<Tab id="FoR">Founding of Rome</Tab>
95+
<Tab id="MaR">Monarchy and Republic</Tab>
96+
<Tab id="Emp">Empire</Tab>
97+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>
798
</div>"
899
`;
100+
101+
exports[`Update to use new API 1`] = `
102+
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2";
103+
import { Item } from '@adobe/react-spectrum';
104+
105+
<Tabs aria-label="History of Ancient Rome"><TabList>
106+
<Tab id="FoR">Founding of Rome</Tab>
107+
<Tab id="MaR">Monarchy and Republic</Tab>
108+
<Tab id="Emp">Empire</Tab>
109+
</TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel><TabPanel id="Emp">Alea jacta est.</TabPanel></Tabs>"
110+
`;

0 commit comments

Comments
 (0)