Codemods

TabGroup Transform

Converts a v6 TabGroup component to a v7 Tabs component.

Automatic Changes

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Renames the import and usages of TabGroup to Tabs.
• Renames the defaultSelectedTab prop to defaultSelectedTabId.
• Renames the selectedTab prop to selectedTabId.
• Renames the onChange prop to onSelectedTabIdChange.
• Deletes the <TabContentGroup> component and moves its children to the <Tabs> component.

For example:

1import { TabGroup } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <TabGroup
6      defaultSelectedTab="tab-1"
7      selectedTab="tab-2"
8      onChange={() => {}}
9      theme={{ color: 'red' }}
10      {...otherProps}
11    >
12      <TabMenu>
13        <Tab id="tab-1" contentId="tab-panel-1">
14          Tab 1
15        </Tab>
16      </TabMenu>
17      <TabContentGroup>
18        <TabContent id="tab-panel-1" labelledBy="tab-1">
19          Tab 1 content
20        </TabContent>
21      </TabContentGroup>
22    </TabGroup>
23  );
24}

Transforms into:

1import { Tabs } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Tabs
6      defaultSelectedTabId="tab-1"
7      selectedTabId="tab-2"
8      onSelectedTabIdChange={() => {}}
9      {...otherProps}
10    >
11      <TabList>
12        <Tab id="tab-1">Tab 1</Tab>
13      </TabList>
14      <TabPanel aria-labelledby="tab-1">Tab 1 content</TabPanel>
15    </Tabs>
16  );
17}

Note: The code example shows other Tab components being transformed as well for the sake of accuracy. Please refer to the Tab, TabMenu, TabContent transforms for more information.