fix: migrate buttondialpad

src/components/ButtonDialpad/ButtonDialpad.constants.ts

@@ -14,6 +14,7 @@ const STYLE = {
   primaryText: `${CLASS_PREFIX}-primary-text`,
   secondaryText: `${CLASS_PREFIX}-secondary-text`,
   wrapper: `${CLASS_PREFIX}-wrapper`,
+  innerWrapper: `${CLASS_PREFIX}-inner-wrapper`,
 };
 
 export { CLASS_PREFIX, DEFAULTS, SIZES, STYLE };

src/components/ButtonDialpad/ButtonDialpad.stories.args.ts

@@ -1,40 +1,13 @@
 import {
-  commonAriaButton,
   commonHTMLAttributes,
+  commonMdcButton,
   commonStyles,
 } from '../../storybook/helper.stories.argtypes';
 
-import { BUTTON_DIALPAD_CONSTANTS as CONSTANTS } from './';
-
 export default {
   ...commonStyles,
   ...commonHTMLAttributes,
-  ...commonAriaButton,
-  children: {
-    description: 'Provides the child node for this element. This overrides the `primaryText` prop.',
-    control: { type: 'text' },
-    table: {
-      type: {
-        summary: 'ReactNode',
-      },
-      defaultValue: {
-        summary: 'undefined',
-      },
-    },
-  },
-  disabled: {
-    description: 'Whether to render the `<ButtonDialpad />` is disabled.',
-    options: [true, false],
-    control: { type: 'boolean' },
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: {
-        summary: CONSTANTS.DEFAULTS.DISABLED,
-      },
-    },
-  },
+  ...commonMdcButton,
   primaryText: {
     description: 'Provides the primary text for this `<ButtonDialPad />`.',
     control: { type: 'text' },
@@ -59,17 +32,4 @@ export default {
       },
     },
   },
-  size: {
-    description: 'Modifies the size of this `<ButtonPill />`.',
-    options: [undefined, ...Object.values(CONSTANTS.SIZES)],
-    control: { type: 'select' },
-    table: {
-      type: {
-        summary: 'number',
-      },
-      defaultValue: {
-        summary: CONSTANTS.DEFAULTS.SIZE,
-      },
-    },
-  },
 };

src/components/ButtonDialpad/ButtonDialpad.stories.tsx

@@ -27,15 +27,6 @@ const Example = Template<ButtonDialpadProps>(ButtonDialpad).bind({});
 
 Example.argTypes = { ...argTypes };
 
