Codemods

SlideStepper Transform

Converts a v6 SlideStepper component to a v7 Slider component.

Automatic Changes

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Renames the import and usages of SlideStepper to Slider.
• Renames the onChange prop to onSliderValueChange, but does not update to the new function signature (see Manual Changes section for more details).
• Removes the intervalDelay prop, which has been deprecated.
• Removes the children, which has been deprecated. The current value of the slider will be displayed in a DataTip by default. If you want to display a different value, use the getDataTipValue prop (see Manual Changes section for more details).
• The label prop will display a visible label for the entire component, which is also the accessible label read by screen readers.
• The min prop will display a visible label for the minimum value, which is also an accessible description read by screen readers.
• The max prop will display a visible label for the maximum value, which is also an accessible description read by screen readers.

For example:

1import { SlideStepper } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <SlideStepper
6      id="slider"
7      label="Label"
8      min={0}
9      max={100}
10      step={1}
11      value={50}
12      onChange={() => {}}
13      intervalDelay={10}
14      theme={{ color: 'red' }}
15      {...otherProps}
16    >
17      {/** Children */}
18    </SlideStepper>
19  );
20}

Transforms into:

1import { Slider } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Slider
6      id="slider"
7      label="Label"
8      min={0}
9      max={100}
10      step={1}
11      value={50}
12      onChange={() => {}}
13      {...otherProps}
14    />
15  );
16}

Manual Changes

onChange has been renamed to onSliderValueChange with a different signature

We’ve renamed the prop to onSliderValueChange to be more descriptive, by specifing what exactly has changed. Previously, the signature included the event as the first parameter and the newValue in an object with the key value as the second parameter:

1onChange(event, { value: newValue });

Now, the signature includes only the newValue as the first parameter:

1onSliderValueChange(newValue);

Please update the function signature and verify the expected functionality works.

children has been removed, use getDataTipValue instead to mimic the same behavior

In v6, a Tooltip displayed the slider value, which came from the children prop. In v7, a DataTip displays the slider value by default, so children can safely be removed if the slider value and displayed value are the same.

If you want to display a different value, (e.g. prepend a $ to the value), use the getDataTipValue prop. The getDataTipValue prop is a function that takes the slider value and percent and returns a user-friendly string to be displayed in the DataTip.

For example:

1getDataTipValue={(value, percent) => `$${value}`}

Use minLabelmaxLabel

By default, the min and max props are displayed as a label for the minimum and maximum values, respectively. If you want a different label, use the minLabel and maxLabel props. The label will be a visible label and an accessible description read by screen readers.

Use the label

If you were previously using a Label component, that can be removed in favor of the label prop.