From 710b1a3fbfd27c1890b16e2cfa05fd62652dcf75 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 3 Feb 2023 16:05:51 -0600 Subject: [PATCH 1/3] UX: Update support icon (#17560) --- .../files-to-convert.json | 1 - .../account-menu/account-menu.component.js | 8 ++-- ui/components/ui/icon/icon-speech-bubbles.js | 42 ------------------- ui/components/ui/icon/icon.stories.js | 2 - 4 files changed, 3 insertions(+), 50 deletions(-) delete mode 100644 ui/components/ui/icon/icon-speech-bubbles.js diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index 684060275a1f..45ca3e5b6a8e 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -896,7 +896,6 @@ "ui/components/ui/icon/icon-eye.js", "ui/components/ui/icon/icon-import.js", "ui/components/ui/icon/icon-plus.js", - "ui/components/ui/icon/icon-speech-bubbles.js", "ui/components/ui/icon/icon-token-search.js", "ui/components/ui/icon/icon.stories.js", "ui/components/ui/icon/info-icon-inverted.component.js", diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index 495f79ae5590..673987563ce9 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -32,7 +32,6 @@ import { } from '../../../helpers/constants/routes'; import TextField from '../../ui/text-field'; import IconCheck from '../../ui/icon/icon-check'; -import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles'; import IconConnect from '../../ui/icon/icon-connect'; import IconCog from '../../ui/icon/icon-cog'; import IconPlus from '../../ui/icon/icon-plus'; @@ -41,6 +40,8 @@ import IconImport from '../../ui/icon/icon-import'; import Button from '../../ui/button'; import SearchIcon from '../../ui/icon/search-icon'; import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils'; +import { Icon, ICON_NAMES } from '../../component-library'; +import { Color } from '../../../helpers/constants/design-system'; import KeyRingLabel from './keyring-label'; export function AccountMenuItem(props) { @@ -460,10 +461,7 @@ export default class AccountMenu extends Component { global.platform.openTab({ url: supportLink }); }} icon={ - + } text={supportText} /> diff --git a/ui/components/ui/icon/icon-speech-bubbles.js b/ui/components/ui/icon/icon-speech-bubbles.js deleted file mode 100644 index 5a7869ada80a..000000000000 --- a/ui/components/ui/icon/icon-speech-bubbles.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconSpeechBubbles = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, -}) => ( - - - -); - -IconSpeechBubbles.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 IconSpeechBubbles; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index d169f81963d0..6006070678ba 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -30,7 +30,6 @@ import IconCheck from './icon-check'; import IconCog from './icon-cog'; import IconConnect from './icon-connect'; import IconImport from './icon-import'; -import IconSpeechBubbles from './icon-speech-bubbles'; import IconPlus from './icon-plus'; import IconEye from './icon-eye'; import IconEyeSlash from './icon-eye-slash'; @@ -128,7 +127,6 @@ export const DefaultStory = (args) => ( } /> } /> } /> - } /> } /> } /> } /> From 330cba61dece10f5a2642da427bd740e9267f0a6 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 3 Feb 2023 16:06:14 -0600 Subject: [PATCH 2/3] UX: Remove the IconCopy and IconCopied Components and their usages (#17530) --- ui/components/app/flask/copyable/copyable.js | 19 ++++--- .../contract-details-modal.js | 36 +++++++------- .../contract-token-values.js | 14 ++---- ui/components/ui/icon/README.mdx | 9 ---- ui/components/ui/icon/icon-copied.js | 49 ------------------- ui/components/ui/icon/icon-copy.js | 47 ------------------ ui/components/ui/icon/icon.stories.js | 10 ---- 7 files changed, 31 insertions(+), 153 deletions(-) delete mode 100644 ui/components/ui/icon/icon-copied.js delete mode 100644 ui/components/ui/icon/icon-copy.js diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js index 0bac2d952f00..e59213834f9c 100644 --- a/ui/components/app/flask/copyable/copyable.js +++ b/ui/components/app/flask/copyable/copyable.js @@ -1,8 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import Box from '../../../ui/box'; -import IconCopied from '../../../ui/icon/icon-copied'; -import IconCopy from '../../../ui/icon/icon-copy'; import Typography from '../../../ui/typography'; import { AlignItems, @@ -15,6 +13,7 @@ import { TextColor, } from '../../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; +import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; export const Copyable = ({ text }) => { const [copied, handleCopy] = useCopyToClipboard(); @@ -46,17 +45,17 @@ export const Copyable = ({ text }) => { marginBottom={1} > {copied ? ( - ) : ( - handleCopy(text)} - size={18} /> )} diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index 43abd93b0133..938cd1af2456 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -4,7 +4,6 @@ import { getAccountLink } from '@metamask/etherscan-link'; import { useSelector } from 'react-redux'; import classnames from 'classnames'; import Box from '../../../ui/box'; -import IconCopy from '../../../ui/icon/icon-copy'; import IconBlockExplorer from '../../../ui/icon/icon-block-explorer'; import Button from '../../../ui/button/button.component'; import Tooltip from '../../../ui/tooltip/tooltip'; @@ -28,6 +27,7 @@ import UrlIcon from '../../../ui/url-icon/url-icon'; import { getAddressBookEntry } from '../../../../selectors'; import { TokenStandard } from '../../../../../shared/constants/transaction'; import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image'; +import { ButtonIcon, ICON_NAMES } from '../../../component-library'; export default function ContractDetailsModal({ onClose, @@ -146,15 +146,15 @@ export default function ContractDetailsModal({ : t('copyToClipboard') } > - + handleCopyTokenAddress(tokenAddress)} + color={COLORS.ICON_MUTED} + /> @@ -264,15 +264,13 @@ export default function ContractDetailsModal({ : t('copyToClipboard') } > - + handleCopyToAddress(toAddress)} + color={COLORS.ICON_MUTED} + /> diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js index 1dde64047774..ebe16e52f23f 100644 --- a/ui/components/ui/contract-token-values/contract-token-values.js +++ b/ui/components/ui/contract-token-values/contract-token-values.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { getAccountLink } from '@metamask/etherscan-link'; -import IconCopy from '../icon/icon-copy'; import IconBlockExplorer from '../icon/icon-block-explorer'; import Box from '../box/box'; import Tooltip from '../tooltip/tooltip'; @@ -18,6 +17,7 @@ import { } from '../../../helpers/constants/design-system'; import Button from '../button'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; +import { ButtonIcon, ICON_NAMES } from '../../component-library'; export default function ContractTokenValues({ address, @@ -52,15 +52,11 @@ export default function ContractTokenValues({ position="top" title={copied ? t('copiedExclamation') : t('copyToClipboard')} > - + onClick={() => handleCopy(address)} + /> diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index 0f053cfce397..c2a05ed210b3 100644 --- a/ui/components/ui/icon/README.mdx +++ b/ui/components/ui/icon/README.mdx @@ -11,7 +11,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 IconCopy from './icon-copy' import IconBlockExplorer from './icon-block-explorer'; @@ -182,14 +181,6 @@ Use the `className` prop to add an additional class to the icon. This additional -## IconCopy - - - - - - - ## IconBlockExplorer diff --git a/ui/components/ui/icon/icon-copied.js b/ui/components/ui/icon/icon-copied.js deleted file mode 100644 index 0883554bf53b..000000000000 --- a/ui/components/ui/icon/icon-copied.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCopied = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, - onClick, -}) => ( - - - - -); - -IconCopied.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 IconCopied; diff --git a/ui/components/ui/icon/icon-copy.js b/ui/components/ui/icon/icon-copy.js deleted file mode 100644 index df4825fcf865..000000000000 --- a/ui/components/ui/icon/icon-copy.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconCopy = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, - onClick, -}) => ( - - - -); - -IconCopy.propTypes = { - /** - * The size of the icon in pixels. Should follow 8px grid 16, 24, 32, 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 IconCopy; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 6006070678ba..04b51d1f7731 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -35,9 +35,7 @@ import IconEye from './icon-eye'; import IconEyeSlash from './icon-eye-slash'; import IconTokenSearch from './icon-token-search'; import SearchIcon from './search-icon'; -import IconCopy from './icon-copy'; import IconBlockExplorer from './icon-block-explorer'; -import IconCopied from './icon-copied'; const validColors = [ 'var(--color-icon-default)', @@ -130,9 +128,7 @@ export const DefaultStory = (args) => ( } /> } /> } /> - } /> } /> - } /> ; -IconCopyStory.args = { - size: 40, -}; -IconCopyStory.storyName = 'IconCopy'; - export const IconBlockExplorerStory = (args) => ; IconBlockExplorerStory.args = { size: 40, From 678ad6397b467949d6526b4f350816ba9c03ecca Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 3 Feb 2023 17:47:45 -0600 Subject: [PATCH 3/3] Change COLORS reference to Color (#17599) * Change COLORS reference to Color * Fix lint --- ui/components/app/flask/copyable/copyable.js | 5 +++-- .../modals/contract-details-modal/contract-details-modal.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js index e59213834f9c..e682cdba36fe 100644 --- a/ui/components/app/flask/copyable/copyable.js +++ b/ui/components/app/flask/copyable/copyable.js @@ -11,6 +11,7 @@ import { TypographyVariant, BackgroundColor, TextColor, + Color, } from '../../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; @@ -48,13 +49,13 @@ export const Copyable = ({ text }) => { ) : ( handleCopy(text)} /> )} diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index 938cd1af2456..bc50d1054d78 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -21,6 +21,7 @@ import { BorderStyle, BorderColor, TextColor, + Color, } from '../../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; import UrlIcon from '../../../ui/url-icon/url-icon'; @@ -153,7 +154,7 @@ export default function ContractDetailsModal({ : ICON_NAMES.COPY } onClick={() => handleCopyTokenAddress(tokenAddress)} - color={COLORS.ICON_MUTED} + color={Color.iconMuted} /> @@ -269,7 +270,7 @@ export default function ContractDetailsModal({ copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY } onClick={() => handleCopyToAddress(toAddress)} - color={COLORS.ICON_MUTED} + color={Color.iconMuted} />