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: Remove the IconCopy and IconCopied Components and their usages (#17530)

Browse Source
This commit is contained in:
David Walsh 2023-02-03 16:06:14 -06:00 committed by GitHub
parent 710b1a3fbf
commit 330cba61de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/app/flask/copyable/copyable.js
View File

@ -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 ? (
<IconCopied
color="var(--color-icon-alternative)"
className="copyable__icon"
size={18}
<Icon
name={ICON_NAMES.COPY_SUCCESS}
size={ICON_SIZES.LG}
color={COLORS.ICON_ALTERNATIVE}
/>
) : (
<IconCopy
className="copyable__icon"
color="var(--color-icon-alternative)"
<Icon
name={ICON_NAMES.COPY}
size={ICON_SIZES.LG}
color={COLORS.ICON_ALTERNATIVE}
onClick={() => handleCopy(text)}
size={18}
/>
)}
</Box>

36
ui/components/app/modals/contract-details-modal/contract-details-modal.js
View File

@ -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')
}
>
<Button
className="contract-details-modal__content__contract__buttons__copy"
type="link"
onClick={() => {
handleCopyTokenAddress(tokenAddress);
}}
>
<IconCopy color="var(--color-icon-muted)" />
</Button>
<ButtonIcon
iconName={
copiedTokenAddress
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
}
onClick={() => handleCopyTokenAddress(tokenAddress)}
color={COLORS.ICON_MUTED}
/>
</Tooltip>
</Box>
<Box marginTop={5} marginRight={5}>
@ -264,15 +264,13 @@ export default function ContractDetailsModal({
: t('copyToClipboard')
}
>
<Button
className="contract-details-modal__content__contract__buttons__copy"
type="link"
onClick={() => {
handleCopyToAddress(toAddress);
}}
>
<IconCopy color="var(--color-icon-muted)" />
</Button>
<ButtonIcon
iconName={
copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
}
onClick={() => handleCopyToAddress(toAddress)}
color={COLORS.ICON_MUTED}
/>
</Tooltip>
</Box>
<Box marginTop={5} marginRight={5}>

14
ui/components/ui/contract-token-values/contract-token-values.js
View File

@ -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')}
>
<Button
type="link"
<ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
className="contract-token-values__copy-address__button"
onClick={() => {
handleCopy(address);
}}
>
<IconCopy size={24} color="var(--color-icon-muted)" />
</Button>
onClick={() => handleCopy(address)}
/>
</Tooltip>
</Box>
<Box className="contract-token-values__block-explorer">

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

@ -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
<ArgsTable of={Preloader} />
## IconCopy
<Canvas>
<Story id="components-ui-icon--icon-copy-story" />
</Canvas>
<ArgsTable of={IconCopy} />
## IconBlockExplorer
<Canvas>

49
ui/components/ui/icon/icon-copied.js
View File

@ -1,49 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconCopied = ({
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 24 24"
>
<path d="M16.59 3H12.81C10.0352 3 8.73388 3.98468 8.46277 6.36511C8.40605 6.86311 8.81849 7.275 9.31971 7.275H11.19C14.97 7.275 16.725 9.03 16.725 12.81V14.6803C16.725 15.1815 17.1369 15.594 17.6349 15.5372C20.0153 15.2661 21 13.9648 21 11.19V7.41C21 4.26 19.74 3 16.59 3Z" />
<path d="M11.19 8.4H7.41C4.26 8.4 3 9.66 3 12.81V16.59C3 19.74 4.26 21 7.41 21H11.19C14.34 21 15.6 19.74 15.6 16.59V12.81C15.6 9.66 14.34 8.4 11.19 8.4ZM12.261 13.485L8.922 16.824C8.796 16.95 8.634 17.013 8.463 17.013C8.292 17.013 8.13 16.95 8.004 16.824L6.33 15.15C6.078 14.898 6.078 14.493 6.33 14.241C6.582 13.989 6.987 13.989 7.239 14.241L8.454 15.456L11.343 12.567C11.595 12.315 12 12.315 12.252 12.567C12.504 12.819 12.513 13.233 12.261 13.485Z" />
</svg>
);
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;

47
ui/components/ui/icon/icon-copy.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconCopy = ({
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="m333 274l0 86c0 72-28 101-100 101l-86 0c-72 0-100-29-100-101l0-86c0-71 28-100 100-100l86 0c72 0 100 29 100 100z m23-223l-86 0c-63 0-93 23-99 77-1 11 8 20 20 20l42 0c86 0 126 40 126 126l0 43c0 11 9 21 21 19 54-6 76-35 76-98l0-86c0-72-28-101-100-101z" />
</svg>
);
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;

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

@ -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) => (
<IconItem Component={<IconCog {...args} />} />
<IconItem Component={<IconTokenSearch {...args} />} />
<IconItem Component={<SearchIcon {...args} />} />
<IconItem Component={<IconCopy {...args} />} />
<IconItem Component={<IconBlockExplorer {...args} />} />
<IconItem Component={<IconCopied {...args} />} />
</div>
</Box>
<Typography
@ -287,12 +283,6 @@ PreloaderStory.args = {
};
PreloaderStory.storyName = 'Preloader';
export const IconCopyStory = (args) => <IconCopy {...args} />;
IconCopyStory.args = {
size: 40,
};
IconCopyStory.storyName = 'IconCopy';
export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
IconBlockExplorerStory.args = {
size: 40,