Update Button prop name type to variant (#18774)

* Update Button prop name type to variant * fix: lint errors on running test cases * change remaining files * change typo: BUTTON_VARIANTS to BUTTON_VARIANT * fix: button.test.js lint errors * update: button instances & import in remaing files * fix: prettier warnings --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com>
2024-11-22 09:57:02 +01:00 · 2023-04-26 21:17:25 +05:00 · 2023-04-26 21:17:25 +05:00 · 1f0c0d041c
commit 1f0c0d041c
parent a6d7c436bc
18 changed files with 77 additions and 74 deletions
--- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
+++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
@ -5,7 +5,7 @@ import Box from '../../../ui/box';
 import {
  Text,
  Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  ButtonIcon,
  IconName,
 } from '../../../component-library';
@ -86,7 +86,7 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
            </Text>,
            <Button
              key="hold-to-reveal-5"
-              type={BUTTON_TYPES.LINK}
+              variant={BUTTON_VARIANT.LINK}
              size={Size.auto}
              href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
              target="_blank"
--- a/ui/components/app/snaps/snap-version/snap-version.js
+++ b/ui/components/app/snaps/snap-version/snap-version.js
@ -10,7 +10,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
 import {
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  Button,
  Icon,
  IconName,
@ -24,7 +24,7 @@ const SnapVersion = ({ version, url }) => {
  const t = useI18nContext();
  return (
    <Button
-      type={BUTTON_TYPES.LINK}
+      variant={BUTTON_VARIANT.LINK}
      href={url}
      target="_blank"
      className="snap-version"
--- a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
+++ b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
@ -12,7 +12,7 @@ import {
 import {
  Text,
  Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  ButtonLink,
  Label,
 } from '../../component-library';
@ -64,7 +64,7 @@ export default function TermsOfUsePopup({ onAccept }) {
      footer={
        <>
          <Button
-            type={BUTTON_TYPES.PRIMARY}
+            variant={BUTTON_VARIANT.PRIMARY}
            className="terms-of-use__button"
            onClick={onAccept}
            disabled={!isTermsOfUseChecked}
--- a/ui/components/component-library/button/README.mdx
+++ b/ui/components/component-library/button/README.mdx
@ -25,26 +25,26 @@ The `Button` accepts all [ButtonPrimary](/docs/components-componentlibrary-butto

 <ArgsTable of={ButtonLink} />

-### Type
+### Variant

-Use the `type` prop and the `BUTTON_TYPES` object from `./button.constants.js` to change the `Button` type.
+Use the `variant` prop and the `BUTTON_VARIANT` object from `./button.constants.js` to change the `Button` variant.

-Possible types include:
+Possible variants include:

- `BUTTON_TYPES.PRIMARY`
- `BUTTON_TYPES.SECONDARY`
- `BUTTON_TYPES.LINK`
+- `BUTTON_VARIANT.PRIMARY`
+- `BUTTON_VARIANT.SECONDARY`
+- `BUTTON_VARIANT.LINK`

 <Canvas>
-  <Story id="components-componentlibrary-button--type" />
+  <Story id="components-componentlibrary-button--variant" />
 </Canvas>

 ```jsx
-import { Button, BUTTON_TYPES } from '../ui/component-library/button';
+import { Button, BUTTON_VARIANT } from '../ui/component-library/button';

-<Button type={BUTTON_TYPES.PRIMARY}>Button Primary</Button>
-<Button type={BUTTON_TYPES.SECONDARY}>Button Secondary</Button>
-<Button type={BUTTON_TYPES.LINK}>Button Link</Button>
+<Button variant={BUTTON_VARIANT.PRIMARY}>Button Primary</Button>
+<Button variant={BUTTON_VARIANT.SECONDARY}>Button Secondary</Button>
+<Button variant={BUTTON_VARIANT.LINK}>Button Link</Button>
 ```

 ### Size
--- a/ui/components/component-library/button/button.constants.js
+++ b/ui/components/component-library/button/button.constants.js
@ -8,7 +8,7 @@ export const BUTTON_SIZES = {
  AUTO: Size.auto,
 };

-export const BUTTON_TYPES = {
+export const BUTTON_VARIANT = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  LINK: 'link',
--- a/ui/components/component-library/button/button.js
+++ b/ui/components/component-library/button/button.js
@ -5,15 +5,15 @@ import { ButtonPrimary } from '../button-primary';
 import { ButtonSecondary } from '../button-secondary';
 import { ButtonLink } from '../button-link';

-import { BUTTON_TYPES } from './button.constants';
+import { BUTTON_VARIANT } from './button.constants';

-export const Button = ({ type, ...props }) => {
-  switch (type) {
-    case BUTTON_TYPES.PRIMARY:
+export const Button = ({ variant, ...props }) => {
+  switch (variant) {
+    case BUTTON_VARIANT.PRIMARY:
      return <ButtonPrimary {...props} />;
-    case BUTTON_TYPES.SECONDARY:
+    case BUTTON_VARIANT.SECONDARY:
      return <ButtonSecondary {...props} />;
-    case BUTTON_TYPES.LINK:
+    case BUTTON_VARIANT.LINK:
      return <ButtonLink {...props} />;
    default:
      return <ButtonPrimary {...props} />;
@ -22,11 +22,11 @@ export const Button = ({ type, ...props }) => {

 Button.propTypes = {
  /**
-   * Select the type of Button.
-   * Possible values could be 'BUTTON_TYPES.PRIMARY', 'BUTTON_TYPES.SECONDARY', 'BUTTON_TYPES.LINK'
-   * Button will default to `BUTTON_TYPES.PRIMARY`
+   * Select the variant of Button.
+   * Possible values could be 'BUTTON_VARIANT.PRIMARY', 'BUTTON_VARIANT.SECONDARY', 'BUTTON_VARIANT.LINK'
+   * Button will default to `BUTTON_VARIANT.PRIMARY`
   */
-  type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
+  variant: PropTypes.oneOf(Object.values(BUTTON_VARIANT)),
  /**
   * Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
   */
--- a/ui/components/component-library/button/button.stories.js
+++ b/ui/components/component-library/button/button.stories.js
@ -11,7 +11,7 @@ import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
 import Box from '../../ui/box/box';
 import { Text } from '../text';
 import README from './README.mdx';
-import { Button, BUTTON_TYPES } from '.';
+import { Button, BUTTON_VARIANT } from '.';

 const marginSizeControlOptions = [
  undefined,
@ -85,8 +85,8 @@ export default {
      control: 'select',
      options: Object.values(BUTTON_LINK_SIZES),
    },
-    type: {
-      options: Object.values(BUTTON_TYPES),
+    variant: {
+      options: Object.values(BUTTON_VARIANT),
      control: 'select',
    },
    marginTop: {
@ -119,15 +119,15 @@ export const DefaultStory = (args) => <Button {...args} />;

 DefaultStory.storyName = 'Default';

-export const Type = (args) => (
+export const Variant = (args) => (
  <Box display={DISPLAY.FLEX} gap={1}>
-    <Button type={BUTTON_TYPES.PRIMARY} {...args}>
+    <Button variant={BUTTON_VARIANT.PRIMARY} {...args}>
      Button Primary
    </Button>
-    <Button type={BUTTON_TYPES.SECONDARY} {...args}>
+    <Button variant={BUTTON_VARIANT.SECONDARY} {...args}>
      Button Secondary
    </Button>
-    <Button type={BUTTON_TYPES.LINK} {...args}>
+    <Button variant={BUTTON_VARIANT.LINK} {...args}>
      Button Link
    </Button>
  </Box>
@ -150,12 +150,12 @@ export const SizeStory = (args) => (
      <Button {...args} size={Size.LG}>
        Large Button
      </Button>
-      <Button {...args} type={BUTTON_TYPES.LINK}>
+      <Button {...args} variant={BUTTON_VARIANT.LINK}>
        Auto ButtonLink
      </Button>
    </Box>
    <Text variant={TextVariant.bodySm}>
-      <Button {...args} type={BUTTON_TYPES.LINK} size={Size.inherit}>
+      <Button {...args} variant={BUTTON_VARIANT.LINK} size={Size.inherit}>
        Button Inherit
      </Button>{' '}
      inherits the font-size of the parent element. Inherit size only used for
--- a/ui/components/component-library/button/button.test.js
+++ b/ui/components/component-library/button/button.test.js
@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { IconName } from '..';
-import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
+import { BUTTON_SIZES, BUTTON_VARIANT } from './button.constants';
 import { Button } from './button';

 describe('Button', () => {
@ -46,28 +46,31 @@ describe('Button', () => {
  it('should render with different button types', () => {
    const { getByTestId, container } = render(
      <>
-        <Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
-          Button
-        </Button>
        <Button
-          type={BUTTON_TYPES.SECONDARY}
-          data-testid={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.PRIMARY}
+          data-testid={BUTTON_VARIANT.PRIMARY}
        >
          Button
        </Button>
-        <Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
+        <Button
+          variant={BUTTON_VARIANT.SECONDARY}
+          data-testid={BUTTON_VARIANT.SECONDARY}
+        >
+          Button
+        </Button>
+        <Button variant={BUTTON_VARIANT.LINK} data-testid={BUTTON_VARIANT.LINK}>
          Button
        </Button>
      </>,
    );
-    expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.PRIMARY}`,
+    expect(getByTestId(BUTTON_VARIANT.PRIMARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.PRIMARY}`,
    );
-    expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.SECONDARY}`,
+    expect(getByTestId(BUTTON_VARIANT.SECONDARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.SECONDARY}`,
    );
-    expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.LINK}`,
+    expect(getByTestId(BUTTON_VARIANT.LINK)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.LINK}`,
    );
    expect(container).toMatchSnapshot();
  });
@ -77,7 +80,7 @@ describe('Button', () => {
      <>
        <Button
          size={BUTTON_SIZES.INHERIT}
-          type={BUTTON_TYPES.LINK}
+          variant={BUTTON_VARIANT.LINK}
          data-testid={BUTTON_SIZES.INHERIT}
        >
          Button {BUTTON_SIZES.INHERIT}
--- a/ui/components/component-library/button/index.js
+++ b/ui/components/component-library/button/index.js
@ -1,2 +1,2 @@
 export { Button } from './button';
-export { BUTTON_TYPES, BUTTON_SIZES } from './button.constants';
+export { BUTTON_VARIANT, BUTTON_SIZES } from './button.constants';
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@ -14,7 +14,7 @@ export {
  BadgeWrapperAnchorElementShape,
 } from './badge-wrapper';
 export { AvatarBase } from './avatar-base';
-export { Button, BUTTON_TYPES, BUTTON_SIZES } from './button';
+export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button';
 export { ButtonBase, BUTTON_BASE_SIZES } from './button-base';
 export { ButtonIcon, ButtonIconSize } from './button-icon';
 export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
--- a/ui/components/institutional/compliance-settings/compliance-settings.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.js
@ -14,7 +14,7 @@ import { mmiActionsFactory } from '../../../store/institutional/institution-back
 import {
  Text,
  Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  BUTTON_SIZES,
 } from '../../component-library';
 import Box from '../../ui/box';
@ -30,7 +30,7 @@ const ComplianceSettings = () => {

  const linkButton = (
    <Button
-      type={BUTTON_TYPES.LINK}
+      variant={BUTTON_VARIANT.LINK}
      size={BUTTON_SIZES.LG}
      data-testid="start-compliance"
      onClick={() => {
--- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
+++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
@ -27,7 +27,7 @@ import {
  TextColor,
  TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Text, Button } from '../../component-library';
+import { Text, Button, BUTTON_VARIANT } from '../../component-library';

 const CustodyConfirmLink = () => {
  const t = useI18nContext();
@ -122,7 +122,7 @@ const CustodyConfirmLink = () => {
        {text || t('custodyDeeplinkDescription', [displayName])}
      </Text>
      <Button
-        type="primary"
+        variant={BUTTON_VARIANT.PRIMARY}
        className="custody-confirm-link__btn"
        onClick={onClick}
      >
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@ -24,7 +24,7 @@ import {
  DISPLAY,
  JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { Button, BUTTON_TYPES, Text } from '../../component-library';
+import { Button, BUTTON_VARIANT, Text } from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@ -97,7 +97,7 @@ export const NetworkListMenu = ({ onClose }) => {
        </Box>
        <Box padding={4}>
          <Button
-            type={BUTTON_TYPES.SECONDARY}
+            variant={BUTTON_VARIANT.SECONDARY}
            block
            onClick={() => {
              isFullScreen
--- a/ui/pages/create-account/connect-hardware/index.js
+++ b/ui/pages/create-account/connect-hardware/index.js
@ -21,7 +21,7 @@ import {
  LedgerTransportTypes,
 } from '../../../../shared/constants/hardware-wallets';
 import {
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  BUTTON_SIZES,
  Button,
  Text,
@ -306,7 +306,7 @@ class ConnectHardwareForm extends Component {
              {this.context.t('troubleConnectingToLedgerU2FOnFirefox', [
                // eslint-disable-next-line react/jsx-key
                <Button
-                  type={BUTTON_TYPES.LINK}
+                  variant={BUTTON_VARIANT.LINK}
                  href={ZENDESK_URLS.HARDWARE_CONNECTION}
                  size={BUTTON_SIZES.INHERIT}
                  key="u2f-error-1"
@ -325,7 +325,7 @@ class ConnectHardwareForm extends Component {
                [
                  // eslint-disable-next-line react/jsx-key
                  <Button
-                    type={BUTTON_TYPES.LINK}
+                    variant={BUTTON_VARIANT.LINK}
                    href={ZENDESK_URLS.LEDGER_FIREFOX_U2F_GUIDE}
                    size={BUTTON_SIZES.INHERIT}
                    key="u2f-error-1"
@ -349,7 +349,7 @@ class ConnectHardwareForm extends Component {
            this.state.device,
            // eslint-disable-next-line react/jsx-key
            <Button
-              type={BUTTON_TYPES.LINK}
+              variant={BUTTON_VARIANT.LINK}
              href={ZENDESK_URLS.HARDWARE_CONNECTION}
              key="u2f-error-1"
            >
--- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
+++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
@ -22,7 +22,7 @@ import {
  ButtonLink,
  Button,
  BUTTON_SIZES,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
 } from '../../../components/component-library';
 import Box from '../../../components/ui/box';

@ -183,7 +183,7 @@ const ConfirmAddCustodianToken = () => {
          <Box display={DISPLAY.FLEX} gap={4}>
            <Button
              block
-              type={BUTTON_TYPES.SECONDARY}
+              variant={BUTTON_VARIANT.SECONDARY}
              size={BUTTON_SIZES.LG}
              data-testid="cancel-btn"
              onClick={() => {
--- a/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js
+++ b/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js
@ -10,7 +10,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import {
  Text,
  BUTTON_SIZES,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
 } from '../../../components/component-library';
 import {
  TextColor,
@ -181,7 +181,7 @@ export default function ConfirmAddInstitutionalFeature({ history }) {
          <Box display={DISPLAY.FLEX} gap={4}>
            <Button
              block
-              type={BUTTON_TYPES.SECONDARY}
+              type={BUTTON_VARIANT.SECONDARY}
              size={BUTTON_SIZES.LG}
              onClick={() => {
                removeConnectInstitutionalFeature({
--- a/ui/pages/keychains/reveal-seed.js
+++ b/ui/pages/keychains/reveal-seed.js
@ -28,7 +28,7 @@ import {
  Button,
  TextField,
  HelpText,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
  TEXT_FIELD_SIZES,
  TEXT_FIELD_TYPES,
  BUTTON_SIZES,
@ -202,7 +202,7 @@ const RevealSeedPage = () => {
        <Button
          width={BLOCK_SIZES.FULL}
          size={Size.LG}
-          type={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.SECONDARY}
          onClick={() => {
            trackEvent({
              category: MetaMetricsEventCategory.Keys,
@ -241,7 +241,7 @@ const RevealSeedPage = () => {
    return (
      <Box marginTop="auto">
        <Button
-          type={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.SECONDARY}
          width={BLOCK_SIZES.FULL}
          size={Size.LG}
          onClick={() => history.push(mostRecentOverviewPage)}
@ -278,7 +278,7 @@ const RevealSeedPage = () => {
        {t('revealSeedWordsDescription1', [
          <Button
            key="srp-learn-srp"
-            type={BUTTON_TYPES.LINK}
+            variant={BUTTON_VARIANT.LINK}
            size={BUTTON_SIZES.INHERIT}
            as="a"
            href={ZENDESK_URLS.SECRET_RECOVERY_PHRASE}
@ -300,7 +300,7 @@ const RevealSeedPage = () => {
        {t('revealSeedWordsDescription2', [
          <Button
            key="srp-learn-more-non-custodial"
-            type={BUTTON_TYPES.LINK}
+            variant={BUTTON_VARIANT.LINK}
            size={BUTTON_SIZES.INHERIT}
            as="a"
            href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
--- a/ui/pages/settings/snaps/view-snap/view-snap.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.js
@ -33,7 +33,7 @@ import {
  getTargetSubjectMetadata,
 } from '../../../../selectors';
 import { getSnapName } from '../../../../helpers/utils/util';
-import { Text, BUTTON_TYPES } from '../../../../components/component-library';
+import { Text, BUTTON_VARIANT } from '../../../../components/component-library';
 import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list';
 import { SnapDelineator } from '../../../../components/app/snaps/snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/flask';
@ -137,7 +137,7 @@ function ViewSnap() {
            {shouldDisplayMoreButton && (
              <Button
                className="view-snap__description__more-button"
-                type={BUTTON_TYPES.LINK}
+                type={BUTTON_VARIANT.LINK}
                onClick={handleMoreClick}
              >
                <Text color={Color.infoDefault}>{t('more')}</Text>