ButtonSecondary to TS (#20411)

* ButtonSecondary to TS

* updating components and addressing errors

* lint and snapshot updates

* using Boolean conversion for className

* removing ValidButtonTag type

* fix text color when link

---------

Co-authored-by: garrettbear <gwhisten@gmail.com>

ui/components/app/modals/eth-sign-modal/eth-sign-modal.js

@@ -9,6 +9,7 @@ import {
   ButtonLink,
   ButtonPrimary,
   ButtonSecondary,
+  ButtonSecondarySize,
   FormTextField,
   Icon,
   IconName,
@@ -152,7 +153,11 @@ const EthSignModal = ({ hideModal }) => {
         gap={4}
         marginTop={6}
       >
-        <ButtonSecondary onClick={() => hideModal()} size={Size.LG} block>
+        <ButtonSecondary
+          onClick={() => hideModal()}
+          size={ButtonSecondarySize.Lg}
+          block
+        >
           {t('cancel')}
         </ButtonSecondary>
         {showTextField ? (

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

@@ -12,33 +12,28 @@ The `ButtonSecondary` is an extension of `ButtonBase` to support secondary style
 
 ## Props
 
-The `ButtonSecondary` 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={ButtonSecondary} />
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `Size.MD`
-
-Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
+Use the `size` prop and the `ButtonSecondarySize` enum from `./ui/components/component-library` to change the size of `ButtonSecondary`. Defaults to `ButtonSecondarySize.Md`
 
 Possible sizes include:
 
-- `Size.SM` 32px
-- `Size.MD` 40px
-- `Size.LG` 48px
+- `ButtonSecondarySize.Sm` 32px
+- `ButtonSecondarySize.Md` 40px
+- `ButtonSecondarySize.Lg` 48px
 
 <Canvas>
   <Story id="components-componentlibrary-buttonsecondary--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from  '../../component-library';
+import { ButtonSecondary, ButtonSecondarySize } from  '../../component-library';
 
-<ButtonSecondary size={Size.SM} />
-<ButtonSecondary size={Size.MD} />
-<ButtonSecondary size={Size.LG} />
+<ButtonSecondary size={ButtonSecondarySize.Sm} />
+<ButtonSecondary size={ButtonSecondarySize.Md} />
+<ButtonSecondary size={ButtonSecondarySize.Lg} />
 ```
 
 ### Danger

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

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

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import { ButtonBase } from '../button-base';
-import { Color } from '../../../helpers/constants/design-system';
-import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
-
-export const ButtonSecondary = ({
-  className,
-  danger,
-  disabled,
-  size = BUTTON_SECONDARY_SIZES.MD,
-  ...props
-}) => {
-  const buttonColor = danger ? Color.errorDefault : Color.primaryDefault;
-  return (
-    <ButtonBase
-      backgroundColor={Color.transparent}
-      borderColor={buttonColor}
-      color={buttonColor}
-      className={classnames(className, 'mm-button-secondary', {
-        'mm-button-secondary--type-danger': danger,
-        'mm-button-secondary--disabled': disabled,
-      })}
-      size={size}
-      {...{ disabled, ...props }}
-    />
-  );
-};
-
-ButtonSecondary.propTypes = {
-  /**
-   * An additional className to apply to the ButtonSecondary.
-   */
-  className: PropTypes.string,
-  /**
-   * When true, ButtonSecondary 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_SECONDARY_SIZES)),
-  /**
-   * ButtonSecondary accepts all the props from ButtonBase
-   */
-  ...ButtonBase.propTypes,
-};

ui/components/component-library/button-secondary/button-secondary.scss

@@ -1,5 +1,5 @@
 .mm-button-secondary {
-  &:hover {
+  &:hover:not(&--disabled) {
     color: var(--color-primary-inverse);
     background-color: var(--color-primary-default);
     box-shadow: var(--component-button-primary-shadow);
@@ -12,7 +12,7 @@
   }
 
   // Danger type
-  &--type-danger {
+  &--type-danger:not(&--disabled) {
     color: var(--color-error-default);
     border: 1px solid var(--color-error-default);
     background-color: transparent;

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

@@ -1,14 +1,9 @@
 import React from 'react';
-import {
-  AlignItems,
-  DISPLAY,
-  Size,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { IconName } from '..';
-import { ButtonSecondary } from './button-secondary';
-import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
+import { StoryFn, Meta } from '@storybook/react';
+import { AlignItems, Display } from '../../../helpers/constants/design-system';
+import { IconName, Box } from '..';
 import README from './README.mdx';
+import { ButtonSecondary, ButtonSecondarySize } from '.';
 
 const marginSizeControlOptions = [
   undefined,
@@ -84,7 +79,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_SECONDARY_SIZES),
+      options: Object.values(ButtonSecondarySize),
     },
     marginTop: {
       options: marginSizeControlOptions,
@@ -110,29 +105,29 @@ export default {
   args: {
     children: 'Button Secondary',
   },
-};
+} as Meta<typeof ButtonSecondary>;
 
 export const DefaultStory = (args) => <ButtonSecondary {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <ButtonSecondary {...args} size={Size.SM}>
+export const SizeStory: StoryFn<typeof ButtonSecondary> = (args) => (
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
+    <ButtonSecondary {...args} size={ButtonSecondarySize.Sm}>
       Small Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={Size.MD}>
+    <ButtonSecondary {...args} size={ButtonSecondarySize.Md}>
       Medium (Default) Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={Size.LG}>
+    <ButtonSecondary {...args} size={ButtonSecondarySize.Lg}>
       Large Button
     </ButtonSecondary>
   </Box>
 );
 SizeStory.storyName = 'Size';
 
-export const Danger = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const Danger: StoryFn<typeof ButtonSecondary> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <ButtonSecondary {...args}>Normal</ButtonSecondary>
     {/* Test Anchor tag to match exactly as button */}
     <ButtonSecondary as="a" {...args} href="#" danger>

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { ButtonBase, ButtonBaseProps } from '../button-base';
+import { Color } from '../../../helpers/constants/design-system';
+import { PolymorphicRef } from '../box';
+import type { ButtonSecondaryProps } from './button-secondary.types';
+import {
+  ButtonSecondarySize,
+  ButtonSecondaryComponent,
+} from './button-secondary.types';
+
+export const ButtonSecondary: ButtonSecondaryComponent = React.forwardRef(
+  <C extends React.ElementType = 'button' | 'a'>(
+    {
+      className = '',
+      danger,
+      disabled,
+      size = ButtonSecondarySize.Md,
+      ...props
+    }: ButtonSecondaryProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    const buttonColor = danger ? Color.errorDefault : Color.primaryDefault;
+    return (
+      <ButtonBase
+        backgroundColor={Color.transparent}
+        borderColor={buttonColor}
+        color={buttonColor}
+        className={classnames(className, 'mm-button-secondary', {
+          'mm-button-secondary--type-danger': Boolean(danger),
+          'mm-button-secondary--disabled': Boolean(disabled),
+        })}
+        size={size}
+        ref={ref}
+        {...{ disabled, ...(props as ButtonBaseProps<C>) }}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,38 @@
+import type { ButtonBaseStyleUtilityProps } from '../button-base/button-base.types';
+import type { PolymorphicComponentPropWithRef } from '../box';
+
+export enum ButtonSecondarySize {
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+}
+
+export interface ButtonSecondaryStyleUtilityProps
+  extends Omit<ButtonBaseStyleUtilityProps, 'size'> {
+  /**
+   * An additional className to apply to the ButtonSecondary.
+   */
+  className?: string;
+  /**
+   * When true, ButtonSecondary color becomes Danger.
+   */
+  danger?: boolean;
+  /**
+   * Boolean to disable button
+   */
+  disabled?: boolean;
+  /**
+   * Possible size values: 'ButtonSecondarySize.Sm'(32px), 'ButtonSecondarySize.Md'(40px), 'ButtonSecondarySize.Lg'(48px).
+   * Default value is 'ButtonSecondarySize.Md'.
+   */
+  size?: ButtonSecondarySize;
+}
+
+export type ButtonSecondaryProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ButtonSecondaryStyleUtilityProps>;
+
+export type ButtonSecondaryComponent = <
+  C extends React.ElementType = 'button' | 'a',
+>(
+  props: ButtonSecondaryProps<C>,
+) => React.ReactElement | null;

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

@@ -1,2 +0,0 @@
-export { ButtonSecondary } from './button-secondary';
-export { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';

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

@@ -0,0 +1,3 @@
+export { ButtonSecondary } from './button-secondary';
+export { ButtonSecondarySize } from './button-secondary.types';
+export type { ButtonSecondaryProps } from './button-secondary.types';

ui/components/component-library/index.js

@@ -20,7 +20,7 @@ export { ButtonBase, ButtonBaseSize } from './button-base';
 export { ButtonIcon, ButtonIconSize } from './button-icon';
 export { ButtonLink, ButtonLinkSize } from './button-link';
 export { ButtonPrimary, ButtonPrimarySize } from './button-primary';
-export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';
+export { ButtonSecondary, ButtonSecondarySize } from './button-secondary';
 export { Checkbox } from './checkbox';
 export { FormTextField } from './form-text-field';
 export { HeaderBase } from './header-base';

ui/components/multichain/account-details/account-details-display.js

@@ -13,7 +13,7 @@ import {
 } from '../../../selectors';
 import { isAbleToExportAccount } from '../../../helpers/utils/util';
 import {
-  BUTTON_SECONDARY_SIZES,
+  ButtonSecondarySize,
   ButtonSecondary,
   Box,
 } from '../../component-library';
@@ -74,7 +74,7 @@ export const AccountDetailsDisplay = ({
       {exportPrivateKeyFeatureEnabled ? (
         <ButtonSecondary
           block
-          size={BUTTON_SECONDARY_SIZES.LG}
+          size={ButtonSecondarySize.Lg}
           variant={TextVariant.bodyMd}
           onClick={() => {
             trackEvent({

ui/components/multichain/import-account/bottom-buttons.js

@@ -5,7 +5,7 @@ import {
   ButtonPrimary,
   ButtonSecondary,
   Box,
-  BUTTON_SECONDARY_SIZES,
+  ButtonSecondarySize,
 } from '../../component-library';
 import { Display } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -32,7 +32,7 @@ export default function BottomButtons({
           dispatch(actions.hideWarning());
           onActionComplete();
         }}
-        size={BUTTON_SECONDARY_SIZES.LG}
+        size={ButtonSecondarySize.Lg}
         block
       >
         {t('cancel')}
@@ -49,7 +49,7 @@ export default function BottomButtons({
           }
         }}
         disabled={isPrimaryDisabled}
-        size={BUTTON_SECONDARY_SIZES.LG}
+        size={ButtonSecondarySize.Lg}
         data-testid="import-account-confirm-button"
         block
       >

ui/components/multichain/import-nfts-modal/import-nfts-modal.js

@@ -44,6 +44,7 @@ import {
   Modal,
   ButtonPrimary,
   ButtonSecondary,
+  ButtonSecondarySize,
   Box,
   FormTextField,
   Label,
@@ -258,7 +259,7 @@ export const ImportNftsModal = ({ onClose }) => {
           paddingBottom={4}
         >
           <ButtonSecondary
-            size={Size.LG}
+            size={ButtonSecondarySize.Lg}
             onClick={() => onClose()}
             block
             className="import-nfts-modal__cancel-button"

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -29,7 +29,7 @@ import {
   TextColor,
 } from '../../../helpers/constants/design-system';
 import {
-  BUTTON_SECONDARY_SIZES,
+  ButtonSecondarySize,
   ButtonSecondary,
   Modal,
   ModalContent,
@@ -242,7 +242,7 @@ export const NetworkListMenu = ({ onClose }) => {
           ) : null}
           <Box padding={4}>
             <ButtonSecondary
-              size={BUTTON_SECONDARY_SIZES.LG}
+              size={ButtonSecondarySize.Lg}
               disabled={!isUnlocked}
               block
               onClick={() => {