From 71981b5c18f155420c6cc71a51cd719528fdd6a5 Mon Sep 17 00:00:00 2001
From: Christoph Scheffauer <scheffauerc@gmail.com>
Date: Thu, 10 Apr 2025 15:02:38 +0200
Subject: [PATCH 1/3] fix: migrate buttondialpad

---
 .../ButtonDialpad/ButtonDialpad.constants.ts  |   1 +
 .../ButtonDialpad.stories.args.ts             |  44 +-
 .../ButtonDialpad/ButtonDialpad.stories.tsx   |  11 +-
 .../ButtonDialpad/ButtonDialpad.style.scss    |  87 +--
 .../ButtonDialpad/ButtonDialpad.tsx           |  31 +-
 .../ButtonDialpad/ButtonDialpad.types.ts      |  20 +-
 .../ButtonDialpad/ButtonDialpad.unit.test.tsx | 180 ++----
 .../ButtonDialpad.unit.test.tsx.snap          | 571 +++++-------------
 8 files changed, 237 insertions(+), 708 deletions(-)

diff --git a/src/components/ButtonDialpad/ButtonDialpad.constants.ts b/src/components/ButtonDialpad/ButtonDialpad.constants.ts
index 4f99705f09..be0924d8c2 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.constants.ts
+++ b/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 };
diff --git a/src/components/ButtonDialpad/ButtonDialpad.stories.args.ts b/src/components/ButtonDialpad/ButtonDialpad.stories.args.ts
index d677d8311d..a9c8a06fe6 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.stories.args.ts
+++ b/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,
-      },
-    },
-  },
 };
diff --git a/src/components/ButtonDialpad/ButtonDialpad.stories.tsx b/src/components/ButtonDialpad/ButtonDialpad.stories.tsx
index dca8f7ff14..c526621075 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.stories.tsx
+++ b/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 };
diff --git a/src/components/ButtonDialpad/ButtonDialpad.style.scss b/src/components/ButtonDialpad/ButtonDialpad.style.scss
index 582856d200..060373a637 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.style.scss
+++ b/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;
     }
   }
 }
diff --git a/src/components/ButtonDialpad/ButtonDialpad.tsx b/src/components/ButtonDialpad/ButtonDialpad.tsx
index eca350ed20..d6aa6aaa42 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.tsx
+++ b/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>
   );
 });
 
diff --git a/src/components/ButtonDialpad/ButtonDialpad.types.ts b/src/components/ButtonDialpad/ButtonDialpad.types.ts
index 57af2fcf81..44d9ee6743 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.types.ts
+++ b/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;
 }
diff --git a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
index 9a90aa8664..ba10f5be02 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
+++ b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
@@ -1,234 +1,156 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { renderWithWebComponent } from '../../../test/utils';
 import { ButtonDialpad } from '@momentum-ui/react-collaboration';
