Codemods

OverflowMenuNavigation Transform

Converts a v6 OverflowMenuNavigation component to a v7 MenuItem 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 OverflowMenuNavigation to MenuItem.
• Removes the href prop, which has been deprecated.

For example:

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

Transforms into:

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

Manual Changes

href is deprecated.

Previously, OverflowMenu items could be OverflowMenuNavigation which used <a> tags. In v7, MenuItem does not support href props as it’s a <button>. The v7 Menu component is designed for grouping actions rather than navigation. Consider one of the navigation components for a dropdown navigation.