-const Sizes = MultiTemplate<ButtonDialpadProps>(ButtonDialpad).bind({});
-
-Sizes.parameters = {
-  variants: [{}, { size: 52 }],
-};
-
-Sizes.argTypes = { ...argTypes };
-delete Sizes.argTypes.size;
-
 const States = MultiTemplate<ButtonDialpadProps>(ButtonDialpad).bind({});
 
 States.parameters = {
@@ -69,4 +60,4 @@ delete Common.argTypes.children;
 delete Common.argTypes.primaryText;
 delete Common.argTypes.secondaryText;
 
-export { Example, Sizes, States, Common };
+export { Example, States, Common };

src/components/ButtonDialpad/ButtonDialpad.style.scss

@@ -1,87 +1,34 @@
 .md-button-dialpad-wrapper {
-  border: var(--md-globals-border-clear);
-  cursor: pointer;
-  outline: none !important;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-  background-color: var(--mds-color-theme-button-secondary-normal);
-
-  &:hover {
-    background-color: var(--mds-color-theme-button-secondary-hover);
-  }
-
-  &:active {
-    background-color: var(--mds-color-theme-button-secondary-pressed);
-  }
-
-  > * {
-    align-items: center;
-    display: flex;
-    height: 1em;
-    justify-content: center;
-  }
-
-  > .md-button-dialpad-primary-text {
-    color: var(--mds-color-theme-text-primary-normal);
-  }
-
-  > .md-button-dialpad-secondary-text {
-    color: var(--mds-color-theme-text-secondary-normal);
-    margin-top: 0.2em;
-  }
-
-  &[data-disabled='true'] {
-    background-color: var(--mds-color-theme-button-secondary-normal);
-    color: var(--mds-color-theme-text-primary-normal);
-    cursor: auto;
-
-    > .md-button-dialpad-primary-text {
-      color: var(--mds-color-theme-text-primary-normal);
-    }
-
-    > .md-button-dialpad-secondary-text {
-      color: var(--mds-color-theme-text-secondary-normal);
-    }
-
-    &:hover {
-      background-color: var(--mds-color-theme-button-secondary-normal);
-    }
-
-    &:active {
-      background-color: var(--mds-color-theme-button-secondary-normal);
-    }
-  }
-
   /* Sizing and spacing. */
   align-items: center;
   border-radius: 100vh;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  justify-content: center;
+  height: 4rem;
+  width: 4rem;
 
-  &[data-size='64'] {
-    height: 4rem;
-    width: 4rem;
+  > .md-button-dialpad-inner-wrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
     > .md-button-dialpad-primary-text {
       font-size: 1.625rem;
+      color: var(--mds-color-theme-text-primary-normal);
     }
 
     > .md-button-dialpad-secondary-text {
       font-size: 0.75rem;
-    }
-  }
-
-  &[data-size='52'] {
-    height: 3.25rem;
-    width: 3.25rem;
-
-    > .md-button-dialpad-primary-text {
-      font-size: 1.25rem;
+      color: var(--mds-color-theme-text-secondary-normal);
+      margin-top: 0.2em;
+      height: 1em;
     }
 
-    > .md-button-dialpad-secondary-text {
-      font-size: 0.75rem;
+    > * {
+      align-items: center;
+      display: flex;
+      height: 1em;
+      justify-content: center;
     }
   }
 }

src/components/ButtonDialpad/ButtonDialpad.tsx

@@ -1,28 +1,31 @@
 import React, { forwardRef, RefObject } from 'react';
-import ButtonSimple from '../ButtonSimple';
+import { Button as MdcButton } from '@momentum-design/components/dist/react';
 
-import { DEFAULTS, STYLE } from './ButtonDialpad.constants';
-import { Props } from './ButtonDialpad.types';
+import { STYLE } from './ButtonDialpad.constants';
 import './ButtonDialpad.style.scss';
 import classnames from 'classnames';
 
-const ButtonDialpad = forwardRef((props: Props, providedRef: RefObject<HTMLButtonElement>) => {
-  const { className, disabled, size, ...otherProps } = props;
+import type { Button } from '@momentum-design/components';
+import type { Props } from './ButtonDialpad.types';
 
-  const children = props.children || props.primaryText;
+const ButtonDialpad = forwardRef((props: Props, providedRef: RefObject<Button>) => {
+  const { className, ...otherProps } = props;
 
   return (
-    <ButtonSimple
+    <MdcButton
       className={classnames(STYLE.wrapper, className)}
       ref={providedRef}
-      data-size={size || DEFAULTS.SIZE}
-      data-disabled={disabled || DEFAULTS.DISABLED}
-      isDisabled={disabled}
-      {...otherProps}
+      // size 40 is maximum size for MdcButton, setting it here and overriding
+      // size in scss file to 64px
+      size={40}
+      variant="tertiary"
+      {...(otherProps as any)}
     >
-      <div className={STYLE.primaryText}>{children}</div>
-      <div className={STYLE.secondaryText}>{props.secondaryText}</div>
-    </ButtonSimple>
+      <div className={STYLE.innerWrapper}>
+        <div className={STYLE.primaryText}>{props.primaryText}</div>
+        <div className={STYLE.secondaryText}>{props.secondaryText}</div>
+      </div>
+    </MdcButton>
   );
 });
 

src/components/ButtonDialpad/ButtonDialpad.types.ts

@@ -1,16 +1,5 @@
-import { ReactNode } from 'react';
-import { ButtonSimpleProps } from '../ButtonSimple';
-
-export interface Props extends ButtonSimpleProps {
-  /**
-   * Child components of this ButtonDialpad. This prop replaces primaryText.
-   */
-  children?: ReactNode;
-  /**
-   * Whether or not this ButtonDialpad is disabled.
-   */
-  disabled?: boolean;
-
+import type { MdcButtonProps } from '../../types';
+export interface Props extends Omit<MdcButtonProps, 'size' | 'variant'> {
   /**
    * Primary text to display above the secondary text.
    */
@@ -20,9 +9,4 @@ export interface Props extends ButtonSimpleProps {
    * Secondary text to display below the primary text.
    */
   secondaryText?: string;
-
-  /**
-   * Size index of this ButtonPill.
-   */
-  size?: number;
 }