Codemods

Checkbox Transform

Converts a v6 Checkbox component to a v7 Checkbox or CheckboxIndeterminate component.

Automatic Changes

• Renames the describedBy prop to aria-describedby.
• Renames disabled to aria-disabled.
• Renames valid to aria-invalid and inverts the value.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• If Checkbox has indeterminate prop, renames component to CheckboxIndeterminate and renames prop to isIndeterminate.

For example:

1import { Checkbox } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Checkbox
6      id="some-id"
7      label="My Checkbox"
8      disabled={isDisabled}
9      indeterminate={isIndeterminate}
10      valid={isValid}
11      describedBy="some-id"
12      theme={{ color: 'red' }}
13      {...otherProps}
14    />
15  );
16}

Transforms into:

1import { CheckboxIndeterminate } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <CheckboxIndeterminate
6      id="some-id"
7      label="My Checkbox"
8      aria-disabled={isDisabled}
9      aria-invalid={!isValid}
10      aria-describedby="some-id"
11      isIndeterminate={isIndeterminate}
12      {...otherProps}
13    />
14  );
15}

Manual Changes

Grouped Checkboxes

A new component, CheckboxGroup, was introduced as an accessible and consistent way of grouping a set of Checkbox and CheckboxIndeterminate components. If you are using a group of checkboxes, wrap the checkboxes in a CheckboxGroup instead of a fieldset or similar element.