ButtonPrimary to TS (#20390)

* ButtonPrimary to TS

* button primary to ts updates

* fixes

ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js

@@ -7,7 +7,7 @@ import {
   AvatarIcon,
   Button,
   BUTTON_LINK_SIZES,
-  BUTTON_PRIMARY_SIZES,
+  BUTTON_SIZES,
   BUTTON_VARIANT,
   ButtonLink,
   IconName,
@@ -123,7 +123,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
           >
             <Button
               variant={BUTTON_VARIANT.SECONDARY}
-              size={BUTTON_PRIMARY_SIZES.LG}
+              size={BUTTON_SIZES.LG}
               width={BLOCK_SIZES.FULL}
               className="snap-privacy-warning__cancel-button"
               onClick={onCanceled}
@@ -133,7 +133,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
             </Button>
             <Button
               variant={BUTTON_VARIANT.PRIMARY}
-              size={BUTTON_PRIMARY_SIZES.LG}
+              size={BUTTON_SIZES.LG}
               width={BLOCK_SIZES.FULL}
               className="snap-privacy-warning__ok-button"
               onClick={onAccepted}

ui/components/component-library/button-primary/README.mdx

@@ -12,33 +12,28 @@ The `ButtonPrimary` is an extension of `ButtonBase` to support primary styles.
 
 ## Props
 
-The `ButtonPrimary` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) and [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
-
 <ArgsTable of={ButtonPrimary} />
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonPrimary`. Defaults to `Size.MD`
-
-Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
+Use the `size` prop and the `ButtonPrimarySize` enum from `./ui/components/component-library` to change the size of `ButtonPrimary`. Defaults to `ButtonPrimarySize.Md`
 
 Possible sizes include:
 
-- `Size.SM` 32px
-- `Size.MD` 40px
-- `Size.LG` 48px
+- `ButtonPrimarySize.Sm` 32px
+- `ButtonPrimarySize.Md` 40px
+- `ButtonPrimarySize.Lg` 48px
 
 <Canvas>
   <Story id="components-componentlibrary-buttonprimary--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../../component-library';
+import { ButtonPrimary, ButtonPrimarySize } from '../../component-library';
 
-<ButtonPrimary size={Size.SM} />
-<ButtonPrimary size={Size.MD} />
-<ButtonPrimary size={Size.LG} />
+<ButtonPrimary size={ButtonPrimarySize.Sm} />
+<ButtonPrimary size={ButtonPrimarySize.Md} />
+<ButtonPrimary size={ButtonPrimarySize.Lg} />
 ```
 
 ### Danger

ui/components/component-library/button-primary/button-primary.constants.js

@@ -1,7 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-export const BUTTON_PRIMARY_SIZES = {
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-};

ui/components/component-library/button-primary/button-primary.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import { ButtonBase } from '../button-base';
-import {
-  BackgroundColor,
-  TextColor,
-} from '../../../helpers/constants/design-system';
-import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
-
-export const ButtonPrimary = ({
-  className,
-  danger,
-  disabled,
-  size = BUTTON_PRIMARY_SIZES.MD,
-  ...props
-}) => {
-  return (
-    <ButtonBase
-      backgroundColor={
-        danger ? BackgroundColor.errorDefault : BackgroundColor.primaryDefault
-      }
-      color={danger ? TextColor.errorInverse : TextColor.primaryInverse}
-      className={classnames(className, 'mm-button-primary', {
-        'mm-button-primary--type-danger': danger,
-        'mm-button-primary--disabled': disabled,
-      })}
-      size={size}
-      {...{ disabled, ...props }}
-    />
-  );
-};
-
-ButtonPrimary.propTypes = {
-  /**
-   * An additional className to apply to the ButtonPrimary.
-   */
-  className: PropTypes.string,
-  /**
-   * When true, `ButtonPrimary` color becomes Danger.
-   */
-  danger: PropTypes.bool,
-  /**
-   * Boolean to disable button
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
-   * Default value is 'SIZES.MD'.
-   */
-  size: PropTypes.oneOf(Object.values(BUTTON_PRIMARY_SIZES)),
-  /**
-   * ButtonPrimary accepts all the props from ButtonBase
-   */
-  ...ButtonBase.propTypes,
-};

ui/components/component-library/button-primary/button-primary.stories.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import {
-  AlignItems,
-  DISPLAY,
-  Size,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { IconName } from '..';
-import { ButtonPrimary } from './button-primary';
-
-import README from './README.mdx';
-import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
-
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
-
-export default {
-  title: 'Components/ComponentLibrary/ButtonPrimary',
-
-  component: ButtonPrimary,
-  parameters: {
-    docs: {
-      page: README,
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['button', 'a'],
-      table: { category: 'button base props' },
-    },
-    block: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    children: {
-      control: 'text',
-    },
-    className: {
-      control: 'text',
-    },
-    danger: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    startIconName: {
-      control: 'select',
-      options: Object.values(IconName),
-      table: { category: 'button base props' },
-    },
-    endIconName: {
-      control: 'select',
-      options: Object.values(IconName),
-      table: { category: 'button base props' },
-    },
-    startIconProps: {
-      control: 'object',
-      table: { category: 'button base props' },
-    },
-    endIconProps: {
-      control: 'object',
-      table: { category: 'button base props' },
-    },
-    loading: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    size: {
-      control: 'select',
-      options: Object.values(BUTTON_PRIMARY_SIZES),
-    },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-  },
-  args: {
-    children: 'Button Primary',
-  },
-};
-
-export const DefaultStory = (args) => <ButtonPrimary {...args} />;
-
-DefaultStory.storyName = 'Default';
-
-export const SizeStory = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <ButtonPrimary {...args} size={Size.SM}>
-      Small Button
-    </ButtonPrimary>
-    <ButtonPrimary {...args} size={Size.MD}>
-      Medium (Default) Button
-    </ButtonPrimary>
-    <ButtonPrimary {...args} size={Size.LG}>
-      Large Button
-    </ButtonPrimary>
-  </Box>
-);
-SizeStory.storyName = 'Size';
-
-export const Danger = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
-    <ButtonPrimary {...args}>Normal</ButtonPrimary>
-    {/* Test Anchor tag to match exactly as button */}
-    <ButtonPrimary as="a" {...args} href="#" danger>
-      Danger
-    </ButtonPrimary>
-  </Box>
-);

ui/components/component-library/button-primary/button-primary.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { AlignItems, Display } from '../../../helpers/constants/design-system';
+import { Box } from '..';
+import README from './README.mdx';
+import { ButtonPrimary, ButtonPrimarySize } from '.';
+
+export default {
+  title: 'Components/ComponentLibrary/ButtonPrimary',
+  component: ButtonPrimary,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+
+    size: {
+      control: 'select',
+      options: Object.values(ButtonPrimarySize),
+    },
+  },
+  args: {
+    children: 'Button Primary',
+  },
+} as Meta<typeof ButtonPrimary>;
+
+export const DefaultStory: StoryFn<typeof ButtonPrimary> = (args) => (
+  <ButtonPrimary {...args} />
+);
+
+DefaultStory.storyName = 'Default';
+
+export const SizeStory: StoryFn<typeof ButtonPrimary> = (args) => (
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
+    <ButtonPrimary {...args} size={ButtonPrimarySize.Sm}>
+      Small Button
+    </ButtonPrimary>
+    <ButtonPrimary {...args} size={ButtonPrimarySize.Md}>
+      Medium (Default) Button
+    </ButtonPrimary>
+    <ButtonPrimary {...args} size={ButtonPrimarySize.Lg}>
+      Large Button
+    </ButtonPrimary>
+  </Box>
+);
+SizeStory.storyName = 'Size';
+
+export const Danger: StoryFn<typeof ButtonPrimary> = (args) => (
+  <Box display={Display.Flex} gap={1}>
+    <ButtonPrimary {...args}>Normal</ButtonPrimary>
+    {/* Test Anchor tag to match exactly as button */}
+    <ButtonPrimary as="a" {...args} href="#" danger>
+      Danger
+    </ButtonPrimary>
+  </Box>
+);

