forked from adobe/react-spectrum
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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
- Loading branch information
1 parent
ac6116d
commit 0f2c781
Showing
11 changed files
with
490 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 104 additions & 2 deletions
106
packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/tabs.test.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,110 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Renames variants 1`] = ` | ||
"// import {Button} from '@adobe/react-spectrum'; | ||
exports[`Move items from Tabs to TabList 1`] = ` | ||
"import { Collection, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; | ||
import { Item } from '@adobe/react-spectrum'; | ||
let items = [ | ||
{name: 'Tab 1', children: 'Tab Body 1'}, | ||
{name: 'Tab 2', children: 'Tab Body 2'}, | ||
{name: 'Tab 3', children: 'Tab Body 3'}, | ||
{name: 'Tab 4', children: 'Tab Body 4'}, | ||
{name: 'Tab 5', children: 'Tab Body 5'}, | ||
{name: 'Tab 6', children: 'Tab Body 6'} | ||
]; | ||
<Tabs aria-label="Dynamic tabs"><TabList items={tabs}> | ||
{(item) => ( | ||
<Item key={item.name}> | ||
{item.name} | ||
</Item> | ||
)} | ||
</TabList><Collection items={tabs}> | ||
{(item) => ( | ||
<TabPanel id={item.name}> | ||
{item.children} | ||
</TabPanel> | ||
)} | ||
</Collection></Tabs>" | ||
`; | ||
|
||
exports[`Remove isEmphasized 1`] = ` | ||
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; | ||
import { Item } from '@adobe/react-spectrum'; | ||
let isEmphasized = true; | ||
let props = {isEmphasized: true}; | ||
<div> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome" // TODO(S2-upgrade): check this spread for style props | ||
{...props}><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
</div>" | ||
`; | ||
|
||
exports[`Remove isQuiet 1`] = ` | ||
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; | ||
import { Item } from '@adobe/react-spectrum'; | ||
let isQuiet = true; | ||
let props = {isQuiet: true}; | ||
<div> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
<Tabs aria-label="History of Ancient Rome" // TODO(S2-upgrade): check this spread for style props | ||
{...props}><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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> | ||
</div>" | ||
`; | ||
|
||
exports[`Update to use new API 1`] = ` | ||
"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; | ||
import { Item } from '@adobe/react-spectrum'; | ||
<Tabs aria-label="History of Ancient Rome"><TabList> | ||
<Tab id="FoR">Founding of Rome</Tab> | ||
<Tab id="MaR">Monarchy and Republic</Tab> | ||
<Tab id="Emp">Empire</Tab> | ||
</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>" | ||
`; |
Oops, something went wrong.