Codemods

Tab Transform

Converts a v6 Tab component to a v7 Tab component.

Automatic Changes

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Removes the contentId prop, which has been deprecated.

For example:

1import { Tab } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Tab contentId="id" theme={{ color: 'red' }} {...otherProps}>
6      {/** Children */}
7    </Tab>
8  );
9}

Transforms into:

1import { Tab } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return <Tab {...otherProps}>{/** Children */}</Tab>;
5}

Manual Changes

Pass the id<Tab>aria-labelledby<TabPanel>

Previously, we used contentId in <Tab> to associate the tab with the panel. In v7, the id prop in <Tab> is passed to the aria-labelledby prop in <TabPanel> to indicate which panel the tab controls. This pattern is more familiar and follows the accessibility patterns found in our other components.

Most likely, the <TabContent> component transform automatically makes this change, assuming that the same string was passed to the id prop of <Tab> and the labelledBy prop of <TabContent>. If not, you will need to manually update the props as stated above. Please refer to the TabContent transform for more information.

For example:

1<TabGroup>
2  <TabMenu>
3    <Tab id="tab-1" contentId="tab-panel-1">
4      Tab 1
5    </Tab>
6  </TabMenu>
7  <TabContentGroup>
8    <TabContent id="tab-panel-1" labelledBy="tab-1">
9      Tab 1 content
10    </TabContent>
11  </TabContentGroup>
12</TabGroup>

Transforms into:

1<Tabs>
2  <TabList>
3    <Tab id="tab-1">Tab 1</Tab>
4  </TabList>
5  <TabPanel id="tab-panel-1" aria-labelledby="tab-1">
6    Tab 1 content
7  </TabPanel>
8</Tabs>

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