Codemods

Badge Transform

Converts a v6 Badge component to a v7 Badge component.

Automatic Changes

• Renames the label prop to screenReaderLabel.

• Attempts to update the type prop value according to the following mappings. type="outline" and type="outlineFilled" are deprecated and will be converted to type="number".

  • "text" -> "text"
  • "status" -> "status"
  • "number" -> "number"
  • "outline" -> "number"
  • "outlineFilled" -> "number"

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Badge } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Badge
6      type="text"
7      label="Payment approved"
8      theme={{ color: 'red' }}
9      {...otherProps}
10    >
11      Approved
12    </Badge>
13  );
14}

Transforms into:

1import { Badge } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Badge type="text" screenReaderLabel="Payment approved" {...otherProps}>
6      Approved
7    </Badge>
8  );
9}

Manual Changes

type prop has been updated

The type prop can either be "text" | "status" | "number". The visual appearance for each of these types has been updated. Please make any necessary adjustments.