Codemods

TooltipButton Transform

Converts a v6 TooltipButton component to an equivalent v7 component.

Automatic Changes

• Removes the alternateIconProps prop, which has been deprecated (see Manual Changes)
• Removes the handleTooltipToggle prop, which has been deprecated (see Manual Changes)
• Removes the active prop, which has been deprecated (see Manual Changes)
• Removes the info prop, which has been deprecated. InfoTooltips will be automatically converted to the new API (see sections below).
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Migrates the title prop on the icon supplied in the icon prop to the screenReaderLabel prop on the new components (see sections below).

When iconIconInfoGlyphInfo

• Renames TooltipButton to InfoTooltipButton
• Removes the icon prop, which has been deprecated since an info icon is rendered already

For example:

1import { TooltipButton } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <TooltipButton
6      info={anyValue}
7      alternateIconProps={anyValue}
8      handleTooltipToggle={anyValue}
9      active={anyValue}
10      icon={<IconInfo title="More Info" />}
11      someOtherProp={anyValue}
12      {...otherProps}
13    />
14  );
15}

Transforms into:

1import { InfoTooltipButton } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <InfoTooltipButton
6      screenReaderLabel="More Info"
7      someOtherProp={anyValue}
8      {...otherProps}
9    />
10  );
11}

When the icon

• Renames TooltipButton to IconButton
• Migrates the contents of the icon prop as children of the IconButton

For example:

1import { TooltipButton } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <TooltipButton
6      info={anyValue}
7      alternateIconProps={anyValue}
8      handleTooltipToggle={anyValue}
9      active={anyValue}
10      icon={<IconAccount title="Additional Account Information" />}
11      someOtherProp={anyValue}
12      {...otherProps}
13    />
14  );
15}

Transforms into:

1import { TooltipTrigger, IconButton } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <IconButton
6      screenReaderLabel="Additional Account Information"
7      someOtherProp={anyValue}
8      {...otherProps}
9    >
10      <IconAccount />
11    </IconButton>
12  );
13}

Manual Changes

alternateIconProps has been deprecated

Previously, this prop allowed additional props to be added to the icon when active. In v7, we’ve reworked the state management of the Tooltip component to be consistent with the rest of our system. If you’re using the tooltip as an info tooltip, we’d recommend throwing away this prop entirely. We’ve rebuilt the trigger for an info tooltip into it’s own dedicated component, so that it can be consistent across all products at Amex. If you’re not using the tooltip as an info tooltip, we’d recommend controlling the state of the v7 Tooltip component, and then conditionally applying props to the icon you’ve chosen. See the documentation for the v7 Tooltip component for more information.

State management props handleTooltipToggleactive

In v7, we’ve reworked the state management of the Tooltip component to be consistent with the rest of our system. The API for handling the open/closed states of the tooltip have been migrated to a wrapper component. As a result, these props are no longer supported.

The following is an example of controlling the open state of the v6 Tooltip using active and handleTooltipToggle:

1() => {
2  const [isOpen, setIsOpen] = useState(false);
3
4  const handleTooltipToggle = (event) => {
5    setIsOpen(!isOpen);
6  };
7
8  return (
9    <Tooltip
10      id="tooltip"
11      open={isOpen}
12      info={true}
13      triggerElement={
14        <TooltipButton
15          handleTooltipToggle={handleTooltipToggle}
16          active={isOpen}
17        >
18          <GlyphInfo />
19        </TooltipButton>
20      }
21    >
22      Some Content
23    </Tooltip>
24  );
25};

The equivalent v7 code should look like the following:

1() => {
2  const [isOpen, setIsOpen] = useState(false);
3
4  const handleTooltipToggle = (newOpen) => {
5    setIsOpen(newOpen);
6  };
7
8  return (
9    <Tooltip id="tooltip" isOpen={isOpen} onIsOpenChange={handleTooltipToggle}>
10      <TooltipTrigger>
11        <InfoTooltipButton />
12      </TooltipTrigger>
13      <TooltipContent>Some Content</TooltipContent>
14    </Tooltip>
15  );
16};