ui/components/component-library/button-primary/button-primary.test.tsx

@@ -2,8 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { IconName } from '..';
-import { ButtonPrimary } from './button-primary';
-import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
+import { ButtonPrimary, ButtonPrimarySize } from '.';
 
 describe('ButtonPrimary', () => {
   it('should render button element correctly', () => {
@@ -43,28 +42,28 @@ describe('ButtonPrimary', () => {
     const { getByTestId } = render(
       <>
         <ButtonPrimary
-          size={BUTTON_PRIMARY_SIZES.SM}
-          data-testid={BUTTON_PRIMARY_SIZES.SM}
+          size={ButtonPrimarySize.Sm}
+          data-testid={ButtonPrimarySize.Sm}
         />
         <ButtonPrimary
-          size={BUTTON_PRIMARY_SIZES.MD}
-          data-testid={BUTTON_PRIMARY_SIZES.MD}
+          size={ButtonPrimarySize.Md}
+          data-testid={ButtonPrimarySize.Md}
         />
         <ButtonPrimary
-          size={BUTTON_PRIMARY_SIZES.LG}
-          data-testid={BUTTON_PRIMARY_SIZES.LG}
+          size={ButtonPrimarySize.Lg}
+          data-testid={ButtonPrimarySize.Lg}
         />
       </>,
     );
 
-    expect(getByTestId(BUTTON_PRIMARY_SIZES.SM)).toHaveClass(
-      `mm-button-base--size-${BUTTON_PRIMARY_SIZES.SM}`,
+    expect(getByTestId(ButtonPrimarySize.Sm)).toHaveClass(
+      `mm-button-base--size-${ButtonPrimarySize.Sm}`,
     );
-    expect(getByTestId(BUTTON_PRIMARY_SIZES.MD)).toHaveClass(
-      `mm-button-base--size-${BUTTON_PRIMARY_SIZES.MD}`,
+    expect(getByTestId(ButtonPrimarySize.Md)).toHaveClass(
+      `mm-button-base--size-${ButtonPrimarySize.Md}`,
     );
-    expect(getByTestId(BUTTON_PRIMARY_SIZES.LG)).toHaveClass(
-      `mm-button-base--size-${BUTTON_PRIMARY_SIZES.LG}`,
+    expect(getByTestId(ButtonPrimarySize.Lg)).toHaveClass(
+      `mm-button-base--size-${ButtonPrimarySize.Lg}`,
     );
   });
 

ui/components/component-library/button-primary/button-primary.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classnames from 'classnames';
+import { ButtonBase } from '../button-base';
+import {
+  BackgroundColor,
+  IconColor,
+  TextColor,
+} from '../../../helpers/constants/design-system';
+import type { PolymorphicRef } from '../box';
+import type { ButtonBaseProps } from '../button-base';
+import type { ButtonPrimaryProps } from './button-primary.types';
+import {
+  ButtonPrimarySize,
+  ButtonPrimaryComponent,
+} from './button-primary.types';
+
+export const ButtonPrimary: ButtonPrimaryComponent = React.forwardRef(
+  <C extends React.ElementType = 'button' | 'a'>(
+    {
+      className,
+      danger,
+      disabled,
+      size = ButtonPrimarySize.Md,
+      ...props
+    }: ButtonPrimaryProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <ButtonBase
+        backgroundColor={
+          danger ? BackgroundColor.errorDefault : BackgroundColor.primaryDefault
+        }
+        color={danger ? TextColor.errorInverse : TextColor.primaryInverse}
+        className={classnames(className, 'mm-button-primary', {
+          'mm-button-primary--type-danger': danger,
+          'mm-button-primary--disabled': disabled,
+        })}
+        iconLoadingProps={{
+          color: danger ? IconColor.errorInverse : IconColor.primaryInverse,
+        }}
+        size={size}
+        ref={ref}
+        {...{ disabled, ...(props as ButtonBaseProps<C>) }}
+      />
+    );
+  },
+);

ui/components/component-library/button-primary/button-primary.types.ts

@@ -0,0 +1,40 @@
+import type { ButtonBaseStyleUtilityProps } from '../button-base/button-base.types';
+import type { PolymorphicComponentPropWithRef } from '../box';
+
+export enum ButtonPrimarySize {
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+}
+
+export type ValidButtonTagType = 'button' | 'a';
+export interface ButtonPrimaryStyleUtilityProps
+  extends Omit<ButtonBaseStyleUtilityProps, 'size'> {
+  /**
+   * Boolean to change button type to Danger when true
+   */
+  danger: boolean;
+  /**
+   * Boolean to disable button
+   */
+  disabled: boolean;
+  /**
+   * Boolean to show loading spinner in button
+   */
+  loading: boolean;
+  /**
+   * Possible size values: 'ButtonPrimarySize.Sm'(32px),
+   * 'ButtonPrimarySize.Md'(40px), 'ButtonPrimarySize.Lg'(48px)
+   * Default value is 'ButtonPrimarySize.Auto'.
+   */
+  size: ButtonPrimarySize;
+}
+
+export type ButtonPrimaryProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ButtonPrimaryStyleUtilityProps>;
+
+export type ButtonPrimaryComponent = <
+  C extends React.ElementType = 'button' | 'a',
+>(
+  props: ButtonPrimaryProps<C>,
+) => React.ReactElement | null;

ui/components/component-library/button-primary/index.js

@@ -1,2 +0,0 @@
-export { ButtonPrimary } from './button-primary';
-export { BUTTON_PRIMARY_SIZES } from './button-primary.constants';

ui/components/component-library/button-primary/index.ts

@@ -0,0 +1,3 @@
+export { ButtonPrimary } from './button-primary';
+export { ButtonPrimarySize } from './button-primary.types';
+export type { ButtonPrimaryProps } from './button-primary.types';

ui/components/component-library/index.js

@@ -19,7 +19,7 @@ export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button';
 export { ButtonBase, ButtonBaseSize } from './button-base';
 export { ButtonIcon, ButtonIconSize } from './button-icon';
 export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
-export { ButtonPrimary, BUTTON_PRIMARY_SIZES } from './button-primary';
+export { ButtonPrimary, ButtonPrimarySize } from './button-primary';
 export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';
 export { Checkbox } from './checkbox';
 export { FormTextField } from './form-text-field';