Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Button prop name type to variant #18774

Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Box from '../../../ui/box';
import {
Text,
Button,
BUTTON_TYPES,
BUTTON_VARIANTS,
ButtonIcon,
IconName,
} from '../../../component-library';
Expand Down Expand Up @@ -86,7 +86,7 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
</Text>,
<Button
key="hold-to-reveal-5"
type={BUTTON_TYPES.LINK}
variant={BUTTON_VARIANTS.LINK}
size={Size.auto}
href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
target="_blank"
Expand Down
4 changes: 2 additions & 2 deletions ui/components/app/terms-of-use-popup/terms-of-use-popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import {
Text,
Button,
BUTTON_TYPES,
BUTTON_VARIANTS,
ButtonLink,
Label,
} from '../../component-library';
Expand Down Expand Up @@ -64,7 +64,7 @@ export default function TermsOfUsePopup({ onAccept }) {
footer={
<>
<Button
type={BUTTON_TYPES.PRIMARY}
variant={BUTTON_VARIANTS.PRIMARY}
className="terms-of-use__button"
onClick={onAccept}
disabled={!isTermsOfUseChecked}
Expand Down
22 changes: 11 additions & 11 deletions ui/components/component-library/button/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS` 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_VARIANTS.PRIMARY`
- `BUTTON_VARIANTS.SECONDARY`
- `BUTTON_VARIANTS.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_VARIANTS } 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_VARIANTS.PRIMARY}>Button Primary</Button>
<Button variant={BUTTON_VARIANTS.SECONDARY}>Button Secondary</Button>
<Button variant={BUTTON_VARIANTS.LINK}>Button Link</Button>
```

### Size
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const BUTTON_SIZES = {
AUTO: Size.auto,
};

export const BUTTON_TYPES = {
export const BUTTON_VARIANTS = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
LINK: 'link',
Expand Down
20 changes: 10 additions & 10 deletions ui/components/component-library/button/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS } from './button.constants';

export const Button = ({ type, ...props }) => {
switch (type) {
case BUTTON_TYPES.PRIMARY:
export const Button = ({ variant, ...props }) => {
switch (variant) {
case BUTTON_VARIANTS.PRIMARY:
return <ButtonPrimary {...props} />;
case BUTTON_TYPES.SECONDARY:
case BUTTON_VARIANTS.SECONDARY:
return <ButtonSecondary {...props} />;
case BUTTON_TYPES.LINK:
case BUTTON_VARIANTS.LINK:
return <ButtonLink {...props} />;
default:
return <ButtonPrimary {...props} />;
Expand All @@ -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_VARIANTS.PRIMARY', 'BUTTON_VARIANTS.SECONDARY', 'BUTTON_VARIANTS.LINK'
* Button will default to `BUTTON_VARIANTS.PRIMARY`
*/
type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
variant: PropTypes.oneOf(Object.values(BUTTON_VARIANTS)),
/**
* Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
*/
Expand Down
18 changes: 9 additions & 9 deletions ui/components/component-library/button/button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS } from '.';

const marginSizeControlOptions = [
undefined,
Expand Down Expand Up @@ -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_VARIANTS),
control: 'select',
},
marginTop: {
Expand Down Expand Up @@ -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_VARIANTS.PRIMARY} {...args}>
Button Primary
</Button>
<Button type={BUTTON_TYPES.SECONDARY} {...args}>
<Button variant={BUTTON_VARIANTS.SECONDARY} {...args}>
Button Secondary
</Button>
<Button type={BUTTON_TYPES.LINK} {...args}>
<Button variant={BUTTON_VARIANTS.LINK} {...args}>
Button Link
</Button>
</Box>
Expand All @@ -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_VARIANTS.LINK}>
Auto ButtonLink
</Button>
</Box>
<Text variant={TextVariant.bodySm}>
<Button {...args} type={BUTTON_TYPES.LINK} size={Size.inherit}>
<Button {...args} variant={BUTTON_VARIANTS.LINK} size={Size.inherit}>
Button Inherit
</Button>{' '}
inherits the font-size of the parent element. Inherit size only used for
Expand Down
30 changes: 18 additions & 12 deletions ui/components/component-library/button/button.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS } from './button.constants';
import { Button } from './button';

describe('Button', () => {
Expand Down Expand Up @@ -46,28 +46,34 @@ describe('Button', () => {
it('should render with different button types', () => {
const { getByTestId, container } = render(
<>
<Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
<Button
variant={BUTTON_VARIANTS.PRIMARY}
data-testid={BUTTON_VARIANTS.PRIMARY}
>
Button
</Button>
<Button
type={BUTTON_TYPES.SECONDARY}
data-testid={BUTTON_TYPES.SECONDARY}
variant={BUTTON_VARIANTS.SECONDARY}
data-testid={BUTTON_VARIANTS.SECONDARY}
>
Button
</Button>
<Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
<Button
variant={BUTTON_VARIANTS.LINK}
data-testid={BUTTON_VARIANTS.LINK}
>
Button
</Button>
</>,
);
expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
`mm-button-${BUTTON_TYPES.PRIMARY}`,
expect(getByTestId(BUTTON_VARIANTS.PRIMARY)).toHaveClass(
`mm-button-${BUTTON_VARIANTS.PRIMARY}`,
);
expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
`mm-button-${BUTTON_TYPES.SECONDARY}`,
expect(getByTestId(BUTTON_VARIANTS.SECONDARY)).toHaveClass(
`mm-button-${BUTTON_VARIANTS.SECONDARY}`,
);
expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
`mm-button-${BUTTON_TYPES.LINK}`,
expect(getByTestId(BUTTON_VARIANTS.LINK)).toHaveClass(
`mm-button-${BUTTON_VARIANTS.LINK}`,
);
expect(container).toMatchSnapshot();
});
Expand All @@ -77,7 +83,7 @@ describe('Button', () => {
<>
<Button
size={BUTTON_SIZES.INHERIT}
type={BUTTON_TYPES.LINK}
variant={BUTTON_VARIANTS.LINK}
data-testid={BUTTON_SIZES.INHERIT}
>
Button {BUTTON_SIZES.INHERIT}
Expand Down
2 changes: 1 addition & 1 deletion ui/components/component-library/button/index.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { Button } from './button';
export { BUTTON_TYPES, BUTTON_SIZES } from './button.constants';
export { BUTTON_VARIANTS, BUTTON_SIZES } from './button.constants';
2 changes: 1 addition & 1 deletion ui/components/component-library/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS, 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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { mmiActionsFactory } from '../../../store/institutional/institution-back
import {
Text,
Button,
BUTTON_TYPES,
BUTTON_VARIANTS,
BUTTON_SIZES,
} from '../../component-library';
import Box from '../../ui/box';
Expand All @@ -30,7 +30,7 @@ const ComplianceSettings = () => {

const linkButton = (
<Button
type={BUTTON_TYPES.LINK}
variant={BUTTON_VARIANTS.LINK}
size={BUTTON_SIZES.LG}
data-testid="start-compliance"
onClick={() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
DISPLAY,
JustifyContent,
} from '../../../helpers/constants/design-system';
import { Button, BUTTON_TYPES, Text } from '../../component-library';
import { Button, BUTTON_VARIANTS, 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';
Expand Down Expand Up @@ -97,7 +97,7 @@ export const NetworkListMenu = ({ onClose }) => {
</Box>
<Box padding={4}>
<Button
type={BUTTON_TYPES.SECONDARY}
variant={BUTTON_VARIANTS.SECONDARY}
block
onClick={() => {
isFullScreen
Expand Down
8 changes: 4 additions & 4 deletions ui/pages/create-account/connect-hardware/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
LedgerTransportTypes,
} from '../../../../shared/constants/hardware-wallets';
import {
BUTTON_TYPES,
BUTTON_VARIANTS,
BUTTON_SIZES,
Button,
Text,
Expand Down Expand Up @@ -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_VARIANTS.LINK}
href={ZENDESK_URLS.HARDWARE_CONNECTION}
size={BUTTON_SIZES.INHERIT}
key="u2f-error-1"
Expand All @@ -325,7 +325,7 @@ class ConnectHardwareForm extends Component {
[
// eslint-disable-next-line react/jsx-key
<Button
type={BUTTON_TYPES.LINK}
variant={BUTTON_VARIANTS.LINK}
href={ZENDESK_URLS.LEDGER_FIREFOX_U2F_GUIDE}
size={BUTTON_SIZES.INHERIT}
key="u2f-error-1"
Expand All @@ -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_VARIANTS.LINK}
href={ZENDESK_URLS.HARDWARE_CONNECTION}
key="u2f-error-1"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
ButtonLink,
Button,
BUTTON_SIZES,
BUTTON_TYPES,
BUTTON_VARIANTS,
} from '../../../components/component-library';
import Box from '../../../components/ui/box';

Expand Down Expand Up @@ -183,7 +183,7 @@ const ConfirmAddCustodianToken = () => {
<Box display={DISPLAY.FLEX} gap={4}>
<Button
block
type={BUTTON_TYPES.SECONDARY}
variant={BUTTON_VARIANTS.SECONDARY}
size={BUTTON_SIZES.LG}
data-testid="cancel-btn"
onClick={() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history';
import {
Text,
BUTTON_SIZES,
BUTTON_TYPES,
BUTTON_VARIANTS,
} from '../../../components/component-library';
import {
TextColor,
Expand Down Expand Up @@ -181,7 +181,7 @@ export default function ConfirmAddInstitutionalFeature({ history }) {
<Box display={DISPLAY.FLEX} gap={4}>
<Button
block
type={BUTTON_TYPES.SECONDARY}
type={BUTTON_VARIANTS.SECONDARY}
size={BUTTON_SIZES.LG}
onClick={() => {
removeConnectInstitutionalFeature({
Expand Down
Loading