-
-import { DEFAULTS, SIZES, STYLE } from './ButtonDialpad.constants';
-
-import ButtonSimple from '../ButtonSimple';
+import userEvent from '@testing-library/user-event';
+import { DEFAULTS, STYLE } from './ButtonDialpad.constants';
+import { screen } from '@testing-library/react';
 
 describe('<ButtonPill />', () => {
-  let container;
+  const setup = async (component: React.ReactElement) => {
+    return renderWithWebComponent(component);
+  };
 
   describe('snapshot', () => {
-    it('should match snapshot', () => {
-      expect.assertions(1);
-
-      container = mount(<ButtonDialpad>1</ButtonDialpad>);
-
-      expect(container).toMatchSnapshot();
-    });
-
-    it('should match snapshot with primaryText', () => {
-      expect.assertions(1);
-
-      container = mount(<ButtonDialpad primaryText="1" />);
-
-      expect(container).toMatchSnapshot();
-    });
-
-    it('should match snapshot with secondaryText', () => {
-      expect.assertions(1);
-
-      container = mount(<ButtonDialpad secondaryText="ABC" />);
-
-      expect(container).toMatchSnapshot();
-    });
-
-    it('should match snapshot with primaryText and secondaryText', () => {
+    it('should match snapshot', async () => {
       expect.assertions(1);
 
-      container = mount(<ButtonDialpad primaryText="1" secondaryText="ABC" />);
+      const { container } = await setup(<ButtonDialpad primaryText="1" />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with primaryText and children', () => {
+    it('should match snapshot with primaryText', async () => {
       expect.assertions(1);
 
-      container = mount(<ButtonDialpad primaryText="1">2</ButtonDialpad>);
+      const { container } = await setup(<ButtonDialpad primaryText="1" />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with primaryText, secondaryText and children', () => {
+    it('should match snapshot with secondaryText', async () => {
       expect.assertions(1);
 
-      container = mount(
-        <ButtonDialpad primaryText="1" secondaryText="ABC">
-          2
-        </ButtonDialpad>
-      );
+      const { container } = await setup(<ButtonDialpad secondaryText="ABC" />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with size', () => {
+    it('should match snapshot with primaryText and secondaryText', async () => {
       expect.assertions(1);
 
-      const size = SIZES[Object.keys(SIZES)[Object.keys(SIZES).length - 1]];
-
-      container = mount(<ButtonDialpad size={size}>Example Text</ButtonDialpad>);
+      const { container } = await setup(<ButtonDialpad primaryText="1" secondaryText="ABC" />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot when disabled', () => {
+    it('should match snapshot when disabled', async () => {
       expect.assertions(1);
 
       const disabled = !DEFAULTS.DISABLED;
 
-      container = mount(<ButtonDialpad disabled={disabled}>Example Text</ButtonDialpad>);
+      const { container } = await setup(
+        <ButtonDialpad disabled={disabled} primaryText="Example Text" />
+      );
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with title', () => {
+    it('should match snapshot with title', async () => {
       expect.assertions(1);
 
       const title = 'Example Text';
 
-      const container = mount(<ButtonDialpad title={title} />);
+      const { container } = await setup(<ButtonDialpad title={title} />);
 
       expect(container).toMatchSnapshot();
     });
   });
 
   describe('attributes', () => {
-    it('should have its main class', () => {
+    it('should have its main class', async () => {
       expect.assertions(1);
 
-      const element = mount(<ButtonDialpad />)
-        .find(ButtonDialpad)
-        .getDOMNode();
+      await setup(<ButtonDialpad primaryText="Example Text" />);
+      const element = screen.getByRole('button');
 
       expect(element.classList.contains(STYLE.wrapper)).toBe(true);
     });
 
-    it('should pass disabled prop', () => {
+    it('should pass disabled prop', async () => {
       expect.assertions(1);
 
-      const disabled = !DEFAULTS.DISABLED;
+      await setup(<ButtonDialpad disabled={true} primaryText="Example Text" />);
+      const element = screen.getByRole('button');
 
-      const element = mount(<ButtonDialpad disabled={disabled} />)
-        .find(ButtonDialpad)
-        .getDOMNode();
-
-      expect(element.getAttribute('data-disabled')).toBe(`${disabled}`);
+      expect(element.getAttribute('disabled')).not.toBeNull();
     });
 
-    it('should have custom class if provided', () => {
+    it('should have custom class if provided', async () => {
       const testClass = 'testClass';
 
-      const wrapper = mount(<ButtonDialpad className={testClass} />);
-      const element = wrapper.find(ButtonDialpad).getDOMNode();
+      await setup(<ButtonDialpad className={testClass} primaryText="Example Text" />);
+      const element = screen.getByRole('button');
 
       expect(element.classList.contains(testClass)).toBe(true);
     });
 
-    it('should pass size prop', () => {
-      expect.assertions(1);
-
-      const size = SIZES[Object.keys(SIZES)[Object.keys(SIZES).length - 1]];
-
-      const element = mount(<ButtonDialpad size={size} />)
-        .find(ButtonDialpad)
-        .getDOMNode();
-
-      expect(element.getAttribute('data-size')).toBe(`${size}`);
-    });
-
-    it('should pass child prop', () => {
-      expect.assertions(1);
-
-      const child = '1';
-
-      const element = mount(<ButtonDialpad>{child}</ButtonDialpad>)
-        .find(ButtonDialpad)
-        .getDOMNode();
-      const target = element.getElementsByClassName(STYLE.primaryText)[0];
-
-      expect(target.innerHTML).toBe(child);
-    });
-
-    it('should pass primaryText prop', () => {
+    it('should pass primaryText prop', async () => {
       expect.assertions(1);
 
       const primaryText = '1';
 
-      const element = mount(<ButtonDialpad primaryText={primaryText} />)
-        .find(ButtonDialpad)
-        .getDOMNode();
+      await setup(<ButtonDialpad primaryText={primaryText} />);
+      const element = screen.getByRole('button');
       const target = element.getElementsByClassName(STYLE.primaryText)[0];
 
       expect(target.innerHTML).toBe(primaryText);
     });
 
-    it('should pass secondaryText prop', () => {
+    it('should pass secondaryText prop', async () => {
       expect.assertions(1);
 
       const secondaryText = 'ABC';
 
-      const element = mount(<ButtonDialpad secondaryText={secondaryText} />)
-        .find(ButtonDialpad)
-        .getDOMNode();
+      await setup(<ButtonDialpad secondaryText={secondaryText} />);
+      const element = screen.getByRole('button');
       const target = element.getElementsByClassName(STYLE.secondaryText)[0];
 
       expect(target.innerHTML).toBe(secondaryText);
     });
 
-    it('should override primaryText prop with child prop', () => {
-      expect.assertions(2);
-
-      const primaryText = '1';
-      const child = '2';
-
-      const element = mount(<ButtonDialpad primaryText={primaryText}>{child}</ButtonDialpad>)
-        .find(ButtonDialpad)
-        .getDOMNode();
-      const target = element.getElementsByClassName(STYLE.primaryText)[0];
-
-      expect(target.innerHTML).toBe(child);
-      expect(target.innerHTML).not.toBe(primaryText);
-    });
-
-    it('should have provided title when title is provided', () => {
+    it('should have provided title when title is provided', async () => {
       expect.assertions(1);
 
       const title = 'Example Text';
 
-      const element = mount(<ButtonDialpad title={title} />)
-        .find(ButtonDialpad)
-        .getDOMNode();
+      await setup(<ButtonDialpad title={title} primaryText="Example Text" />);
+      const element = screen.getByRole('button');
 
       expect(element.getAttribute('title')).toBe(title);
     });
 
-    it('should render ButtonSimple', () => {
+    it('should render MdcButton', async () => {
       expect.assertions(1);
 
-      const container = mount(<ButtonDialpad />);
+      const { container } = await setup(<ButtonDialpad primaryText="Example Text" />);
+      const element = container.querySelector('mdc-button');
 
-      expect(container.find(ButtonSimple).exists()).toBe(true);
+      expect(element).not.toBeNull();
     });
   });
 
   describe('actions', () => {
-    it('should handle mouse press events', () => {
+    const user = userEvent.setup();
+
+    it('should handle mouse click events', async () => {
       expect.assertions(1);
 
       const mockCallback = jest.fn();
 
-      const component = mount(<ButtonDialpad onPress={mockCallback} />).find(ButtonDialpad);
-
-      component.props().onPress({
-        type: 'press',
-        pointerType: 'mouse',
-        altKey: false,
-        shiftKey: false,
-        ctrlKey: false,
-        metaKey: false,
-        target: component.getDOMNode(),
-      });
+      await setup(<ButtonDialpad onClick={mockCallback} primaryText="Example Text" />);
+
+      const component = screen.getByRole('button');
+      await user.click(component);
 
       expect(mockCallback).toBeCalledTimes(1);
     });
diff --git a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx.snap b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx.snap
index 840aa85ddb..9cd2425fa8 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx.snap
+++ b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx.snap
@@ -1,458 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ButtonPill /> snapshot should match snapshot 1`] = `
-<ButtonDialpad>
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
+<div>
+  <mdc-button
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    primarytext="1"
+    role="button"
+    size="40"
+    tabindex="0"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
+    <div
+      class="md-button-dialpad-inner-wrapper"
+    >
+      <div
+        class="md-button-dialpad-primary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            1
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+        1
+      </div>
+      <div
+        class="md-button-dialpad-secondary-text"
+      />
+    </div>
+  </mdc-button>
+</div>
 `;
 
 exports[`<ButtonPill /> snapshot should match snapshot when disabled 1`] = `
-<ButtonDialpad
-  disabled={true}
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={true}
-    data-size={64}
-    isDisabled={true}
+<div>
+  <mdc-button
+    aria-disabled="true"
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    disabled=""
+    internals-disabled=""
+    primarytext="Example Text"
+    role="button"
+    size="40"
+    tabindex="-1"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing
-      disabled={true}
+    <div
+      class="md-button-dialpad-inner-wrapper"
     >
-      <FocusRing
-        disabled={true}
-        focusClass="md-focus-ring-wrapper-disabled"
-        focusRingClass="md-focus-ring-wrapper-disabled"
+      <div
+        class="md-button-dialpad-primary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={true}
-          data-size={64}
-          disabled={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            Example Text
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+        Example Text
+      </div>
+      <div
+        class="md-button-dialpad-secondary-text"
+      />
+    </div>
+  </mdc-button>
+</div>
 `;
 
 exports[`<ButtonPill /> snapshot should match snapshot with primaryText 1`] = `
-<ButtonDialpad
-  primaryText="1"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
-    primaryText="1"
-  >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
-      >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            1
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
-`;
-
-exports[`<ButtonPill /> snapshot should match snapshot with primaryText and children 1`] = `
-<ButtonDialpad
-  primaryText="1"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
-    primaryText="1"
+<div>
+  <mdc-button
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    primarytext="1"
+    role="button"
+    size="40"
+    tabindex="0"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
+    <div
+      class="md-button-dialpad-inner-wrapper"
+    >
+      <div
+        class="md-button-dialpad-primary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            2
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+        1
+      </div>
+      <div
+        class="md-button-dialpad-secondary-text"
+      />
+    </div>
+  </mdc-button>
+</div>
 `;
 
 exports[`<ButtonPill /> snapshot should match snapshot with primaryText and secondaryText 1`] = `
-<ButtonDialpad
-  primaryText="1"
-  secondaryText="ABC"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
-    primaryText="1"
-    secondaryText="ABC"
+<div>
+  <mdc-button
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    primarytext="1"
+    role="button"
+    secondarytext="ABC"
+    size="40"
+    tabindex="0"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
+    <div
+      class="md-button-dialpad-inner-wrapper"
+    >
+      <div
+        class="md-button-dialpad-primary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            1
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          >
-            ABC
-          </div>
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
-`;
-
-exports[`<ButtonPill /> snapshot should match snapshot with primaryText, secondaryText and children 1`] = `
-<ButtonDialpad
-  primaryText="1"
-  secondaryText="ABC"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
-    primaryText="1"
-    secondaryText="ABC"
-  >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
+        1
+      </div>
+      <div
+        class="md-button-dialpad-secondary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            2
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          >
-            ABC
-          </div>
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+        ABC
+      </div>
+    </div>
+  </mdc-button>
+</div>
 `;
 
 exports[`<ButtonPill /> snapshot should match snapshot with secondaryText 1`] = `
-<ButtonDialpad
-  secondaryText="ABC"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
-    secondaryText="ABC"
-  >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
-      >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          />
-          <div
-            className="md-button-dialpad-secondary-text"
-          >
-            ABC
-          </div>
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
-`;
-
-exports[`<ButtonPill /> snapshot should match snapshot with size 1`] = `
-<ButtonDialpad
-  size={64}
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
+<div>
+  <mdc-button
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    role="button"
+    secondarytext="ABC"
+    size="40"
+    tabindex="0"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
+    <div
+      class="md-button-dialpad-inner-wrapper"
+    >
+      <div
+        class="md-button-dialpad-primary-text"
+      />
+      <div
+        class="md-button-dialpad-secondary-text"
       >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          >
-            Example Text
-          </div>
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+        ABC
+      </div>
+    </div>
+  </mdc-button>
+</div>
 `;
 
 exports[`<ButtonPill /> snapshot should match snapshot with title 1`] = `
-<ButtonDialpad
-  title="Example Text"
->
-  <ButtonSimple
-    className="md-button-dialpad-wrapper"
-    data-disabled={false}
-    data-size={64}
+<div>
+  <mdc-button
+    class="md-button-dialpad-wrapper"
+    color="default"
+    data-btn-type="pill"
+    role="button"
+    size="40"
+    tabindex="0"
     title="Example Text"
+    type="button"
+    variant="tertiary"
   >
-    <FocusRing>
-      <FocusRing
-        focusClass="md-focus-ring-wrapper children"
-        focusRingClass="md-focus-ring-wrapper children"
-      >
-        <button
-          className="md-button-dialpad-wrapper md-button-simple-wrapper"
-          data-disabled={false}
-          data-size={64}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchCancel={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          title="Example Text"
-          type="button"
-        >
-          <div
-            className="md-button-dialpad-primary-text"
-          />
-          <div
-            className="md-button-dialpad-secondary-text"
-          />
-        </button>
-      </FocusRing>
-    </FocusRing>
-  </ButtonSimple>
-</ButtonDialpad>
+    <div
+      class="md-button-dialpad-inner-wrapper"
+    >
+      <div
+        class="md-button-dialpad-primary-text"
+      />
+      <div
+        class="md-button-dialpad-secondary-text"
+      />
+    </div>
+  </mdc-button>
+</div>
 `;

From 9494a53498804fd20ad1795ed70503fade972b37 Mon Sep 17 00:00:00 2001
From: Christoph Scheffauer <scheffauerc@gmail.com>
Date: Fri, 11 Apr 2025 08:44:25 +0200
Subject: [PATCH 2/3] fix: based on comments

---
 .husky/commit-msg                                    |  2 +-
 .../AddReactionButton/AddReactionButton.tsx          |  2 +-
 .../ButtonDialpad/ButtonDialpad.constants.ts         | 12 +-----------
 src/components/ButtonDialpad/ButtonDialpad.tsx       |  2 +-
 .../ButtonDialpad/ButtonDialpad.unit.test.tsx        |  6 ++----
 src/components/ReactionBadge/ReactionBadge.tsx       |  2 +-
 6 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/.husky/commit-msg b/.husky/commit-msg
index 9b58085f55..554acec7c1 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx commitlint -e $HUSKY_GIT_PARAMS
+# npx commitlint -e $HUSKY_GIT_PARAMS
diff --git a/src/components/AddReactionButton/AddReactionButton.tsx b/src/components/AddReactionButton/AddReactionButton.tsx
index 69fb19fbcd..fe874a8890 100644
--- a/src/components/AddReactionButton/AddReactionButton.tsx
+++ b/src/components/AddReactionButton/AddReactionButton.tsx
@@ -24,7 +24,7 @@ const AddReactionButton = forwardRef((props: Props, providedRef: RefObject<Butto
       style={style}
       variant="secondary"
       prefixIcon="reactions-regular"
-      {...(otherProps as any)}
+      {...otherProps}
     />
   );
 });
diff --git a/src/components/ButtonDialpad/ButtonDialpad.constants.ts b/src/components/ButtonDialpad/ButtonDialpad.constants.ts
index be0924d8c2..1b3eb66abc 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.constants.ts
+++ b/src/components/ButtonDialpad/ButtonDialpad.constants.ts
@@ -1,15 +1,5 @@
 const CLASS_PREFIX = 'md-button-dialpad';
 
-const DEFAULTS = {
-  DISABLED: false,
-  SIZE: 64,
-};
-
-const SIZES = {
-  64: 64,
-  52: 52,
-};
-
 const STYLE = {
   primaryText: `${CLASS_PREFIX}-primary-text`,
   secondaryText: `${CLASS_PREFIX}-secondary-text`,
@@ -17,4 +7,4 @@ const STYLE = {
   innerWrapper: `${CLASS_PREFIX}-inner-wrapper`,
 };
 
-export { CLASS_PREFIX, DEFAULTS, SIZES, STYLE };
+export { CLASS_PREFIX, STYLE };
diff --git a/src/components/ButtonDialpad/ButtonDialpad.tsx b/src/components/ButtonDialpad/ButtonDialpad.tsx
index d6aa6aaa42..221a2bee1b 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.tsx
+++ b/src/components/ButtonDialpad/ButtonDialpad.tsx
@@ -19,7 +19,7 @@ const ButtonDialpad = forwardRef((props: Props, providedRef: RefObject<Button>)
       // size in scss file to 64px
       size={40}
       variant="tertiary"
-      {...(otherProps as any)}
+      {...otherProps}
     >
       <div className={STYLE.innerWrapper}>
         <div className={STYLE.primaryText}>{props.primaryText}</div>
diff --git a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
index ba10f5be02..18c3cfbcdf 100644
--- a/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
+++ b/src/components/ButtonDialpad/ButtonDialpad.unit.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { renderWithWebComponent } from '../../../test/utils';
 import { ButtonDialpad } from '@momentum-ui/react-collaboration';
 import userEvent from '@testing-library/user-event';
-import { DEFAULTS, STYLE } from './ButtonDialpad.constants';
+import { STYLE } from './ButtonDialpad.constants';
 import { screen } from '@testing-library/react';
 
 describe('<ButtonPill />', () => {
@@ -46,10 +46,8 @@ describe('<ButtonPill />', () => {
     it('should match snapshot when disabled', async () => {
       expect.assertions(1);
 
-      const disabled = !DEFAULTS.DISABLED;
-
       const { container } = await setup(
-        <ButtonDialpad disabled={disabled} primaryText="Example Text" />
+        <ButtonDialpad disabled={true} primaryText="Example Text" />
       );
 
       expect(container).toMatchSnapshot();
diff --git a/src/components/ReactionBadge/ReactionBadge.tsx b/src/components/ReactionBadge/ReactionBadge.tsx
index 3a311c1d10..09367ea36b 100644
--- a/src/components/ReactionBadge/ReactionBadge.tsx
+++ b/src/components/ReactionBadge/ReactionBadge.tsx
@@ -18,7 +18,7 @@ const ReactionBadge = forwardRef((props: Props, providedRef: RefObject<Button>)
       ref={providedRef}
       size={24}
       variant="secondary"
-      {...(otherProps as any)}
+      {...otherProps}
     >
       {reaction}
       <span className="reaction-badge-count">{count}</span>

From 854cf42ab85b25f2c1521ec3674a593333fb9d79 Mon Sep 17 00:00:00 2001
From: Christoph Scheffauer <scheffauerc@gmail.com>
Date: Fri, 11 Apr 2025 08:45:47 +0200
Subject: [PATCH 3/3] Update commit-msg

---
 .husky/commit-msg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.husky/commit-msg b/.husky/commit-msg
index 554acec7c1..9b58085f55 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# npx commitlint -e $HUSKY_GIT_PARAMS
+npx commitlint -e $HUSKY_GIT_PARAMS