Codemods

Select Transform

Converts the v6 Select component to the v7 SelectNative component.

Automatic Changes

• Renames the import and usages of Select to SelectNative.
• Renames the locale prop to the native HTML lang prop.
• Renames the disabled prop to aria-disabled.
• Renames the twoLined prop to isTwoLined.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Deletes the fluid prop, which has been deprecated.

For example:

1import { Select } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <>
6      <Label htmlFor="select-1">Select 1</Label>
7      <Select
8        id="select-1"
9        locale="en-US"
10        disabled={isDisabled}
11        twoLined={isTwoLined}
12        fluid={isFluid}
13        {...otherProps}
14      >
15        {/** Children */}
16      </Select>
17    </>
18  );
19}

Transforms into:

1import { SelectNative } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <>
6      <Label htmlFor="select-1">Select 1</Label>
7      <SelectNative
8        id="select-1"
9        lang="en-US"
10        aria-disabled={isDisabled}
11        isTwoLined={isTwoLined}
12        {...otherProps}
13      >
14        {/** Children */}
15      </SelectNative>
16    </>
17  );
18}

Manual Changes

Label

There are new props for handling the label associated with a Select. Move the text contents of the associated Label component to the label prop of the NativeSelect component.