Codemods

Tag Transform

Converts a v6 Tag component to a v7 Tag component.

Automatic Changes

• Renames the dismissible prop to isDismissible.
• Renames the onDismiss prop to onClick.
• Renames the label prop to labelOverrides.dismissScreenReaderLabel.
• Removes the inline prop, which has been deprecated.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Tag } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Tag
6      inline={inline}
7      dismissible={dismissible}
8      label="Click to dismiss"
9      onDismiss={onDismiss}
10      theme={{ color: 'red' }}
11      {...otherProps}
12    >
13      Tag Text
14    </Tag>
15  );
16}

Transforms into:

1import { Tag } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Tag
6      isDismissible={dismissible}
7      onClick={onDismiss}
8      {...otherProps}
9      labelOverrides={{
10        dismissScreenReaderLabel: 'Click to dismiss',
11      }}
12    >
13      Tag Text
14    </Tag>
15  );
16}

Manual Changes

Toggle Behavior

Note that in v7, the default Tag component (in other words, if isDismissible={false}) can be toggled. Please verify that this behavior works within the context of your application.