m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

UX: Icons: Remove usage of chevron fa- icons (#17668)

Browse Source
This commit is contained in:
David Walsh 2023-02-16 07:26:14 -06:00 committed by GitHub
parent 8c233b2a82
commit 4dcb639652
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 242 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
development/ts-migration-dashboard/files-to-convert.json
View File

@ -885,10 +885,6 @@
"ui/components/ui/icon-with-fallback/index.js",
"ui/components/ui/icon/approve-icon.component.js",
"ui/components/ui/icon/copy-icon.component.js",
"ui/components/ui/icon/icon-caret-down.js",
"ui/components/ui/icon/icon-caret-left.js",
"ui/components/ui/icon/icon-caret-right.js",
"ui/components/ui/icon/icon-caret-up.js",
"ui/components/ui/icon/icon-check.js",
"ui/components/ui/icon/icon-cog.js",
"ui/components/ui/icon/icon-eye-slash.js",

2
test/e2e/swaps/swaps-notifications.spec.js
View File

@ -140,7 +140,7 @@ describe('Swaps - notifications', function () {
swapToContractAddress: '0x72c9Fb7ED19D3ce51cea5C56B3e023cd918baaDf',
});
await driver.waitForSelector({
css: '.popover-header__title',
css: '.popover-header',
text: 'Import token?',
});
await driver.clickElement(

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

@ -232,18 +232,10 @@ exports[`App Header should match snapshot 1`] = `
<div
class="chip__right-icon"
>
<svg
class="network-display__icon"
fill="currentColor"
height="16"
viewBox="0 0 512 512"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m399 177c-8-8-22-8-30 0l-113 113-113-113c-8-8-22-8-30 0-8 8-8 22 0 30l128 128c8 8 22 8 30 0l128-128c8-8 8-22 0-30z"
/>
</svg>
<div
class="box mm-icon mm-icon--size-xs box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>
</div>
</div>

9
ui/components/app/asset-list-item/asset-list-item.js
View File

@ -11,11 +11,12 @@ import Button from '../../ui/button';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { startNewDraftTransaction } from '../../../ducks/send';
import { SEND_ROUTE } from '../../../helpers/constants/routes';
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
import { EVENT } from '../../../../shared/constants/metametrics';
import { AssetType } from '../../../../shared/constants/transaction';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { Icon, ICON_NAMES } from '../../component-library';
const AssetListItem = ({
className,
@ -138,7 +139,11 @@ const AssetListItem = ({
rightContent={
!isERC721 && (
<>
<i className="fas fa-chevron-right asset-list-item__chevron-right" />
<Icon
name={ICON_NAMES.ARROW_RIGHT}
color={Color.iconDefault}
className="asset-list-item__chevron-right"
/>
{sendTokenButton}
</>
)

6
ui/components/app/asset-list-item/asset-list-item.scss
View File

@ -29,10 +29,6 @@
overflow: hidden;
}
&__chevron-right {
color: var(--color-icon-default);
}
.list-item__right-content {
align-self: center;
}
@ -72,7 +68,7 @@
display: inline-block;
}
&__chevron-right {
&__arrow {
display: none;
}
}

54
ui/components/app/asset-list-item/asset-list-item.stories.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import AssetListItem from '.';
export default {
title: 'Components/App/AssetListItem',
argTypes: {
className: {
control: 'text',
},
iconClassName: {
control: 'text',
},
onClick: {
action: 'onClick',
},
tokenAddress: {
control: 'text',
},
tokenSymbol: {
control: 'text',
},
tokenDecimals: {
control: 'number',
},
tokenImage: {
control: 'text',
},
warning: {
control: 'text',
},
primary: {
control: 'text',
},
secondary: {
control: 'text',
},
identiconBorder: {
control: 'boolean',
},
isERC721: {
control: 'boolean',
},
},
args: {
tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
tokenSymbol: 'ETH',
tokenImage: './images/eth_logo.svg',
identiconBorder: true,
},
};
export const DefaultStory = (args) => <AssetListItem {...args} />;
DefaultStory.storyName = 'Default';

15
ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
View File

@ -13,17 +13,10 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
class="confirm-page-container-header__back-button-container"
style="visibility: hidden;"
>
<svg
fill="currentColor"
height="24"
viewBox="0 0 512 512"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
/>
</svg>
<div
class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
<span
class="confirm-page-container-header__back-button"
data-testid="confirm-page-back-edit-button"

4
ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
View File

@ -7,10 +7,10 @@ import {
import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
import NetworkDisplay from '../../network-display';
import Identicon from '../../../ui/identicon';
import IconCaretLeft from '../../../ui/icon/icon-caret-left';
import { shortenAddress } from '../../../../helpers/utils/util';
import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { Icon, ICON_NAMES } from '../../../component-library';
export default function ConfirmPageContainerHeader({
onEdit,
@ -54,7 +54,7 @@ export default function ConfirmPageContainerHeader({
visibility: showEdit ? 'initial' : 'hidden',
}}
>
<IconCaretLeft />
<Icon name={ICON_NAMES.ARROW_LEFT} />
<span
data-testid="confirm-page-back-edit-button"
className="confirm-page-container-header__back-button"

8
ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
import {
Color,
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
@ -13,6 +14,7 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF
import { useTransactionModalContext } from '../../../contexts/transaction-modal';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import Typography from '../../ui/typography/typography';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
const t = useI18nContext();
@ -71,7 +73,11 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
</span>
)}
<span className="edit-gas-fee-button__label">{t(title)}</span>
<i className="fas fa-chevron-right asset-list-item__chevron-right" />
<Icon
name={ICON_NAMES.ARROW_RIGHT}
color={Color.primaryDefault}
size={ICON_SIZES.XS}
/>
</button>
{estimateUsed === 'custom' && (
<button onClick={openAdvancedGasFeeModal}>{t('edit')}</button>

11
ui/components/app/edit-gas-fee-button/index.scss
View File

@ -7,7 +7,7 @@
@include H7;
display: flex;
align-items: baseline;
align-items: center;
color: var(--color-primary-default);
background: transparent;
border: 0;
@ -15,19 +15,14 @@
white-space: pre;
}
i {
color: var(--color-primary-default);
margin-right: 2px;
}
&__icon {
font-size: 16px;
margin-right: 4px;
margin-right: 2px;
}
&__label {
font-size: 12px;
margin-right: 8px;
margin-right: 4px;
}
.info-tooltip {

4
ui/components/app/network-display/index.scss
View File

@ -30,10 +30,6 @@
margin-right: 4px;
}
&__icon {
display: block;
}
&--clickable {
cursor: pointer;
}

4
ui/components/app/network-display/network-display.js
View File

@ -16,9 +16,9 @@ import {
TypographyVariant,
} from '../../../helpers/constants/design-system';
import Chip from '../../ui/chip/chip';
import IconCaretDown from '../../ui/icon/icon-caret-down';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { isNetworkLoading } from '../../../selectors';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
export default function NetworkDisplay({
indicatorSize,
@ -68,7 +68,7 @@ export default function NetworkDisplay({
}
rightIcon={
onClick ? (
<IconCaretDown size={16} className="network-display__icon" />
<Icon name={ICON_NAMES.ARROW_DOWN} size={ICON_SIZES.XS} />
) : null
}
label={

5
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -8,9 +8,10 @@ exports[`Collectible Details should match minimal props and state snapshot 1`] =
<button
class="asset-breadcrumb"
>
<i
class="fas fa-chevron-left asset-breadcrumb__chevron"
<div
class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--flex-direction-row box--color-inherit"
data-testid="asset__back"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
<span>
Test Account

4
ui/components/app/nfts-items/index.scss
View File

@ -27,10 +27,6 @@
color: var(--color-overlay-inverse);
text-align: center;
}
&__icon-chevron {
color: var(--color-icon-default);
}
}
&__item-wrapper {

10
ui/components/app/nfts-items/nfts-items.js
View File

@ -31,6 +31,7 @@ import { usePrevious } from '../../../hooks/usePrevious';
import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask';
import { useI18nContext } from '../../../hooks/useI18nContext';
import CollectibleDefaultImage from '../nft-default-image';
import { Icon, ICON_NAMES } from '../../component-library';
const width =
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
@ -163,10 +164,11 @@ export default function CollectiblesItems({
</Typography>
</Box>
<Box alignItems={AlignItems.flexEnd}>
<i
className={`collectibles-items__collection__icon-chevron fa fa-chevron-${
isExpanded ? 'down' : 'right'
}`}
<Icon
name={
isExpanded ? ICON_NAMES.ARROW_DOWN : ICON_NAMES.ARROW_RIGHT
}
color={Color.iconDefault}
/>
</Box>
</Box>

8
ui/components/app/tab-bar/tab-bar.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import IconCaretRight from '../../ui/icon/icon-caret-right';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
const TabBar = (props) => {
const { tabs = [], onSelect, isActive } = props;
@ -21,7 +21,11 @@ const TabBar = (props) => {
<div className="tab-bar__tab__content__icon">{icon}</div>
<div className="tab-bar__tab__content__title">{content}</div>
</div>
<IconCaretRight className="tab-bar__tab__caret" />
<Icon
name={ICON_NAMES.ARROW_RIGHT}
size={ICON_SIZES.SM}
className="tab-bar__tab__caret"
/>
</button>
))}
</div>

5
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -80,8 +80,9 @@ exports[`Token Cell should match snapshot 1`] = `
<div
class="list-item__right-content"
>
<i
class="fas fa-chevron-right asset-list-item__chevron-right"
<div
class="box asset-list-item__chevron-right mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/arrow-right.svg');"
/>
<a
class="button btn-link asset-list-item__send-token-button"

20
ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap
View File

@ -19,8 +19,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
<div
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<i
class="fa transaction-activity-log-icon__icon fa-plus"
<div
class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/add.svg');"
/>
</div>
<div
@ -40,8 +41,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
<div
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<i
class="fa transaction-activity-log-icon__icon fa-arrow-up"
<div
class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</div>
<div
@ -61,8 +63,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
<div
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<i
class="fa transaction-activity-log-icon__icon fa-retweet"
<div
class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/programming-arrows.svg');"
/>
</div>
<div
@ -82,8 +85,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
<div
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<i
class="fa transaction-activity-log-icon__icon fa-check"
<div
class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/check.svg');"
/>
</div>
<div

1
ui/components/app/transaction-activity-log/index.scss
View File

@ -45,7 +45,6 @@
height: 15px;
margin-right: 6px;
border-radius: 50%;
background: var(--color-icon-default);
flex: 0 0 auto;
display: flex;
justify-content: center;

34
ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
View File

@ -12,16 +12,18 @@ import {
TRANSACTION_CANCEL_ATTEMPTED_EVENT,
TRANSACTION_CANCEL_SUCCESS_EVENT,
} from '../transaction-activity-log.constants';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
import { Color } from '../../../../helpers/constants/design-system';
export const imageHash = {
[TRANSACTION_CREATED_EVENT]: 'fa-plus',
[TRANSACTION_SUBMITTED_EVENT]: 'fa-arrow-up',
[TRANSACTION_RESUBMITTED_EVENT]: 'fa-retweet',
[TRANSACTION_CONFIRMED_EVENT]: 'fa-check',
[TRANSACTION_DROPPED_EVENT]: 'fa-times',
[TRANSACTION_ERRORED_EVENT]: 'fa-exclamation',
[TRANSACTION_CANCEL_ATTEMPTED_EVENT]: 'fa-times',
[TRANSACTION_CANCEL_SUCCESS_EVENT]: 'fa-times',
export const ACTIVITY_ICONS = {
[TRANSACTION_CREATED_EVENT]: ICON_NAMES.ADD,
[TRANSACTION_SUBMITTED_EVENT]: ICON_NAMES.ARROW_UP,
[TRANSACTION_RESUBMITTED_EVENT]: ICON_NAMES.PROGRAMMING_ARROWS,
[TRANSACTION_CONFIRMED_EVENT]: ICON_NAMES.CHECK,
[TRANSACTION_DROPPED_EVENT]: ICON_NAMES.CLOSE,
[TRANSACTION_ERRORED_EVENT]: ICON_NAMES.DANGER,
[TRANSACTION_CANCEL_ATTEMPTED_EVENT]: ICON_NAMES.CLOSE,
[TRANSACTION_CANCEL_SUCCESS_EVENT]: ICON_NAMES.CLOSE,
};
export default class TransactionActivityLogIcon extends PureComponent {
@ -31,23 +33,17 @@ export default class TransactionActivityLogIcon extends PureComponent {
static propTypes = {
className: PropTypes.string,
eventKey: PropTypes.oneOf(Object.keys(imageHash)),
eventKey: PropTypes.oneOf(Object.keys(ACTIVITY_ICONS)),
};
render() {
const { className, eventKey } = this.props;
const iconClassName = imageHash[eventKey];
const icon = ACTIVITY_ICONS[eventKey];
return (
<div className={classnames('transaction-activity-log-icon', className)}>
{iconClassName ? (
<i
className={classnames(
'fa',
'transaction-activity-log-icon__icon',
iconClassName,
)}
/>
{icon ? (
<Icon name={icon} color={Color.iconDefault} size={ICON_SIZES.SM} />
) : null}
</div>
);

6
ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { imageHash } from './transaction-activity-log-icon.component';
import { ACTIVITY_ICONS } from './transaction-activity-log-icon.component';
import TransactionActivityLogIcon from '.';
export default {
@ -11,11 +11,11 @@ export default {
},
eventKey: {
control: 'select',
options: Object.keys(imageHash),
options: Object.keys(ACTIVITY_ICONS),
},
},
args: {
eventKey: Object.keys(imageHash)[0],
eventKey: Object.keys(ACTIVITY_ICONS)[0],
},
};

8
ui/components/ui/dropdown/dropdown.js
View File

@ -1,7 +1,7 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import IconCaretDown from '../icon/icon-caret-down';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
const Dropdown = ({
className,
@ -41,7 +41,11 @@ const Dropdown = ({
);
})}
</select>
<IconCaretDown size={16} className="dropdown__icon-caret-down" />
<Icon
name={ICON_NAMES.ARROW_DOWN}
size={ICON_SIZES.SM}
className="dropdown__icon-caret-down"
/>
</div>
);
};

3
ui/components/ui/icon/README.mdx
View File

@ -1,6 +1,5 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import IconCaretLeft from './icon-caret-left.js';
import Approve from './approve-icon.component';
import InfoIcon from './info-icon.component';
import InfoIconInverted from './info-icon-inverted.component';
@ -20,7 +19,7 @@ A range of SVG icon components
## Props
<ArgsTable of={IconCaretLeft} />
<ArgsTable of={SunCheck} />
## Usage

47
ui/components/ui/icon/icon-caret-down.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
* See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
*/
const IconCaretDown = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m399 177c-8-8-22-8-30 0l-113 113-113-113c-8-8-22-8-30 0-8 8-8 22 0 30l128 128c8 8 22 8 30 0l128-128c8-8 8-22 0-30z" />
</svg>
);
IconCaretDown.propTypes = {
/**
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default IconCaretDown;

53
ui/components/ui/icon/icon-caret-left.js
View File

@ -1,53 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
* See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
*/
const IconCaretLeft = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
onClick,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
onClick={onClick}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z" />
</svg>
);
IconCaretLeft.propTypes = {
/**
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The onClick handler
*/
onClick: PropTypes.func,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default IconCaretLeft;

47
ui/components/ui/icon/icon-caret-right.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
* See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
*/
const IconCaretRight = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m177 113c-8 8-8 22 0 30l113 113-113 113c-8 8-8 22 0 30 8 8 22 8 30 0l128-128c8-8 8-22 0-30l-128-128c-8-8-22-8-30 0z" />
</svg>
);
IconCaretRight.propTypes = {
/**
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default IconCaretRight;

47
ui/components/ui/icon/icon-caret-up.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
* See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
*/
const IconCaretUp = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m399 335c-8 8-22 8-30 0l-113-113-113 113c-8 8-22 8-30 0-8-8-8-22 0-30l128-128c8-8 22-8 30 0l128 128c8 8 8 22 0 30z" />
</svg>
);
IconCaretUp.propTypes = {
/**
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default IconCaretUp;

18
ui/components/ui/icon/icon.stories.js
View File

@ -22,10 +22,6 @@ import SendIcon from './send-icon.component';
import Sign from './sign-icon.component';
import SunCheck from './sun-check-icon.component';
import Swap from './swap-icon-for-list.component';
import IconCaretLeft from './icon-caret-left';
import IconCaretRight from './icon-caret-right';
import IconCaretDown from './icon-caret-down';
import IconCaretUp from './icon-caret-up';
import IconCheck from './icon-check';
import IconCog from './icon-cog';
import IconImport from './icon-import';
@ -122,10 +118,6 @@ export const DefaultStory = (args) => (
gridTemplateColumns: 'repeat(auto-fill, 176px)',
}}
>
<IconItem Component={<IconCaretLeft {...args} />} />
<IconItem Component={<IconCaretRight {...args} />} />
<IconItem Component={<IconCaretDown {...args} />} />
<IconItem Component={<IconCaretUp {...args} />} />
<IconItem Component={<IconCheck {...args} />} />
<IconItem Component={<IconPlus {...args} />} />
<IconItem Component={<IconImport {...args} />} />
@ -172,9 +164,9 @@ DefaultStory.args = {
export const Size = (args) => (
<div>
<IconCaretLeft size={16 || args.size} />
<IconCaretLeft size={24 || args.size} />
<IconCaretLeft size={32 || args.size} />
<SunCheck size={16 || args.size} />
<SunCheck size={24 || args.size} />
<SunCheck size={32 || args.size} />
</div>
);
@ -185,12 +177,12 @@ Size.args = {
export const Color = (args) => (
<>
{Object.values(validColors).map((color) => (
<IconCaretLeft {...args} color={args.color || color} key={color} />
<SunCheck {...args} color={args.color || color} key={color} />
))}
</>
);
export const AriaLabel = (args) => <IconCaretLeft {...args} />;
export const AriaLabel = (args) => <SunCheck {...args} />;
AriaLabel.args = {
ariaLabel: 'back',

40
ui/components/ui/popover/index.scss
View File

@ -22,46 +22,6 @@
&-header {
position: relative;
&__title {
display: flex;
align-items: center;
justify-content: space-between;
@include H4;
font-weight: bold;
padding-bottom: 8px;
h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
button {
margin-right: 24px;
}
}
&.center {
justify-content: center;
}
}
&__subtitle {
@include H6;
}
&__button {
background: none;
font-size: inherit;
padding: 0;
color: var(--color-icon-default);
}
i {
cursor: pointer;
}
}
&-bg {

72
ui/components/ui/popover/popover.component.js
View File

@ -9,7 +9,12 @@ import {
BackgroundColor,
FLEX_DIRECTION,
JustifyContent,
Color,
DISPLAY,
TextVariant,
Size,
} from '../../../helpers/constants/design-system';
import { ButtonIcon, Text, ICON_NAMES } from '../../component-library';
const defaultHeaderProps = {
padding: [6, 4, 4],
@ -53,43 +58,44 @@ const Popover = ({
}) => {
const t = useI18nContext();
const showHeader = title || onBack || subtitle || onClose;
const Header = () => {
return (
const Header = () => (
<Box
{...{ ...defaultHeaderProps, ...headerProps }}
className="popover-header"
>
<Box
{...{ ...defaultHeaderProps, ...headerProps }}
className="popover-header"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={
centerTitle ? JustifyContent.center : JustifyContent.spaceBetween
}
marginBottom={2}
>
<div
className={classnames(
'popover-header__title',
centerTitle ? 'center' : '',
)}
>
<h2 title="popover">
{onBack ? (
<button
className="fas fa-chevron-left popover-header__button"
title={t('back')}
onClick={onBack}
/>
) : null}
{title}
</h2>
{onClose ? (
<button
className="fas fa-times popover-header__button"
title={t('close')}
data-testid="popover-close"
onClick={onClose}
/>
) : null}
</div>
{subtitle ? (
<p className="popover-header__subtitle">{subtitle}</p>
{onBack ? (
<ButtonIcon
iconName={ICON_NAMES.ARROW_LEFT}
ariaLabel={t('back')}
onClick={onBack}
color={Color.iconDefault}
size={Size.SM}
/>
) : null}
<Text ellipsis variant={TextVariant.headingSm}>
{title}
</Text>
{onClose ? (
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
ariaLabel={t('close')}
data-testid="popover-close"
onClick={onClose}
size={Size.SM}
/>
) : null}
</Box>
);
};
{subtitle ? <Text variant={TextVariant.bodySm}>{subtitle}</Text> : null}
</Box>
);
return (
<div className="popover-container">

4
ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
View File

@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import copyToClipboard from 'copy-to-clipboard';
import Tooltip from '../tooltip';
import IconCaretRight from '../icon/icon-caret-right';
import Identicon from '../identicon';
import { shortenAddress } from '../../../helpers/utils/util';
import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import NicknamePopovers from '../../app/modals/nickname-popovers';
import { Icon, ICON_NAMES } from '../../component-library';
import {
DEFAULT_VARIANT,
CARDS_VARIANT,
@ -199,7 +199,7 @@ function Arrow({ variant }) {
</div>
) : (
<div className="sender-to-recipient__arrow-container">
<IconCaretRight />
<Icon name={ICON_NAMES.ARROW_RIGHT} />
</div>
);
}

5
ui/pages/asset/asset.scss
View File

@ -22,11 +22,6 @@
color: var(--color-text-default);
background-color: inherit;
&__chevron {
font-size: $font-size-paragraph;
padding: 0 10px 0 2px;
}
&__asset {
font-weight: bold;
}

11
ui/pages/asset/components/asset-breadcrumb.js
View File

@ -1,12 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library';
const AssetBreadcrumb = ({ accountName, assetName, onBack }) => {
return (
<button className="asset-breadcrumb" onClick={onBack}>
<i
className="fas fa-chevron-left asset-breadcrumb__chevron"
<Icon
name={ICON_NAMES.ARROW_LEFT}
data-testid="asset__back"
marginInlineEnd={3}
size={ICON_SIZES.XS}
/>
<span>{accountName}</span>
&nbsp;/&nbsp;

5
ui/pages/confirmation/confirmation.js
View File

@ -33,6 +33,7 @@ import {
import NetworkDisplay from '../../components/app/network-display/network-display';
import Callout from '../../components/ui/callout';
import SiteOrigin from '../../components/ui/site-origin';
import { Icon, ICON_NAMES } from '../../components/component-library';
import ConfirmationFooter from './components/confirmation-footer';
import {
getTemplateValues,
@ -283,7 +284,7 @@ export default function ConfirmationPage({
setCurrentPendingConfirmation(currentPendingConfirmation - 1)
}
>
<i className="fas fa-chevron-left" />
<Icon name={ICON_NAMES.ARROW_LEFT} />
</button>
)}
<button
@ -295,7 +296,7 @@ export default function ConfirmationPage({
setCurrentPendingConfirmation(currentPendingConfirmation + 1)
}
>
<i className="fas fa-chevron-right" />
<Icon name={ICON_NAMES.ARROW_RIGHT} />
</button>
</div>
)}

15
ui/pages/notifications/notifications.js
View File

@ -14,9 +14,14 @@ import {
deleteExpiredNotifications,
markNotificationsAsRead,
} from '../../store/actions';
import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
import Button from '../../components/ui/button';
import { useI18nContext } from '../../hooks/useI18nContext';
import {
ButtonIcon,
ICON_SIZES,
ICON_NAMES,
} from '../../components/component-library';
import { Color } from '../../helpers/constants/design-system';
export function NotificationItem({ notification, snaps, onItemClick }) {
const { message, origin, createdDate, readDate } = notification;
@ -85,10 +90,10 @@ export default function Notifications() {
<div className="main-container notifications">
<div className="notifications__header">
<div className="notifications__header__title-container">
<IconCaretLeft
className="notifications__header__title-container__back-button"
color="var(--color-text-default)"
size={23}
<ButtonIcon
iconName={ICON_NAMES.ARROW_LEFT}
size={ICON_SIZES.LG}
color={Color.textDefault}
onClick={() => history.push(DEFAULT_ROUTE)}
/>
<div className="notifications__header__title-container__title">

4
ui/pages/permissions-connect/index.scss
View File

@ -31,10 +31,6 @@
color: var(--color-icon-default);
font-weight: bold;
cursor: pointer;
i {
margin-right: 10px;
}
}
&__page-count {

11
ui/pages/permissions-connect/permissions-connect.component.js
View File

@ -9,6 +9,11 @@ import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
import { MILLISECOND } from '../../../shared/constants/time';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import PermissionPageContainer from '../../components/app/permission-page-container';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library';
import ChooseAccount from './choose-account';
import PermissionsRedirect from './redirect';
///: BEGIN:ONLY_INCLUDE_IN(flask)
@ -231,7 +236,11 @@ export default class PermissionConnect extends Component {
className="permissions-connect__back"
onClick={() => this.goBack()}
>
<i className="fas fa-chevron-left"></i>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
marginInlineEnd={1}
size={ICON_SIZES.XS}
/>
{t('back')}
</div>
) : null}

16
ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap
View File

@ -80,18 +80,10 @@ exports[`Add Recipient Component Own Account Recipient Search should match snaps
role="button"
tabindex="0"
>
<svg
class="send__select-recipient-wrapper__list__back-caret"
fill="currentColor"
height="24"
viewBox="0 0 512 512"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
/>
</svg>
<div
class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
Back to all
</a>
<div

4
ui/pages/send/send-content/add-recipient/add-recipient.component.js
View File

@ -7,8 +7,8 @@ import ContactList from '../../../../components/app/contact-list';
import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
import { ellipsify } from '../../send.utils';
import Button from '../../../../components/ui/button';
import IconCaretLeft from '../../../../components/ui/icon/icon-caret-left';
import Confusable from '../../../../components/ui/confusable';
import { Icon, ICON_NAMES } from '../../../../components/component-library';
export default class AddRecipient extends Component {
static propTypes = {
@ -181,7 +181,7 @@ export default class AddRecipient extends Component {
className="send__select-recipient-wrapper__list__link"
onClick={useContactListForRecipientSearch}
>
<IconCaretLeft className="send__select-recipient-wrapper__list__back-caret" />
<Icon name={ICON_NAMES.ARROW_LEFT} />
{t('backToAll')}
</Button>
<RecipientGroup

9
ui/pages/settings/settings-search-list/settings-search-list.js
View File

@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { highlightSearchedText } from '../../../helpers/utils/settings-search';
import { I18nContext } from '../../../contexts/i18n';
import IconCaretRight from '../../../components/ui/icon/icon-caret-right';
import { Icon } from '../../../components/component-library';
import { Icon, ICON_NAMES } from '../../../components/component-library';
import { Size } from '../../../helpers/constants/design-system';
export default function SettingsSearchList({ results, onClickSetting }) {
const t = useContext(I18nContext);
@ -44,8 +44,9 @@ export default function SettingsSearchList({ results, onClickSetting }) {
>
{tabMessage(t)}
</span>
<IconCaretRight
size={16}
<Icon
name={ICON_NAMES.ARROW_RIGHT}
size={Size.SM}
className="settings-page__header__search__list__item__caret"
/>
<span

19
ui/pages/settings/settings.component.js
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { Switch, Route, matchPath } from 'react-router-dom';
import classnames from 'classnames';
import TabBar from '../../components/app/tab-bar';
import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
import {
ALERTS_ROUTE,
@ -28,7 +27,13 @@ import {
import { getSettingsRoutes } from '../../helpers/utils/settings-search';
import AddNetwork from '../../components/app/add-network/add-network';
import { Icon, ICON_NAMES } from '../../components/component-library';
import {
Icon,
ButtonIcon,
ICON_SIZES,
ICON_NAMES,
} from '../../components/component-library';
import { Color } from '../../helpers/constants/design-system';
import SettingsTab from './settings-tab';
import AlertsTab from './alerts-tab';
import NetworksTab from './networks-tab';
@ -108,6 +113,7 @@ class SettingsPage extends PureComponent {
} = this.props;
const { searchResults, isSearchList, searchText } = this.state;
const { t } = this.context;
return (
<div
@ -118,10 +124,11 @@ class SettingsPage extends PureComponent {
<div className="settings-page__header">
<div className="settings-page__header__title-container">
{currentPath !== SETTINGS_ROUTE && (
<IconCaretLeft
className="settings-page__back-button"
color="var(--color-icon-default)"
size={32}
<ButtonIcon
ariaLabel={t('back')}
name={ICON_NAMES.ARROW_LEFT}
size={ICON_SIZES.XL}
color={Color.iconDefault}
onClick={() => history.push(backRoute)}
/>
)}