mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
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>
This commit is contained in:
parent
a6d7c436bc
commit
1f0c0d041c
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
@ -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',
|
||||
|
@ -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)
|
||||
*/
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
@ -1,2 +1,2 @@
|
||||
export { Button } from './button';
|
||||
export { BUTTON_TYPES, BUTTON_SIZES } from './button.constants';
|
||||
export { BUTTON_VARIANT, BUTTON_SIZES } from './button.constants';
|
||||
|
@ -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';
|
||||
|
@ -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={() => {
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
>
|
||||
|
@ -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={() => {
|
||||
|
@ -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({
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user