diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index 4851f87ef..f069ec3ff 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -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-connect.js", diff --git a/test/e2e/swaps/swaps-notifications.spec.js b/test/e2e/swaps/swaps-notifications.spec.js index c00c6f075..0158b599b 100644 --- a/test/e2e/swaps/swaps-notifications.spec.js +++ b/test/e2e/swaps/swaps-notifications.spec.js @@ -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( diff --git a/ui/components/app/app-header/__snapshots__/app-header.test.js.snap b/ui/components/app/app-header/__snapshots__/app-header.test.js.snap index 3949b9881..fc03bf83d 100644 --- a/ui/components/app/app-header/__snapshots__/app-header.test.js.snap +++ b/ui/components/app/app-header/__snapshots__/app-header.test.js.snap @@ -232,18 +232,10 @@ exports[`App Header should match snapshot 1`] = `
- - - +
diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js index deef3bfe5..f65c13545 100644 --- a/ui/components/app/asset-list-item/asset-list-item.js +++ b/ui/components/app/asset-list-item/asset-list-item.js @@ -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 && ( <> - + {sendTokenButton} ) diff --git a/ui/components/app/asset-list-item/asset-list-item.scss b/ui/components/app/asset-list-item/asset-list-item.scss index 9e657d4be..1c1702e53 100644 --- a/ui/components/app/asset-list-item/asset-list-item.scss +++ b/ui/components/app/asset-list-item/asset-list-item.scss @@ -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; } } diff --git a/ui/components/app/asset-list-item/asset-list-item.stories.js b/ui/components/app/asset-list-item/asset-list-item.stories.js new file mode 100644 index 000000000..0fd34e53a --- /dev/null +++ b/ui/components/app/asset-list-item/asset-list-item.stories.js @@ -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) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap index 80aeb929f..e7fb55a39 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap +++ b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap @@ -13,17 +13,10 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = ` class="confirm-page-container-header__back-button-container" style="visibility: hidden;" > - - - +
- + )} {t(title)} - + {estimateUsed === 'custom' && ( diff --git a/ui/components/app/edit-gas-fee-button/index.scss b/ui/components/app/edit-gas-fee-button/index.scss index 448eab674..e2ca5e6d3 100644 --- a/ui/components/app/edit-gas-fee-button/index.scss +++ b/ui/components/app/edit-gas-fee-button/index.scss @@ -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 { diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss index 1ca9b410a..16755aa5f 100644 --- a/ui/components/app/network-display/index.scss +++ b/ui/components/app/network-display/index.scss @@ -30,10 +30,6 @@ margin-right: 4px; } - &__icon { - display: block; - } - &--clickable { cursor: pointer; } diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js index 669035f5e..2b7e53aec 100644 --- a/ui/components/app/network-display/network-display.js +++ b/ui/components/app/network-display/network-display.js @@ -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 ? ( - + ) : null } label={ diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap index 562938ccf..892e798e0 100644 --- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap +++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap @@ -8,9 +8,10 @@ exports[`Collectible Details should match minimal props and state snapshot 1`] =
- + ))} diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap index efea9cda4..ee1ea8df5 100644 --- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap +++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap @@ -80,8 +80,9 @@ exports[`Token Cell should match snapshot 1`] = `
- -
-
-
-
- {iconClassName ? ( - + {icon ? ( + ) : null}
); diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js index 507652d54..b23e82f47 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js @@ -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], }, }; diff --git a/ui/components/ui/dropdown/dropdown.js b/ui/components/ui/dropdown/dropdown.js index 8bfde46ff..5cba69ad9 100644 --- a/ui/components/ui/dropdown/dropdown.js +++ b/ui/components/ui/dropdown/dropdown.js @@ -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 = ({ ); })} - + ); }; diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index 7b8ab0711..eb0254dc0 100644 --- a/ui/components/ui/icon/README.mdx +++ b/ui/components/ui/icon/README.mdx @@ -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 - + ## Usage diff --git a/ui/components/ui/icon/icon-caret-down.js b/ui/components/ui/icon/icon-caret-down.js deleted file mode 100644 index 64b40a31a..000000000 --- a/ui/components/ui/icon/icon-caret-down.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCaretDown = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, -}) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon-caret-left.js b/ui/components/ui/icon/icon-caret-left.js deleted file mode 100644 index 4fe22144e..000000000 --- a/ui/components/ui/icon/icon-caret-left.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCaretLeft = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, - onClick, -}) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon-caret-right.js b/ui/components/ui/icon/icon-caret-right.js deleted file mode 100644 index 890f89171..000000000 --- a/ui/components/ui/icon/icon-caret-right.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCaretRight = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, -}) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon-caret-up.js b/ui/components/ui/icon/icon-caret-up.js deleted file mode 100644 index 8e455e638..000000000 --- a/ui/components/ui/icon/icon-caret-up.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCaretUp = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, -}) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 79ff63b2e..fa184c310 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -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 IconConnect from './icon-connect'; @@ -116,10 +112,6 @@ export const DefaultStory = (args) => ( gridTemplateColumns: 'repeat(auto-fill, 176px)', }} > - } /> - } /> - } /> - } /> } /> } /> } /> @@ -174,9 +166,9 @@ DefaultStory.args = { export const Size = (args) => (
- - - + + +
); @@ -187,12 +179,12 @@ Size.args = { export const Color = (args) => ( <> {Object.values(validColors).map((color) => ( - + ))} ); -export const AriaLabel = (args) => ; +export const AriaLabel = (args) => ; AriaLabel.args = { ariaLabel: 'back', diff --git a/ui/components/ui/popover/index.scss b/ui/components/ui/popover/index.scss index 99077d5df..acb22a510 100644 --- a/ui/components/ui/popover/index.scss +++ b/ui/components/ui/popover/index.scss @@ -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 { diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js index 119b5f40d..11a333aec 100644 --- a/ui/components/ui/popover/popover.component.js +++ b/ui/components/ui/popover/popover.component.js @@ -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 = () => ( + -
-

- {onBack ? ( -

- {onClose ? ( -
- {subtitle ? ( -

{subtitle}

+ {onBack ? ( + + ) : null} + + {title} + + {onClose ? ( + ) : null} - ); - }; + {subtitle ? {subtitle} : null} + + ); return (
diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js index 3254c9299..446f47c5b 100644 --- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js @@ -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 }) {
) : (
- +
); } diff --git a/ui/pages/asset/asset.scss b/ui/pages/asset/asset.scss index 0b1b8543e..4365547e3 100644 --- a/ui/pages/asset/asset.scss +++ b/ui/pages/asset/asset.scss @@ -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; } diff --git a/ui/pages/asset/components/asset-breadcrumb.js b/ui/pages/asset/components/asset-breadcrumb.js index ac11054c3..d66c20d33 100644 --- a/ui/pages/asset/components/asset-breadcrumb.js +++ b/ui/pages/asset/components/asset-breadcrumb.js @@ -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 ( )} )} diff --git a/ui/pages/notifications/notifications.js b/ui/pages/notifications/notifications.js index 9e4fd64b8..75768cf3a 100644 --- a/ui/pages/notifications/notifications.js +++ b/ui/pages/notifications/notifications.js @@ -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() {
- history.push(DEFAULT_ROUTE)} />
diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss index f1bcb4910..1ca3c116a 100644 --- a/ui/pages/permissions-connect/index.scss +++ b/ui/pages/permissions-connect/index.scss @@ -31,10 +31,6 @@ color: var(--color-icon-default); font-weight: bold; cursor: pointer; - - i { - margin-right: 10px; - } } &__page-count { diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js index c3bcf5f51..28c7b373e 100644 --- a/ui/pages/permissions-connect/permissions-connect.component.js +++ b/ui/pages/permissions-connect/permissions-connect.component.js @@ -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()} > - + {t('back')}
) : null} diff --git a/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap b/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap index aa4293935..579abc354 100644 --- a/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap +++ b/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap @@ -80,18 +80,10 @@ exports[`Add Recipient Component Own Account Recipient Search should match snaps role="button" tabindex="0" > - - - +
Back to all
- + {t('backToAll')} {tabMessage(t)} -
{currentPath !== SETTINGS_ROUTE && ( - history.push(backRoute)} /> )}