Codemods

Buttons Transforms

A series of transforms which convert the following v6 button components into their appropriate v7 components:

• Button
• ButtonPrimary
• ButtonPrimaryDark
• ButtonSecondary
• ButtonSecondaryDark
• ButtonTertiary
• ButtonTertiaryDark
• IconButton

Automatic Changes

• Renames the button variants to Button with the appropriate variant prop:
  • ButtonPrimary -> Button with variant='primary'
  • ButtonPrimaryDark -> Button with variant='primary'
  • ButtonSecondary -> Button with variant='secondary'
  • ButtonSecondaryDark -> Button with variant='secondary'
  • ButtonTertiary -> Button with variant='tertiary'
  • ButtonTertiaryDark -> Button with variant='tertiary'
• Renames the styleType prop on Button to variant, and adjusts the value as needed:
  • styleType='primary' -> variant='primary'
  • styleType='secondary' -> variant='secondary'
  • styleType='tertiary' -> variant='tertiary'
  • styleType='white' -> variant='primary'
  • styleType='whiteSecondary' -> variant='secondary'
  • styleType='whiteTertiary' -> variant='tertiary'
  • styleType='contextual' -> variant='primary'
• Renames the IconButton to Button and performs the same adjustments to the styleType prop described above for Button.
• Changes disabled to aria-disabled.
• Changes label to aria-label.
• Renames the loading prop to isLoading.
• Deletes the theme prop, which has been deprecated. Use the className prop to apply custom styles.
• Deletes the allowOverflow prop, which has been deprecated. All buttons now overflow by default.
• Deletes the size prop, which has been deprecated.

For example:

1import {
2  Button,
3  IconButton,
4  ButtonSecondaryDark,
5} from '@americanexpress/dls-react6';
6
7export default function Page() {
8  return (
9    <>
10      <Button styleType="white" disabled={isDisabled} {...otherProps}>
11        Some Button
12      </Button>
13      <IconButton
14        styleType="contextual"
15        icon={<IconAccessibility />}
16        loading={true}
17        {...otherProps}
18      >
19        Some Button
20      </IconButton>
21      <ButtonSecondaryDark
22        size="sm"
23        allowOverflow={true}
24        disabled={isDisabled}
25        {...otherProps}
26      >
27        Some Button
28      </ButtonSecondaryDark>
29    </>
30  );
31}

Transforms into:

1import { Button } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <>
6      <Button variant="primary" aria-disabled={isDisabled} {...otherProps}>
7        Some Button
8      </Button>
9      <Button
10        variant="primary"
11        icon={<IconAccessibility />}
12        isLoading={true}
13        {...otherProps}
14      >
15        Some Button
16      </Button>
17      <Button variant="secondary" aria-disabled={isDisabled} {...otherProps}>
18        Some Button
19      </Button>
20    </>
21  );
22}

Manual Changes

Removed Button Variants

Certain button variants have been removed from the DLS and do not have an equivalent replacement in v7. To get the equivalent functionality in v7, first reconsider the use of the component in your application. If the component is still needed, consider customizing the default Button component using the className prop to get the desired functionality.

Button variants removed without an equivalent in v7 include:

• Button and IconButton with styleType:
  • 'chevron'
  • 'floatingChat'
  • 'floatingScroll'
  • '' (resulted in a ButtonBase component)
• ButtonBase
• ButtonChevron
• ButtonCobrand
• ButtonFloatingChat
• ButtonFloatingScroll

Removed size

The size prop has been removed. In most cases, there is no further action. If your application was previously relying on a button being a specific size, first reconsider the other parts of your application. If a specific size is still needed, the size of the button can be customized using the className prop and adjusting the width and/or height attributes.