m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Feat/18889/update buttonlink ts (#20372)

Browse Source 
* fix buttonlink alignment

* ButtonLink TS migration

* fix lint

* remove ButtonBase loading error feat

* move padding 0 to ButtonBase

* fix color issue

* fix test file

* fix snapshot

* Update ui/components/component-library/button-link/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* readme fix

* Update ui/components/component-library/button-link/button-link.stories.tsx

Co-authored-by: George Marshall <george.marshall@consensys.net>

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear 2023-08-04 14:00:05 -07:00 committed by GitHub
parent 91f6545c09
commit 70a13296c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 439 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
View File

@ -50,7 +50,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
value="7"
/>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="custom-spending-cap-max-button"
>
Max
@ -74,7 +74,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</span>
</div>
<a
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
rel="noopener noreferrer"
target="_blank"

2
ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
View File

@ -37,7 +37,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
>
<span>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Go to full screen to connect your Ledger.
</button>

4
ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
View File

@ -37,7 +37,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
>
This is an advanced feature, use cautiously.
<a
class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/7417499333531-How-to-customize-a-transaction-nonce"
rel="noopener noreferrer"
target="_blank"
@ -61,7 +61,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="mm-box mm-box--width-1/6"
>
<button
class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="customize-nonce-reset"
>
Reset

6
ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
View File

@ -32,7 +32,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
>
Allowing eth_sign requests can make you vulnerable to phishing attacks. Always review the URL and be careful when signing messages that contain code.
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/14764161421467"
rel="noopener noreferrer"
target="_blank"
@ -77,12 +77,12 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
class="box box--margin-top-6 box--display-flex box--gap-4 box--flex-direction-row box--justify-content-space-between"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
>
Continue

4
ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
View File

@ -120,13 +120,13 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
class="box box--margin-top-3 box--padding-5 box--md:padding-5 box--display-flex box--flex-direction-row box--justify-content-space-between box--width-full"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
type="secondary"
>
Cancel
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
type="primary"
>

6
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
View File

@ -31,7 +31,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
rel="noopener noreferrer"
target="_blank"
@ -77,7 +77,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
rel="noopener noreferrer"
target="_blank"
@ -162,7 +162,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
rel="noopener noreferrer"
target="_blank"

4
ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Severity } from '../../../helpers/constants/design-system';
import { ButtonLink, BUTTON_LINK_SIZES, Text } from '../../component-library';
import { ButtonLink, ButtonLinkSize, Text } from '../../component-library';
import { SecurityProvider } from '../../../../shared/constants/security-provider';
import SecurityProviderBannerAlert from './security-provider-banner-alert';
@ -11,7 +11,7 @@ const mockPlainText =
const MockDescriptionWithLinks = () => (
<>
Description shouldn’t repeat title. 1-3 lines. Can contain a{' '}
<ButtonLink size={BUTTON_LINK_SIZES.INHERIT}>hyperlink</ButtonLink>. It can
<ButtonLink size={ButtonLinkSize.Inherit}>hyperlink</ButtonLink>. It can
also contain a toggle to enable progressive disclosure.
</>
);

8
ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
View File

