Codemods

DialogBoxBody Transform

Converts a v6 DialogBoxBody component to a v7 AlertDialogBody 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 DialogBoxBody to AlertDialogBody.
• Injects a unique ID into the id prop if it is currently missing to provide better support for accessibility.

For example:

1import { DialogBoxBody } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <DialogBoxBody theme={{ color: 'red' }} {...otherProps}>
6      {/** Children */}
7    </DialogBoxBody>
8  );
9}

Transforms into:

1import { AlertDialogBody } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <AlertDialogBody id="unique-id-for-alert-dialog-body" {...otherProps}>
6      {/** Children */}
7    </AlertDialogBody>
8  );
9}

Manual Changes

Actions Slot

Buttons that were previously passed as children to DialogBox should be refactored to instead pass within the actionSlot prop.

This will add the buttons to the footer of the AlertDialogBody component, with a horizontal break above them to separate the actions from the body content.