Codemods

RadioGroup Transform

Converts the v6 RadioGroup component to the v7 RadioGroup component.

Automatic Changes

• Renames the checked prop to value
• Renames defaultChecked prop to defaultValue.
• Migrates the contents of the Legend subcomponent into the legend prop of the RadioGroup, if it exists.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { RadioGroup } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <RadioGroup
6      checked={currentValue}
7      defaultChecked={defaultValue}
8      theme={{ color: 'red' }}
9      {...otherProps}
10    >
11      <Legend>Some Legend</Legend>
12      {/** Other Children */}
13    </RadioGroup>
14  );
15}

Transforms into:

1import { RadioGroup } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <RadioGroup
6      value={currentValue}
7      defaultValue={defaultValue}
8      legend={<>Some Legend</>}
9      {...otherProps}
10    >
11      {/** Other Children */}
12    </RadioGroup>
13  );
14}

Manual Changes

Legend

There are new props for handling the legend associated with a group of radio buttons. Move the text contents of the associated Legend component to the legend prop of the RadioGroup component. If the legend should be hidden, set the isLegendHidden prop to true.

onChange API Update

Previously, the onChange callback provided a second parameter in the callback which provided event.target.value. If your application was previously relying on this second parameter, switch to directly referencing event.target.value:

Switch from this:

1<RadioGroup onChange={(event, value) => setValue(value)} />

To this:

1<RadioGroup onChange={(event) => setValue(event.target.value)} />