Codemods

PasswordInput Transform

Converts a v6 PasswordInput component to a v7 PasswordInput component.

Automatic Changes

• Renames the defaultShow prop to defaultShouldShowPassword.
• Deletes the hideButton prop. The ability to hide the Show/Hide button is not available in v7.
• Deletes the showLabel prop. The ability to customize the show label is not available in v7. Instead a <IconShow> is displayed by default, with the ability to override the screenreader label.
• Deletes the hideLabel prop. The ability to customize the hide label is not available in v7. Instead a <IconHide> is displayed by default, with the ability to override the screenreader label.
• Renames the showAriaLabel prop to labelOverrides.showScreenReaderLabel.
• Renames the hideAriaLabel prop to labelOverrides.hideScreenReaderLabel.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { PasswordInput } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <PasswordInput
6      defaultShow={defaultShow}
7      hideButton={hideButton}
8      showLabel="Show"
9      hideLabel="Hide"
10      showAriaLabel="Show"
11      hideAriaLabel="Hide"
12      theme={{ color: 'red' }}
13      {...otherProps}
14    />
15  );
16}

Transforms into:

1import { PasswordInput } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <PasswordInput
6      defaultShouldShowPassword={defaultShow}
7      {...otherProps}
8      labelOverrides={{
9        showPasswordScreenReaderLabel: 'Show',
10        hidePasswordScreenReaderLabel: 'Hide',
11      }}
12    />
13  );
14}