Codemods

ButtonBase Transform

Converts a v6 ButtonBase component to a v7 ButtonBase component.

Automatic Changes

• Renames the disabled prop to aria-disabled.
• Removes the size prop, which has been deprecated. If a specific button size is needed, apply custom styling.
• Removes the allowOverflow prop, which has been deprecated. All v7 Buttons allow text overflow by default, as showing ellipsis for text overflow is not accessible.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { ButtonBase } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <ButtonBase
6      disabled={disabled}
7      size="sm"
8      allowOverflow={true}
9      theme={{ color: 'red' }}
10      {...otherProps}
11    >
12      Button Text
13    </ButtonBase>
14  );
15}

Transforms into:

1import { ButtonBase } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <ButtonBase aria-disabled={disabled} {...otherProps}>
6      Button Text
7    </ButtonBase>
8  );
9}