Codemods

Tooltip Transform

Converts a v6 Tooltip component to a v7 Tooltip component. Note that this transform exclusively handles migrating the Tooltip component and not the TooltipButton component. The TooltipButton has its own transform for handling the v7 migration separately.

Automatic Changes

• Renames the open prop to isOpen
• Removes the forcePlacement prop, which has been deprecated
• Removes the statusMessage prop, which has been deprecated
• Removes the info prop, which has been deprecated (see TooltipButton Transform for more information on Info Tooltips)
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Moves the children and other props (excluding aria-expanded and aria-labelledby) into a TooltipContent component
• Wraps the contents of the triggerElement prop in a TooltipTrigger component
• Moves aria-expanded and aria-labelledby onto the TooltipTrigger component
• Migrates the contents of the triggerElement prop as a child of Tooltip

For example:

1import { Tooltip } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Tooltip
6      id="account-tooltip"
7      triggerElement={
8        <TooltipButton
9          info={anyValue}
10          alternateIconProps={anyValue}
11          handleTooltipToggle={anyValue}
12          active={anyValue}
13          icon={<IconInfo />}
14          someOtherProp={anyValue}
15          {...otherProps}
16        />
17      }
18      placement={placement}
19      open={open}
20      info={info}
21      forcePlacement={anyValue}
22      statusMessage={anyValue}
23      aria-expanded={anyValue}
24      aria-labelledby={anyValue}
25      theme={{ color: 'red' }}
26      someOtherProp={anyValue}
27      {...otherProps}
28    >
29      Charles Frost
30    </Tooltip>
31  );
32}

Transforms into:

1import {
2  Tooltip,
3  TooltipTrigger,
4  TooltipContent,
5  IconButton,
6} from '@americanexpress/dls-react';
7
8export default function Page() {
9  return (
10    <Tooltip id="account-tooltip" isOpen={isOpen} placement={placement}>
11      <TooltipTrigger aria-expanded={anyValue} aria-labelledby={anyValue}>
12        <TooltipButton
13          info={anyValue}
14          alternateIconProps={anyValue}
15          handleTooltipToggle={anyValue}
16          active={anyValue}
17          icon={<IconInfo />}
18          someOtherProp={anyValue}
19          {...otherProps}
20        />
21      </TooltipTrigger>
22      <TooltipContent someOtherProp={anyValue} {...otherProps}>
23        Charles Frost
24      </TooltipContent>
25    </Tooltip>
26  );
27}

Manual Changes

State Management

In v7, we’ve updated the Tooltip component to have consistent and predictable controlled/uncontrolled behavior. See TooltipButton Transform for more information on migrating controlled Tooltip components to the new state management API.

Using the Trigger Element to Trigger an Action

In v7, we’ve built each component from the ground up with accessibility in mind. In order to remain compliant with modern accessibility standards, the trigger for a tooltip must not trigger any action other than opening/closing the tooltip. For more information, see the v7 documentation site.