@ -208,7 +208,7 @@ exports[`Signature Request Component render should match snapshot when we are us
</h6>
<div>
<button
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="verify-contract-details"
>
<span
@ -766,7 +766,7 @@ exports[`Signature Request Component render should match snapshot when we are us
</footer>
</div>
<button
class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="signature-request-reject-all"
>
Reject 2 requests
@ -983,7 +983,7 @@ exports[`Signature Request Component render should match snapshot when we want t
</h6>
<div>
<button
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="verify-contract-details"
>
<span
@ -1541,7 +1541,7 @@ exports[`Signature Request Component render should match snapshot when we want t
</footer>
</div>
<button
class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="signature-request-reject-all"
>
Reject 2 requests

4
ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js
View File

@ -6,10 +6,10 @@ import Popover from '../../../ui/popover';
import {
AvatarIcon,
Button,
BUTTON_LINK_SIZES,
BUTTON_SIZES,
BUTTON_VARIANT,
ButtonLink,
ButtonLinkSize,
IconName,
IconSize,
Text,
@ -79,7 +79,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
{t('snapsPrivacyWarningFirstMessage', [
<ButtonLink
key="privacyNoticeTermsOfUseLink"
size={BUTTON_LINK_SIZES.INHERIT}
size={ButtonLinkSize.Inherit}
href={TERMS_OF_USE_LINK}
target="_blank"
>

6
ui/components/component-library/avatar-token/avatar-token.stories.tsx
View File

@ -13,7 +13,7 @@ import {
BadgeWrapper,
Box,
ButtonLink,
BUTTON_LINK_SIZES,
ButtonLinkSize,
Text,
} from '..';
import README from './README.mdx';
@ -98,14 +98,14 @@ export const SizeStory: StoryFn<typeof AvatarToken> = (args) => (
<Text marginBottom={4}>
Sizes with{' '}
<ButtonLink
size={BUTTON_LINK_SIZES.INHERIT}
size={ButtonLinkSize.Inherit}
href="/docs/components-componentlibrary-buttonlink--default-story"
>
AvatarNetwork
</ButtonLink>{' '}
and{' '}
<ButtonLink
size={BUTTON_LINK_SIZES.INHERIT}
size={ButtonLinkSize.Inherit}
href="/docs/components-componentlibrary-badgewrapper--default-story"
>
BadgeWrapper

4
ui/components/component-library/button-base/__snapshots__/button-base.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
<div>
<a
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
data-testid="button-base"
href="https://www.test.com/"
rel="noopener noreferrer"
@ -17,7 +17,7 @@ exports[`ButtonBase should render anchor element correctly by href and externalL
exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
data-testid="button-base"
>
Button base

1
ui/components/component-library/button-base/button-base.tsx
View File

@ -58,6 +58,7 @@ export const ButtonBase: ButtonBaseComponent = React.forwardRef(
{...(href && externalLink
? { target: '_blank', rel: 'noopener noreferrer' }
: {})}
padding={0}
paddingLeft={4}
paddingRight={4}
ellipsis={ellipsis}

47
ui/components/component-library/button-link/README.mdx
View File

@ -13,8 +13,6 @@ The `ButtonLink` is an extension of `ButtonBase` to support link styles
## Props
The `ButtonLink` 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={ButtonLink} />
The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
@ -23,52 +21,49 @@ The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-butt
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`
Use the `size` prop and the `ButtonLinkSize` enum from `./ui/components/component-library` to change the size of `ButtonLink`. Defaults to `ButtonLinkSize.Auto`
Possible sizes include:
- `Size.auto` sets the height to auto but retains `ButtonLink` font-size
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
- `ButtonLinkSize.Auto` sets the height to auto but retains `ButtonLink` font-size
- `ButtonLinkSize.Sm` 32px
- `ButtonLinkSize.Md` 40px
- `ButtonLinkSize.Lg` 48px
- `ButtonLinkSize.Inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
<Canvas>
<Story id="components-componentlibrary-buttonlink--size-story" />
</Canvas>
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { ButtonLink, Text, TextVariant } from '../../component-library';
import { ButtonLink, ButtonLinkSize, Text, TextVariant } from '../../component-library';
<ButtonLink size={Size.auto}>
<ButtonLink size={ButtonLinkSize.Auto}>
Auto (default)
</ButtonLink>
<ButtonLink size={Size.SM}>
<ButtonLink size={ButtonLinkSize.Sm}>
Small
</ButtonLink>
<ButtonLink size={Size.MD}>
<ButtonLink size={ButtonLinkSize.Md}>
Medium
</ButtonLink>
<ButtonLink size={Size.LG}>
<ButtonLink size={ButtonLinkSize.Lg}>
Large
</ButtonLink>
<Text variant={TextVariant.bodyLgMedium}>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodyMd}>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodySm}>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodyXs}>
Inherits the font-size of the parent element and example with override for a success color.
<ButtonLink size={Size.inherit}>Learn more</ButtonLink>
<ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
</Text>
```
@ -121,28 +116,28 @@ import { ButtonLink } from '../../component-library';
### Hit area
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `ButtonLinkSize.Auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
<Canvas>
<Story id="components-componentlibrary-buttonlink--hit-area" />
</Canvas>
```jsx
import { ButtonLink } from '../../component-library';
import { ButtonLink, ButtonLinkSize } from '../../component-library';
<ButtonLink paddingLeft={4} paddingRight={4}>
Auto (default)
</ButtonLink>
<ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
<ButtonLink size={ButtonLinkSize.Sm} paddingLeft={4} paddingRight={4}>
Small
</ButtonLink>
<ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
<ButtonLink size={ButtonLinkSize.Md} paddingLeft={4} paddingRight={4}>
Medium
</ButtonLink>
<ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
<ButtonLink size={ButtonLinkSize.Lg} paddingLeft={4} paddingRight={4}>
Large
</ButtonLink>
<ButtonLink size={Size.LG} block>
<ButtonLink size={ButtonLinkSize.Lg} block>
Large block
</ButtonLink>
```

2
ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap → ui/components/component-library/button-link/__snapshots__/button-link.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonLink should render button element correctly 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="button-link"
>
Button Link

9
ui/components/component-library/button-link/button-link.constants.js
View File

@ -1,9 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const BUTTON_LINK_SIZES = {
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
AUTO: Size.auto,
INHERIT: Size.inherit,
};

70
ui/components/component-library/button-link/button-link.js
View File

@ -1,70 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonBase } from '../button-base';
import {
BackgroundColor,
Color,
Size,
} from '../../../helpers/constants/design-system';
import { BUTTON_LINK_SIZES } from './button-link.constants';
export const ButtonLink = ({
className,
danger,
disabled,
size = Size.auto,
...props
}) => {
return (
<ButtonBase
className={classnames(className, 'mm-button-link', {
'mm-button-link--type-danger': danger,
'mm-button-link--disabled': disabled,
'mm-button-link--size-inherit': size === BUTTON_LINK_SIZES.INHERIT,
'mm-button-link--size-auto': size === BUTTON_LINK_SIZES.AUTO,
})}
paddingLeft={0}
paddingRight={0}
size={size === BUTTON_LINK_SIZES.INHERIT ? null : size}
backgroundColor={BackgroundColor.transparent}
color={danger ? Color.errorDefault : Color.primaryDefault}
borderRadius={null}
startIconProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
}}
endIconProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
}}
iconLoadingProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.MD,
}}
{...{ disabled, ...props }}
/>
);
};
ButtonLink.propTypes = {
/**
* An additional className to apply to the ButtonLink.
*/
className: PropTypes.string,
/**
* Boolean to change button type to Danger when true
*/
danger: PropTypes.bool,
/**
* Boolean to disable button
*/
disabled: PropTypes.bool,
/**
* Possible size values: 'SIZES.AUTO'(auto), 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px), 'SIZES.INHERIT'(inherits parents font-size)
* Default value is 'SIZES.AUTO'.
*/
size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
/**
* ButtonLink accepts all the props from ButtonBase
*/
...ButtonBase.propTypes,
};

6
ui/components/component-library/button-link/button-link.scss
View File

@ -16,7 +16,7 @@
}
}
&--type-danger {
&--type-danger:not(&--disabled) {
&:hover {
color: var(--color-error-default);
}
@ -49,4 +49,8 @@
text-decoration-thickness: auto;
text-underline-offset: 2px;
}
&--loading:hover:not(&--disabled) {
text-decoration: none;
}
}

256
ui/components/component-library/button-link/button-link.stories.js
View File

@ -1,256 +0,0 @@
import React from 'react';
import {
AlignItems,
BorderColor,
BorderStyle,
DISPLAY,
Size,
TextVariant,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { IconName } from '..';
import { Text } from '../text';
import { ButtonLink } from './button-link';
import { BUTTON_LINK_SIZES } from './button-link.constants';
import README from './README.mdx';
const marginSizeControlOptions = [
undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
export default {
title: 'Components/ComponentLibrary/ButtonLink',
component: ButtonLink,
parameters: {
docs: {
page: README,
},
},
argTypes: {
as: {
control: 'select',
options: ['button', 'a'],
table: { category: 'button base props' },
},
block: {
control: 'boolean',
table: { category: 'button base props' },
},
children: {
control: 'text',
},
className: {
control: 'text',
},
danger: {
control: 'boolean',
},
disabled: {
control: 'boolean',
table: { category: 'button base props' },
},
href: {
control: 'text',
},
externalLink: {
control: 'boolean',
},
startIconName: {
control: 'select',
options: Object.values(IconName),
table: { category: 'button base props' },
},
endIconName: {
control: 'select',
options: Object.values(IconName),
table: { category: 'button base props' },
},
startIconProps: {
control: 'object',
table: { category: 'button base props' },
},
endIconProps: {
control: 'object',
table: { category: 'button base props' },
},
loading: {
control: 'boolean',
table: { category: 'button base props' },
},
size: {
control: 'select',
options: Object.values(BUTTON_LINK_SIZES),
},
marginTop: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginRight: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginBottom: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginLeft: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
},
args: {
children: 'Button Link',
},
};
export const DefaultStory = (args) => <ButtonLink {...args} />;
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
<>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.flexStart} gap={4}>
<ButtonLink {...args} size={Size.auto}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={Size.SM}>
Small
</ButtonLink>
<ButtonLink {...args} size={Size.MD}>
Medium
</ButtonLink>
<ButtonLink {...args} size={Size.LG}>
Large
</ButtonLink>
</Box>
<Text variant={TextVariant.bodyLgMedium}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={Size.inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodyMd}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={Size.inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodySm}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={Size.inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodyXs}>
Inherits the font-size of the parent element and example with override for
a success color.{' '}
<ButtonLink
{...args}
size={Size.inherit}
color={TextColor.successDefault}
>
Learn more
</ButtonLink>
</Text>
</>
);
SizeStory.storyName = 'Size';
export const Danger = (args) => (
<Box display={DISPLAY.FLEX} gap={4}>
<ButtonLink {...args}>Normal</ButtonLink>
{/* Test Anchor tag to match exactly as button */}
<ButtonLink as="a" {...args} href="#" danger>
Danger
</ButtonLink>
</Box>
);
export const Href = (args) => <ButtonLink {...args}>Href example</ButtonLink>;
Href.args = {
href: '/metamask',
};
export const ExternalLink = (args) => (
<ButtonLink {...args}>Anchor element with external link</ButtonLink>
);
ExternalLink.args = {
href: 'https://metamask.io/',
externalLink: true,
};
export const HitArea = (args) => (
<>
<Text marginBottom={4}>Default</Text>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.flexStart}
gap={4}
marginBottom={4}
>
<ButtonLink {...args} size={Size.auto}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={Size.SM}>
Small
</ButtonLink>
<ButtonLink {...args} size={Size.MD}>
Medium
</ButtonLink>
<ButtonLink {...args} size={Size.LG}>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.flexStart}
gap={4}
marginBottom={4}
>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.auto}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.SM}>
Small
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.MD}>
Medium
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.LG}>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add block prop</Text>
<ButtonLink {...args} size={Size.LG} block>
Large block
</ButtonLink>
</>
);
HitArea.args = {
borderColor: BorderColor.errorDefault,
borderStyle: BorderStyle.dashed,
};

201
ui/components/component-library/button-link/button-link.stories.tsx Normal file
View File

@ -0,0 +1,201 @@
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import {
AlignItems,
BorderColor,
BorderStyle,
Display,
TextVariant,
TextColor,
} from '../../../helpers/constants/design-system';
import { Box, Text } from '..';
import README from './README.mdx';
import { ButtonLink, ButtonLinkSize } from '.';
export default {
title: 'Components/ComponentLibrary/ButtonLink',
component: ButtonLink,
parameters: {
docs: {
page: README,
},
},
argTypes: {
as: {
control: 'select',
options: ['button', 'a'],
},
children: {
control: 'text',
},
className: {
control: 'text',
},
danger: {
control: 'boolean',
},
size: {
control: 'select',
options: Object.values(ButtonLinkSize),
},
},
args: {
children: 'Button Link',
},
} as Meta<typeof ButtonLink>;
export const DefaultStory: StoryFn<typeof ButtonLink> = (args) => (
<ButtonLink {...args} />
);
DefaultStory.storyName = 'Default';
export const SizeStory: StoryFn<typeof ButtonLink> = (args) => (
<>
<Box display={Display.Flex} alignItems={AlignItems.flexStart} gap={4}>
<ButtonLink {...args} size={ButtonLinkSize.Auto}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Sm}>
Small
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Md}>
Medium
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Lg}>
Large
</ButtonLink>
</Box>
<Text variant={TextVariant.bodyLgMedium}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={ButtonLinkSize.Inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodyMd}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={ButtonLinkSize.Inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodySm}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={ButtonLinkSize.Inherit}>
Learn more
</ButtonLink>
</Text>
<Text variant={TextVariant.bodyXs}>
Inherits the font-size of the parent element and example with override for
a success color.{' '}
<ButtonLink
{...args}
size={ButtonLinkSize.Inherit}
color={TextColor.successDefault}
>
Learn more
</ButtonLink>
</Text>
</>
);
SizeStory.storyName = 'Size';
export const Danger: StoryFn<typeof ButtonLink> = (args) => (
<Box display={Display.Flex} gap={4}>
<ButtonLink {...args}>Normal</ButtonLink>
{/* Test Anchor tag to match exactly as button */}
<ButtonLink as="a" {...args} href="#" danger>
Danger
</ButtonLink>
</Box>
);
export const Href: StoryFn<typeof ButtonLink> = (args) => (
<ButtonLink {...args}>Href example</ButtonLink>
);
Href.args = {
href: '/metamask',
};
export const ExternalLink: StoryFn<typeof ButtonLink> = (args) => (
<ButtonLink {...args}>Anchor element with external link</ButtonLink>
);
ExternalLink.args = {
href: 'https://metamask.io/',
externalLink: true,
};
export const HitArea: StoryFn<typeof ButtonLink> = (args) => (
<>
<Text marginBottom={4}>Default</Text>
<Box
display={Display.Flex}
alignItems={AlignItems.flexStart}
gap={4}
marginBottom={4}
>
<ButtonLink {...args} size={ButtonLinkSize.Auto}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Sm}>
Small
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Md}>
Medium
</ButtonLink>
<ButtonLink {...args} size={ButtonLinkSize.Lg}>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
<Box
display={Display.Flex}
alignItems={AlignItems.flexStart}
gap={4}
marginBottom={4}
>
<ButtonLink
{...args}
paddingLeft={4}
paddingRight={4}
size={ButtonLinkSize.Auto}
>
Auto (default)
</ButtonLink>
<ButtonLink
{...args}
paddingLeft={4}
paddingRight={4}
size={ButtonLinkSize.Sm}
>
Small
</ButtonLink>
<ButtonLink
{...args}
paddingLeft={4}
paddingRight={4}
size={ButtonLinkSize.Md}
>
Medium
</ButtonLink>
<ButtonLink
{...args}
paddingLeft={4}
paddingRight={4}
size={ButtonLinkSize.Lg}
>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add block prop</Text>
<ButtonLink {...args} size={ButtonLinkSize.Lg} block>
Large block
</ButtonLink>
</>
);
HitArea.args = {
borderColor: BorderColor.errorDefault,
borderStyle: BorderStyle.dashed,
};

26
ui/components/component-library/button-link/button-link.test.js → ui/components/component-library/button-link/button-link.test.tsx
View File

@ -1,10 +1,8 @@
/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { Size } from '../../../helpers/constants/design-system';
import { IconName } from '..';
import { ButtonLink } from './button-link';
import { BUTTON_LINK_SIZES } from './button-link.constants';
import { ButtonLink, ButtonLinkSize } from '.';
describe('ButtonLink', () => {
it('should render button element correctly', () => {
@ -41,22 +39,28 @@ describe('ButtonLink', () => {
it('should render with different size classes', () => {
const { getByTestId } = render(
<>
<ButtonLink size={Size.SM} data-testid={Size.SM} />
<ButtonLink size={Size.MD} data-testid={Size.MD} />
<ButtonLink size={Size.LG} data-testid={Size.LG} />
<ButtonLink size={ButtonLinkSize.Sm} data-testid={ButtonLinkSize.Sm} />
<ButtonLink size={ButtonLinkSize.Md} data-testid={ButtonLinkSize.Md} />
<ButtonLink size={ButtonLinkSize.Lg} data-testid={ButtonLinkSize.Lg} />
</>,
);
expect(getByTestId(Size.SM)).toHaveClass(`mm-button-base--size-${Size.SM}`);
expect(getByTestId(Size.MD)).toHaveClass(`mm-button-base--size-${Size.MD}`);
expect(getByTestId(Size.LG)).toHaveClass(`mm-button-base--size-${Size.LG}`);
expect(getByTestId(ButtonLinkSize.Sm)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Sm}`,
);
expect(getByTestId(ButtonLinkSize.Md)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Md}`,
);
expect(getByTestId(ButtonLinkSize.Lg)).toHaveClass(
`mm-button-base--size-${ButtonLinkSize.Lg}`,
);
});
it('should render ButtonLink inherit size', () => {
const { getByTestId } = render(
<ButtonLink size={BUTTON_LINK_SIZES.INHERIT} data-testid="inherit" />,
<ButtonLink size={ButtonLinkSize.Inherit} data-testid="inherit" />,
);
// Different size classname compared to Size.SM, Size.MD, Size.LG
// Different size classname compared to ButtonLinkSize.Sm, ButtonLinkSize.Md, ButtonLinkSize.Lg
expect(getByTestId('inherit')).toHaveClass(`mm-button-link--size-inherit`);
});

59
ui/components/component-library/button-link/button-link.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import classnames from 'classnames';
import { ButtonBase, IconSize } from '..';
import {
BackgroundColor,
Color,
} from '../../../helpers/constants/design-system';
import type { PolymorphicRef } from '../box';
import type { ButtonBaseProps } from '../button-base';
import type { ButtonLinkProps } from './button-link.types';
import { ButtonLinkSize, ButtonLinkComponent } from './button-link.types';
export const ButtonLink: ButtonLinkComponent = React.forwardRef(
<C extends React.ElementType = 'button' | 'a'>(
{
className,
color,
danger,
disabled,
loading,
size = ButtonLinkSize.Auto,
...props
}: ButtonLinkProps<C>,
ref?: PolymorphicRef<C>,
) => {
return (
<ButtonBase
className={classnames(className, 'mm-button-link', {
'mm-button-link--type-danger': danger,
'mm-button-link--disabled': disabled,
'mm-button-link--loading': loading,
'mm-button-link--size-inherit': size === ButtonLinkSize.Inherit,
'mm-button-link--size-auto': size === ButtonLinkSize.Auto,
})}
paddingLeft={0}
paddingRight={0}
size={size === ButtonLinkSize.Inherit ? null : size}
backgroundColor={BackgroundColor.transparent}
color={color || (danger ? Color.errorDefault : Color.primaryDefault)}
borderRadius={null}
startIconProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
}}
endIconProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
}}
iconLoadingProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Md,
color: color || (danger ? Color.errorDefault : Color.primaryDefault),
}}
ref={ref}
{...{ disabled, loading, ...(props as ButtonBaseProps<C>) }}
/>
);
},
);

42
ui/components/component-library/button-link/button-link.types.ts Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import type { PolymorphicComponentPropWithRef } from '../box';
import type { ButtonBaseStyleUtilityProps } from '../button-base/button-base.types';
export enum ButtonLinkSize {
Auto = 'auto',
Sm = 'sm',
Md = 'md',
Lg = 'lg',
Inherit = 'inherit',
}
export interface ButtonLinkStyleUtilityProps
extends Omit<ButtonBaseStyleUtilityProps, 'size'> {
/**
* Boolean to change button type to Danger when true
*/
danger: boolean;
/**
* Boolean to disable button
*/
disabled: boolean;
/**
* Boolean to show loading spinner in button
*/
loading: boolean;
/**
* Possible size values: 'ButtonLinkSize.Auto'(auto), 'ButtonLinkSize.Sm'(32px), 'ButtonLinkSize.Md'(40px), 'ButtonLinkSize.Lg'(48px), 'ButtonLinkSize.Inherit'(inherits parents font-size)
* Default value is 'ButtonLinkSize.Auto'.
*/
size: ButtonLinkSize;
}
export type ButtonLinkProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, ButtonLinkStyleUtilityProps>;
export type ButtonLinkComponent = <
C extends React.ElementType = 'button' | 'a',
>(
props: ButtonLinkProps<C>,
) => React.ReactElement | null;

2
ui/components/component-library/button-link/index.js
View File

@ -1,2 +0,0 @@
export { ButtonLink } from './button-link';
export { BUTTON_LINK_SIZES } from './button-link.constants';

3
ui/components/component-library/button-link/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { ButtonLink } from './button-link';
export { ButtonLinkSize } from './button-link.types';
export type { ButtonLinkProps } from './button-link.types';

2
ui/components/component-library/button-primary/__snapshots__/button-primary.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonPrimary should render button element correctly 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="button-primary"
>
Button Primary

2
ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonSecondary should render button element correctly 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="button-secondary"
>
Button Secondary

8
ui/components/component-library/button/__snapshots__/button.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Button should render button element correctly 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="button"
>
Button
@ -14,19 +14,19 @@ exports[`Button should render button element correctly 1`] = `
exports[`Button should render with different button types 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="primary"
>
Button
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="secondary"
>
Button
</button>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="link"
>
Button

4
ui/components/component-library/button/button.stories.js
View File

@ -7,7 +7,7 @@ import {
TextVariant,
} from '../../../helpers/constants/design-system';
import { IconName } from '..';
import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
import { ButtonLinkSize } from '../button-link';
import Box from '../../ui/box/box';
import { Text } from '../text';
import README from './README.mdx';
@ -83,7 +83,7 @@ export default {
},
size: {
control: 'select',
options: Object.values(BUTTON_LINK_SIZES),
options: Object.values(ButtonLinkSize),
},
variant: {
options: Object.values(BUTTON_VARIANT),

7
ui/components/component-library/icon/icon.stories.tsx
View File

@ -13,19 +13,20 @@ import {
BackgroundColor,
BorderColor,
Color,
TextColor,
BorderRadius,
} from '../../../helpers/constants/design-system';
import {
ButtonIcon,
ButtonLink,
ButtonLinkSize,
Label,
Text,
TextField,
TextFieldSearch,
TEXT_FIELD_SIZES,
ButtonIconSize,
BUTTON_LINK_SIZES,
Box,
} from '..';
@ -153,8 +154,8 @@ export const DefaultStory: StoryFn<typeof Icon> = (args) => {
<Text>
No matches. Please try again or ask in the{' '}
<ButtonLink
size={BUTTON_LINK_SIZES.INHERIT}
color={Color.primaryDefault}
size={ButtonLinkSize.Inherit}
color={TextColor.primaryDefault}
href="https://consensys.slack.com/archives/C0354T27M5M"
target="_blank"
>

2
ui/components/component-library/index.js
View File

@ -18,7 +18,7 @@ export { Box } from './box';
export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button';
export { ButtonBase, ButtonBaseSize } from './button-base';
export { ButtonIcon, ButtonIconSize } from './button-icon';
export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
export { ButtonLink, ButtonLinkSize } from './button-link';
export { ButtonPrimary, ButtonPrimarySize } from './button-primary';
export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';
export { Checkbox } from './checkbox';

6
ui/components/component-library/modal/modal.stories.tsx
View File

@ -13,7 +13,7 @@ import {
Text,
Button,
ButtonLink,
BUTTON_LINK_SIZES,
ButtonLinkSize,
TextFieldSearch,
IconName,
} from '..';
@ -72,7 +72,7 @@ export default {
const LoremIpsum = (props) => (
<Text marginBottom={8} {...props}>
Lorem ipsum dolor sit amet, conse{' '}
<ButtonLink size={BUTTON_LINK_SIZES.INHERIT}>
<ButtonLink size={ButtonLinkSize.Inherit}>
random focusable button
</ButtonLink>{' '}
ctetur adipiscing elit. Phasellus posuere nunc enim, quis efficitur dolor
@ -127,7 +127,7 @@ const Template: ComponentStory<typeof Modal> = (args) => {
showLoremIpsum ? IconName.Arrow2Up : IconName.Arrow2Down
}
onClick={handleMoreContent}
size={BUTTON_LINK_SIZES.INHERIT}
size={ButtonLinkSize.Inherit}
marginBottom={2}
>
{showMoreModalContent ? 'Hide' : 'Show more'}

2
ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AccountPicker renders properly 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="account-menu-icon"
>
<span

2
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -228,7 +228,7 @@ exports[`App Header should match snapshot 1`] = `
</button>
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="account-menu-icon"
>
<span

2
ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
View File

@ -17,7 +17,7 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
3 new tokens found in this account
</p>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Import tokens
</button>

6
ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
View File

@ -7,7 +7,7 @@ exports[`Json should match snapshot 1`] = `
>
Used by a variety of different clients
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
rel="noopener noreferrer"
target="_blank"
@ -43,12 +43,12 @@ exports[`Json should match snapshot 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="import-account-confirm-button"
disabled=""
>

8
ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -23,7 +23,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="refresh-list-button"
>
<span
@ -46,7 +46,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -60,7 +60,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="refresh-list-button"
>
<span

8
ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
View File

@ -140,7 +140,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -325,7 +325,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -510,7 +510,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -695,7 +695,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>

2
ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
View File

@ -207,7 +207,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
</h6>
<div>
<button
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="verify-contract-details"
>
<span

2
ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
View File

@ -112,7 +112,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
</button>
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled hw-connect__connect-btn mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled hw-connect__connect-btn mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
>
Continue

2
ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
View File

@ -156,7 +156,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
class="box box--flex-direction-row"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
Done
</button>

8
ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
View File

@ -46,7 +46,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
>
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
rel="noopener noreferrer"
target="_blank"
@ -121,7 +121,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
>
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
rel="noopener noreferrer"
target="_blank"
@ -171,13 +171,13 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="custody-account-cancel-button"
>
[cancel]
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="custody-account-connect-button"
disabled=""
>

2
ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
View File

@ -81,7 +81,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
</p>
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="custody-connect-button"
>
Select

4
ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
View File

@ -95,12 +95,12 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Reject
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
displayName
</button>

8
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
View File

@ -17,7 +17,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
The
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure"
rel="noopener noreferrer"
target="_blank"
@ -42,7 +42,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
MetaMask is a
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet"
rel="noopener noreferrer"
target="_blank"
@ -104,12 +104,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
class="box box--margin-top-auto box--display-flex box--gap-4 box--flex-direction-row"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
>
Next

8
ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
View File

@ -12,7 +12,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Create a Snap Account
</button>
@ -42,7 +42,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
Install snap
</button>
@ -180,7 +180,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="auditUrl1"
>
auditUrl1
@ -190,7 +190,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="auditUrl2"
>
auditUrl2

2
ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
View File

@ -24,7 +24,7 @@ exports[`SnapCard should render 1`] = `
</div>
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="install-snap-button"
>
Install

4
ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
View File

@ -24,7 +24,7 @@ exports[`Security Tab should match snapshot 1`] = `
class="settings-page__content-padded"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="reveal-seed-words"
type="danger"
>
@ -423,7 +423,7 @@ exports[`Security Tab should match snapshot 1`] = `
class="settings-page__content-item-col"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
type="secondary"
>
Add custom network

3
ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
View File

@ -118,6 +118,7 @@ import {
IconSize,
TextField,
ButtonLink,
ButtonLinkSize,
Modal,
ModalOverlay,
ModalContent,
@ -1054,7 +1055,7 @@ export default function PrepareSwapPage({
</Text>
{!verificationClicked && (
<ButtonLink
size={Size.INHERIT}
size={ButtonLinkSize.Inherit}
textProps={{
variant: TextVariant.bodyMd,
alignItems: AlignItems.flexStart,

4
ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
View File

@ -7,7 +7,6 @@ import {
DISPLAY,
AlignItems,
SEVERITIES,
Size,
TextVariant,
BLOCK_SIZES,
} from '../../../helpers/constants/design-system';
@ -15,6 +14,7 @@ import { GasRecommendations } from '../../../../shared/constants/gas';
import {
BannerAlert,
ButtonLink,
ButtonLinkSize,
Text,
} from '../../../components/component-library';
@ -73,7 +73,7 @@ export default function ViewQuotePriceDifference(props) {
</Text>
{!acknowledged && (
<ButtonLink
size={Size.INHERIT}
size={ButtonLinkSize.Inherit}
textProps={{
variant: TextVariant.bodyMd,
alignItems: AlignItems.flexStart,

13
ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
View File

@ -8,10 +8,13 @@ import Box from '../../../components/ui/box';
import {
AlignItems,
SEVERITIES,
Size,
TextVariant,
} from '../../../helpers/constants/design-system';
import { ButtonLink, Text } from '../../../components/component-library';
import {
ButtonLink,
ButtonLinkSize,
Text,
} from '../../../components/component-library';
import {
QUOTES_EXPIRED_ERROR,
@ -42,7 +45,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
{t('swapSlippageOverLimitDescription')}
</Text>
<ButtonLink
size={Size.INHERIT}
size={ButtonLinkSize.Inherit}
textProps={{
variant: TextVariant.bodyMd,
alignItems: AlignItems.flexStart,
@ -83,7 +86,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
{t('swapSlippageNegativeDescription')}
</Text>
<ButtonLink
size={Size.INHERIT}
size={ButtonLinkSize.Inherit}
textProps={{
variant: TextVariant.bodyMd,
alignItems: AlignItems.flexStart,
@ -106,7 +109,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
{t('swapQuotesNotAvailableDescription')}
</Text>
<ButtonLink
size={Size.INHERIT}
size={ButtonLinkSize.Inherit}
textProps={{
variant: TextVariant.bodyMd,
alignItems: AlignItems.flexStart,

4
ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
View File

@ -391,7 +391,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
value="7"
/>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="custom-spending-cap-max-button"
>
Max
@ -415,7 +415,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
</span>
</div>
<a
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
rel="noopener noreferrer"
target="_blank"