Codemods

Stepper/InputStepper Transform

Converts a v6 Stepper/InputStepper component to a v7 Stepper component.

Automatic Changes

• Adds id prop if not present. The id prop is required. Update prop value to an appropriate value.
• If transforming a v6 Stepper, adds readOnly={true}. If the input should be editable, set to false or remove this prop.
• Renames the labels.increaseButton to labelOverrides.increaseScreenReaderLabel.
• Renames the labels.decreaseButton to labelOverrides.decreaseScreenReaderLabel.
• Deletes the onIncrease prop which is deprecated. Use the onChange prop to get the updated value.
• Deletes the onDecrease prop which is deprecated. Use the onChange prop to get the updated value.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Stepper } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Stepper
6      labels={{ increaseButton: 'Increase', decreaseButton: 'Decrease' }}
7      onIncrease={onIncrease}
8      onDecrease={onDecrease}
9      onChange={onChange}
10      theme={{ color: 'red' }}
11      {...otherProps}
12    />
13  );
14}

Transforms into:

1import { Stepper } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Stepper
6      labelOverrides={{
7        increaseScreenReaderLabel: 'Increase',
8        decreaseScreenReaderLabel: 'Decrease',
9      }}
10      onChange={onChange}
11      readOnly={true}
12      id="unique-id-for-stepper"
13      {...otherProps}
14    />
15  );
16}

Manual Changes

onChange

The onChange signature has been updated from (newValue: number) => void to (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>, newValue: number | null) => void. The onChange is now triggered from editing the input, clicking the increase button, or clicking the decrease button.