diff --git 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 index bf4b42ccf050..3cd352e9a6c6 100644 --- 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 }) => { , - - + + + ``` ### Size diff --git a/ui/components/component-library/button/button.constants.js b/ui/components/component-library/button/button.constants.js index 4f5f6ef0f272..b555bb11a786 100644 --- 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', diff --git a/ui/components/component-library/button/button.js b/ui/components/component-library/button/button.js index eaaa5486b13a..111a01458796 100644 --- 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 ; - case BUTTON_TYPES.SECONDARY: + case BUTTON_VARIANT.SECONDARY: return ; - case BUTTON_TYPES.LINK: + case BUTTON_VARIANT.LINK: return ; default: return ; @@ -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) */ diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js index e85d37fa6a67..bc2176611dbe 100644 --- 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) => - - @@ -150,12 +150,12 @@ export const SizeStory = (args) => ( - - {' '} inherits the font-size of the parent element. Inherit size only used for diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js index 1fd245238afd..f612b4da60b0 100644 --- 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( <> - - , ); - 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', () => { <>