Codemods

IconTab Transform

Converts a v6 IconTab 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.
• Renames the import and usages of IconTab to Tab.
• Removes the contentId prop, which has been deprecated.

For example:

1import { IconTab } from '@americanexpress/dls-react6';
2import { IconPlane } from '@americanexpress/dls-icons';
3
4export default function Page() {
5  return (
6    <IconTab
7      contentId="id"
8      icon={<IconPlane />}
9      theme={{ color: 'red' }}
10      {...otherProps}
11    >
12      {/** Children */}
13    </IconTab>
14  );
15}

Transforms into:

1import { Tab } from '@americanexpress/dls-react';
2import { IconPlane } from '@americanexpress/dls-icons';
3
4export default function Page() {
5  return (
6    <Tab icon={<IconPlane />} {...otherProps}>
7      {/** Children */}
8    </Tab>
9  );
10}

Manual Changes

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

Previously, we used contentId in <IconTab> 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 <IconTab> 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    <IconTab id="tab-1" contentId="tab-panel-1" icon={<IconPlane />}>
4      Tab 1
5    </IconTab>
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" icon={<IconPlane />}>
4      Tab 1
5    </Tab>
6  </TabList>
7  <TabPanel id="tab-panel-1" aria-labelledby="tab-1">
8    Tab 1 content
9  </TabPanel>
10</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.

Can change placement of icon

Previously, the icon was always placed on top of the text in the tab. The default placement in v7 is still the top. However, you can change the placement of the icon to the start of the text by using the iconPlacement prop in the Tab component.