Codemods

FilterMenu Transform

Converts a v6 FilterMenu component to a v7 FilterMenu component.

Automatic Changes

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Renames the filtersApplied prop to filtersAppliedCount.
• Renames the onClose prop to onMenuClose.
• Renames the onCloseClick prop to onCloseButtonClick.
• Renames the filterButtonLabel prop to labelOverrides.filterButtonScreenReaderLabel.
• Renames the filtersLabel prop to labelOverrides.menuHeadingLabel.
• Renames the closeButtonLabel prop to labelOverrides.closeButtonScreenReaderLabel.
• Renames the resetButtonLabel prop to labelOverrides.resetButtonLabel.
• Renames the applyButtonLabel prop to labelOverrides.applyButtonLabel.

For example:

1import { FilterMenu } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <FilterMenu
6      filtersApplied={1}
7      onClose={() => {}}
8      onCloseClick={() => {}}
9      filterButtonLabel="Open filter menu"
10      filtersLabel="Filters"
11      closeButtonLabel="Close"
12      resetButtonLabel="Reset"
13      applyButtonLabel="Apply"
14      theme={{ color: 'red' }}
15      {...otherProps}
16    >
17      {/** Children */}
18    </FilterMenu>
19  );
20}

Transforms into:

1import { FilterMenu } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <FilterMenu
6      filtersAppliedCount={1}
7      onMenuClose={() => {}}
8      onCloseButtonClick={() => {}}
9      labelOverrides={{
10        filterButtonScreenReaderLabel: 'Open filter menu',
11        menuHeadingLabel: 'Filters',
12        closeButtonScreenReaderLabel: 'Close',
13        resetButtonLabel: 'Reset',
14        applyButtonLabel: 'Apply',
15      }}
16      {...otherProps}
17    >
18      {/** Children */}
19    </FilterMenu>
20  );
21}