mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Fix/button base ellipsis support (#18205)
* ButtonBase ellipsis update Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * buttonbase updates to fix ellipsis * multichain support * remove multichain * code cleanup * clean up * component clean up * span update * fix snapshots * fix snapshot * Updating ButtonBase to reduce html to a minimum but ensure all functionality still works (#18210) * fix color and disable * remove unused css * Update ui/components/component-library/button-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * fix e2e test from button update * update e2e test from button base update --------- Co-authored-by: David Walsh <davidwalsh83@gmail.com> Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear
GitHub
parent
d3026e7338
commit
de4cf0a7e5
@ -242,7 +242,7 @@ describe('Add account', function () {
|
||||
|
||||
// enter private key',
|
||||
await driver.fill('#private-key-box', testPrivateKey);
|
||||
await driver.clickElement({ text: 'Import', tag: 'span' });
|
||||
await driver.clickElement({ text: 'Import', tag: 'button' });
|
||||
|
||||
// should show the correct account name
|
||||
const importedAccountName = await driver.findElement(
|
||||
|
||||
@ -63,7 +63,7 @@ describe('Failing contract interaction ', function () {
|
||||
// dismiss warning and confirm the transaction
|
||||
await driver.clickElement({
|
||||
text: 'I want to proceed anyway',
|
||||
tag: 'span',
|
||||
tag: 'button',
|
||||
});
|
||||
await driver.clickElement({ text: 'Confirm', tag: 'button' });
|
||||
await driver.waitUntilXWindowHandles(2);
|
||||
@ -149,7 +149,7 @@ describe('Failing contract interaction on non-EIP1559 network', function () {
|
||||
// dismiss warning and confirm the transaction
|
||||
await driver.clickElement({
|
||||
text: 'I want to proceed anyway',
|
||||
tag: 'span',
|
||||
tag: 'button',
|
||||
});
|
||||
await driver.clickElement({ text: 'Confirm', tag: 'button' });
|
||||
await driver.waitUntilXWindowHandles(2);
|
||||
|
||||
@ -212,7 +212,7 @@ describe('MetaMask Import UI', function () {
|
||||
|
||||
// enter private key',
|
||||
await driver.fill('#private-key-box', testPrivateKey1);
|
||||
await driver.clickElement({ text: 'Import', tag: 'span' });
|
||||
await driver.clickElement({ text: 'Import', tag: 'button' });
|
||||
|
||||
// should show the correct account name
|
||||
const importedAccountName = await driver.findElement(
|
||||
@ -239,7 +239,7 @@ describe('MetaMask Import UI', function () {
|
||||
await driver.clickElement({ text: 'Import account', tag: 'div' });
|
||||
// enter private key
|
||||
await driver.fill('#private-key-box', testPrivateKey2);
|
||||
await driver.clickElement({ text: 'Import', tag: 'span' });
|
||||
await driver.clickElement({ text: 'Import', tag: 'button' });
|
||||
|
||||
// should see new account in account menu
|
||||
const importedAccount2Name = await driver.findElement(
|
||||
@ -330,7 +330,7 @@ describe('MetaMask Import UI', function () {
|
||||
|
||||
await driver.fill('#json-password-box', 'foobarbazqux');
|
||||
|
||||
await driver.clickElement({ text: 'Import', tag: 'span' });
|
||||
await driver.clickElement({ text: 'Import', tag: 'button' });
|
||||
|
||||
// should show the correct account name
|
||||
const importedAccountName = await driver.findElement(
|
||||
@ -392,7 +392,7 @@ describe('MetaMask Import UI', function () {
|
||||
|
||||
// enter private key',
|
||||
await driver.fill('#private-key-box', testPrivateKey);
|
||||
await driver.clickElement({ text: 'Import', tag: 'span' });
|
||||
await driver.clickElement({ text: 'Import', tag: 'button' });
|
||||
|
||||
// error should occur
|
||||
await driver.waitForSelector({
|
||||
|
||||
@ -102,7 +102,9 @@ import { ButtonBase } from '../../component-library';
|
||||
|
||||
When an `externalLink` prop is passed it will change the element to an anchor(`a`) tag and add the `target="_blank"` and `rel="noopener noreferrer"` attributes.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-buttonbase--external-link" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonBase } from '../../component-library';
|
||||
@ -168,7 +170,7 @@ import { ICON_NAMES } from '../icon';
|
||||
|
||||
### RTL
|
||||
|
||||
For RTL language support use the `textProps` prop to pass a `textDirection` prop.
|
||||
For RTL language support use the `textDirection` prop.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-buttonbase--rtl" />
|
||||
@ -187,11 +189,28 @@ import { ButtonBase, ICON_NAMES } from '../../component-library';
|
||||
<ButtonBase
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
textProps={{
|
||||
textDirection: TEXT_DIRECTIONS.RIGHT_TO_LEFT,
|
||||
}}
|
||||
textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}
|
||||
>
|
||||
Button Demo
|
||||
</ButtonBase>
|
||||
</>;
|
||||
```
|
||||
|
||||
### Ellipsis
|
||||
|
||||
Use the boolean `ellipsis` prop to change the if the `ButtonBase` component to have an ellipsis.
|
||||
|
||||
Note: this should only be used for dynamic/user generated content or addresses. Generally, button text should be succinct and only contain one or two words.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-buttonbase--ellipsis" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonBase } from '../../component-library';
|
||||
|
||||
<Box style={{ width: 180 }}>
|
||||
<ButtonBase>This is long text example without ellipsis</ButtonBase>
|
||||
<ButtonBase ellipsis>This is long text example with ellipsis</ButtonBase>
|
||||
</Box>;
|
||||
```
|
||||
|
||||
@ -3,17 +3,13 @@
|
||||
exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
|
||||
<div>
|
||||
<a
|
||||
class="box mm-button-base mm-button-base--size-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-pill"
|
||||
data-testid="button-base"
|
||||
href="https://www.test.com/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button Base
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
@ -21,14 +17,10 @@ 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="box mm-button-base mm-button-base--size-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-pill"
|
||||
data-testid="button-base"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button base
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
Size,
|
||||
BorderRadius,
|
||||
BackgroundColor,
|
||||
IconColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
|
||||
@ -24,6 +25,7 @@ export const ButtonBase = ({
|
||||
children,
|
||||
className,
|
||||
href,
|
||||
ellipsis = false,
|
||||
externalLink,
|
||||
size = BUTTON_BASE_SIZES.MD,
|
||||
startIconName,
|
||||
@ -34,6 +36,7 @@ export const ButtonBase = ({
|
||||
disabled,
|
||||
iconLoadingProps,
|
||||
textProps,
|
||||
color = TextColor.textDefault,
|
||||
...props
|
||||
}) => {
|
||||
const Tag = href ? 'a' : as;
|
||||
@ -42,13 +45,14 @@ export const ButtonBase = ({
|
||||
props.rel = 'noopener noreferrer';
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
<Text
|
||||
as={Tag}
|
||||
backgroundColor={BackgroundColor.backgroundAlternative}
|
||||
color={TextColor.textDefault}
|
||||
color={loading ? TextColor.transparent : color}
|
||||
href={href}
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
ellipsis={ellipsis}
|
||||
className={classnames(
|
||||
'mm-button-base',
|
||||
{
|
||||
@ -57,6 +61,7 @@ export const ButtonBase = ({
|
||||
'mm-button-base--loading': loading,
|
||||
'mm-button-base--disabled': disabled,
|
||||
'mm-button-base--block': block,
|
||||
'mm-button-base--ellipsis': ellipsis,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
@ -67,33 +72,52 @@ export const ButtonBase = ({
|
||||
borderRadius={BorderRadius.pill}
|
||||
{...props}
|
||||
>
|
||||
{startIconName && (
|
||||
<Icon
|
||||
name={startIconName}
|
||||
size={Size.SM}
|
||||
marginInlineEnd={1}
|
||||
{...startIconProps}
|
||||
color={loading ? IconColor.transparent : startIconProps?.color}
|
||||
/>
|
||||
)}
|
||||
{/*
|
||||
* If children is a string and doesn't need truncation or loading
|
||||
* prevent html bloat by rendering just the string
|
||||
* otherwise render with wrapper to allow truncation or loading
|
||||
*/}
|
||||
{typeof children === 'string' && !ellipsis && !loading ? (
|
||||
children
|
||||
) : (
|
||||
<Text
|
||||
as="span"
|
||||
className="mm-button-base__content"
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
gap={2}
|
||||
variant={TextVariant.bodyMd}
|
||||
color={TextColor.inherit}
|
||||
ellipsis={ellipsis}
|
||||
variant={TextVariant.inherit}
|
||||
color={loading ? TextColor.transparent : color}
|
||||
{...textProps}
|
||||
>
|
||||
{startIconName && (
|
||||
<Icon name={startIconName} size={Size.SM} {...startIconProps} />
|
||||
)}
|
||||
{children}
|
||||
{endIconName && (
|
||||
<Icon name={endIconName} size={Size.SM} {...endIconProps} />
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
{endIconName && (
|
||||
<Icon
|
||||
name={endIconName}
|
||||
size={Size.SM}
|
||||
marginInlineStart={1}
|
||||
{...endIconProps}
|
||||
color={loading ? IconColor.transparent : endIconProps?.color}
|
||||
/>
|
||||
)}
|
||||
{loading && (
|
||||
<Icon
|
||||
className="mm-button-base__icon-loading"
|
||||
name={ICON_NAMES.LOADING}
|
||||
color={color}
|
||||
size={Size.MD}
|
||||
{...iconLoadingProps}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
@ -126,6 +150,10 @@ ButtonBase.propTypes = {
|
||||
* When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag
|
||||
*/
|
||||
href: PropTypes.string,
|
||||
/**
|
||||
* Used for long strings that can be cut off...
|
||||
*/
|
||||
ellipsis: PropTypes.bool,
|
||||
/**
|
||||
* Boolean indicating if the link targets external content, it will cause the link to open in a new tab
|
||||
*/
|
||||
|
||||
@ -6,18 +6,13 @@
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__content {
|
||||
height: 100%;
|
||||
&--ellipsis {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&--size-sm {
|
||||
@ -36,10 +31,6 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--loading &__content {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AlignItems,
|
||||
Color,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Size,
|
||||
@ -199,11 +200,18 @@ export const Rtl = (args) => (
|
||||
{...args}
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
textProps={{
|
||||
textDirection: TEXT_DIRECTIONS.RIGHT_TO_LEFT,
|
||||
}}
|
||||
textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}
|
||||
>
|
||||
Button Demo
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Ellipsis = (args) => (
|
||||
<Box backgroundColor={Color.iconMuted} style={{ width: 150 }}>
|
||||
<ButtonBase {...args}>Example without ellipsis</ButtonBase>
|
||||
<ButtonBase {...args} ellipsis>
|
||||
Example with ellipsis
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -67,7 +67,7 @@ import { ButtonLink, Text, TextVariant } from '../../component-library';
|
||||
</Text>
|
||||
|
||||
<Text variant={TextVariant.bodyXs}>
|
||||
Inherits the font-size of the parent element and example with textProps override for a success color.
|
||||
Inherits the font-size of the parent element and example with override for a success color.
|
||||
<ButtonLink size={Size.inherit}>Learn more</ButtonLink>
|
||||
</Text>
|
||||
```
|
||||
|
||||
@ -3,14 +3,10 @@
|
||||
exports[`ButtonLink should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
|
||||
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
|
||||
data-testid="button-link"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button Link
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,26 +3,25 @@ import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { ButtonBase } from '../button-base';
|
||||
import { Text } from '../text';
|
||||
import {
|
||||
BackgroundColor,
|
||||
Color,
|
||||
Size,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { BUTTON_LINK_SIZES } from './button-link.constants';
|
||||
|
||||
export const ButtonLink = ({
|
||||
className,
|
||||
danger,
|
||||
disabled,
|
||||
size = Size.auto,
|
||||
textProps,
|
||||
...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,
|
||||
})}
|
||||
@ -32,13 +31,6 @@ export const ButtonLink = ({
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
color={danger ? Color.errorDefault : Color.primaryDefault}
|
||||
borderRadius={null}
|
||||
textProps={{
|
||||
variant:
|
||||
size === BUTTON_LINK_SIZES.INHERIT
|
||||
? TextVariant.inherit
|
||||
: TextVariant.bodyMd,
|
||||
...textProps,
|
||||
}}
|
||||
startIconProps={{
|
||||
size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
|
||||
}}
|
||||
@ -48,7 +40,7 @@ export const ButtonLink = ({
|
||||
iconLoadingProps={{
|
||||
size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.MD,
|
||||
}}
|
||||
{...props}
|
||||
{...{ disabled, ...props }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -62,15 +54,15 @@ ButtonLink.propTypes = {
|
||||
* 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)),
|
||||
/**
|
||||
* textProps accepts all the props from Text component
|
||||
*/
|
||||
textProps: PropTypes.shape(Text.PropTypes),
|
||||
/**
|
||||
* ButtonLink accepts all the props from ButtonBase
|
||||
*/
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
.mm-button-link {
|
||||
&:hover {
|
||||
color: var(--color-primary-default);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary-default);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
&:hover {
|
||||
color: var(--color-primary-default);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
@ -162,12 +162,12 @@ export const SizeStory = (args) => (
|
||||
</ButtonLink>
|
||||
</Text>
|
||||
<Text variant={TextVariant.bodyXs}>
|
||||
Inherits the font-size of the parent element and example with textProps
|
||||
override for a success color.{' '}
|
||||
Inherits the font-size of the parent element and example with override for
|
||||
a success color.{' '}
|
||||
<ButtonLink
|
||||
{...args}
|
||||
size={Size.inherit}
|
||||
textProps={{ color: TextColor.successDefault }}
|
||||
color={TextColor.successDefault}
|
||||
>
|
||||
Learn more
|
||||
</ButtonLink>
|
||||
|
||||
@ -3,14 +3,10 @@
|
||||
exports[`ButtonPrimary should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
|
||||
data-testid="button-primary"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button Primary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,14 +3,10 @@
|
||||
exports[`ButtonSecondary should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
data-testid="button-secondary"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button Secondary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,14 +3,10 @@
|
||||
exports[`Button should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
|
||||
data-testid="button"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -18,34 +14,22 @@ exports[`Button should render button element correctly 1`] = `
|
||||
exports[`Button should render with different button types 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
|
||||
data-testid="primary"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
data-testid="secondary"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
|
||||
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
|
||||
data-testid="link"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -130,6 +130,7 @@ export enum TextColor {
|
||||
lineaTestnetInverse = 'lineatestnet-inverse',
|
||||
goerliInverse = 'goerli-inverse',
|
||||
sepoliaInverse = 'sepolia-inverse',
|
||||
transparent = 'transparent',
|
||||
}
|
||||
|
||||
export enum IconColor {
|
||||
|
||||
@ -17,16 +17,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
|
||||
|
||||
The
|
||||
<a
|
||||
class="box mm-button-base mm-button-link mm-button-link--size-inherit box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
|
||||
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center 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"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--inherit mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Secret Recovery Phrase (SRP)
|
||||
</span>
|
||||
</a>
|
||||
provides
|
||||
<strong
|
||||
@ -46,16 +42,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
|
||||
|
||||
MetaMask is a
|
||||
<a
|
||||
class="box mm-button-base mm-button-link mm-button-link--size-inherit box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
|
||||
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center 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"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--inherit mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
non-custodial wallet
|
||||
</span>
|
||||
</a>
|
||||
. That means you're the owner of your SRP.
|
||||
|
||||
@ -112,23 +104,15 @@ 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="box mm-button-base mm-button-base--size-lg mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="box mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
|
||||
class="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 mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--background-color-primary-default box--rounded-pill"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user