Codemods

Input Transform

Converts a v6 Input component to a v7 Input component.

Automatic Changes

• Renames the locale prop to the native HTML lang prop.
• Renames the describedBy prop to the native HTML aria-describedby prop.
• Deletes the showStateIcon prop, as it is deprecated in v7. To show a state icon below the Input, use the status and statusMessage props.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Input } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Input
6      id="input-id"
7      locale="en-US"
8      describedBy="label-id"
9      showStateIcon={true}
10      theme={{ color: 'red' }}
11      {...otherProps}
12    />
13  );
14}

Transforms into:

1import { Input } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Input
6      id="input-id"
7      lang="en-US"
8      aria-describedby="label-id"
9      {...otherProps}
10    />
11  );
12}

Manual Changes

• A visible label is required for all Input components in v7. There are two props that can be used: the label prop or the aria-labelledby prop.

For example:

1import { Input, Label } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <>
6      <Label htmlFor="input-id">Label Text</Label>
7      <Input id="input-id" />
8    </>
9  );
10}

Should be manually updated to either:

1import { Input } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return <Input id="input-id" label="Label Text" />;
5}

Or:

1import { Input, Label } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <>
6      <Label id="label-id">Label Text</Label>
7      <Input id="input-id" aria-labelledby="label-id" />
8    </>
9  );
10}