Codemods

PageLevelMessage Transform

Converts a v6 PageLevelMessage component to a v7 PageLevelNotification component.

Automatic Changes

• Renames the import and usages of PageLevelMessage to PageLevelNotification
• Wraps the children of PageLevelMessage in a div element
• Renames dismissible to isDismissible
• Renames filled to isIconFilled
• Updates type="neutral" to type="info"
• Updates type="warning" to type="critical"
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { PageLevelMessage } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <PageLevelMessage
6      dismissible={true}
7      filled={true}
8      type="neutral"
9      theme={{ color: 'red' }}
10      {...otherProps}
11    >
12      Page Level Message Content
13    </PageLevelMessage>
14  );
15}

Transforms into:

1import { PageLevelNotification } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <PageLevelNotification
6      isDismissible={true}
7      isIconFilled={true}
8      type="info"
9      {...otherProps}
10    >
11      Page Level Message Content
12    </PageLevelNotification>
13  );
14}

Manual Changes

Headings

A new prop, headingSlot, has been introduced as a consistent way of showing a heading with the notification. If you previously included a heading tag as a child of a PageLevelMessage, you should move the text for that heading into the headingSlot prop.

Actions

A new prop, actionSlot, has been introduced as a consistent way of showing actions associated with the notification. If you previously included actions (links, buttons, etc.) as children of a PageLevelMessage, you should move these elements into the actionSlot prop.