m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

update Icon to TS version in UI Folder (#18551)

Browse Source 
* update Icon to TS version and using proper Enums

* Update ui/components/ui/menu/menu.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/components/ui/nickname-popover/nickname-popover.component.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
Garrett Bear 2023-04-18 09:48:34 -07:00 committed by GitHub
parent 7fa7c05586
commit 13f4295287
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 52 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/ui/callout/callout.js
View File

@ -5,11 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
import { SEVERITIES, Color } from '../../../helpers/constants/design-system'; import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
import { MILLISECOND } from '../../../../shared/constants/time'; import { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography'; import Typography from '../typography';
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; import { ButtonIcon, IconName, IconSize } from '../../component-library';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
export default function Callout({ export default function Callout({
severity, severity,
@ -47,8 +43,8 @@ export default function Callout({
</Typography> </Typography>
{dismiss && ( {dismiss && (
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
size={ICON_SIZES.SM} size={IconSize.Sm}
className="callout__close-button" className="callout__close-button"
onClick={() => { onClick={() => {
setRemoved(true); setRemoved(true);

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

@ -16,8 +16,7 @@ import {
Color, Color,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; import { ButtonIcon, IconName } from '../../component-library';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
export default function ContractTokenValues({ export default function ContractTokenValues({
address, address,
@ -51,7 +50,7 @@ export default function ContractTokenValues({
title={copied ? t('copiedExclamation') : t('copyToClipboard')} title={copied ? t('copiedExclamation') : t('copyToClipboard')}
> >
<ButtonIcon <ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} iconName={copied ? IconName.CopySuccess : IconName.Copy}
color={Color.iconMuted} color={Color.iconMuted}
onClick={() => handleCopy(address)} onClick={() => handleCopy(address)}
ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')} ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')}
@ -60,7 +59,7 @@ export default function ContractTokenValues({
<Tooltip position="top" title={t('openInBlockExplorer')}> <Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon <ButtonIcon
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT} iconName={IconName.Export}
color={Color.iconMuted} color={Color.iconMuted}
onClick={() => { onClick={() => {
const blockExplorerTokenLink = getAccountLink( const blockExplorerTokenLink = getAccountLink(

7
ui/components/ui/disclosure/disclosure.js
View File

@ -1,8 +1,7 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName, IconSize } from '../../component-library';
import { Size } from '../../../helpers/constants/design-system';
const Disclosure = ({ children, title, size }) => { const Disclosure = ({ children, title, size }) => {
const disclosureFooterEl = useRef(null); const disclosureFooterEl = useRef(null);
@ -27,8 +26,8 @@ const Disclosure = ({ children, title, size }) => {
<summary className="disclosure__summary"> <summary className="disclosure__summary">
<Icon <Icon
className="disclosure__summary--icon" className="disclosure__summary--icon"
name={ICON_NAMES.ADD} name={IconName.Add}
size={Size.SM} size={IconSize.Sm}
marginInlineEnd={2} marginInlineEnd={2}
/> />
{title} {title}

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

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

7
ui/components/ui/editable-label/editable-label.js
View File

@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Color } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts'; import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; import { ButtonIcon, IconName } from '../../component-library';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
export default class EditableLabel extends Component { export default class EditableLabel extends Component {
static propTypes = { static propTypes = {
@ -60,7 +59,7 @@ export default class EditableLabel extends Component {
autoFocus autoFocus
/> />
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CHECK} iconName={IconName.Check}
className="editable-label__icon-button" className="editable-label__icon-button"
onClick={() => this.handleSubmit(isValidAccountName)} onClick={() => this.handleSubmit(isValidAccountName)}
/> />
@ -76,7 +75,7 @@ export default class EditableLabel extends Component {
<div className={classnames('editable-label', this.props.className)}> <div className={classnames('editable-label', this.props.className)}>
<div className="editable-label__value">{this.state.value}</div> <div className="editable-label__value">{this.state.value}</div>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.EDIT} iconName={IconName.Edit}
ariaLabel={this.context.t('edit')} ariaLabel={this.context.t('edit')}
data-testid="editable-label-button" data-testid="editable-label-button"
onClick={() => this.setState({ isEditing: true })} onClick={() => this.setState({ isEditing: true })}

8
ui/components/ui/error-message/error-message.component.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName, IconSize } from '../../component-library';
import { IconColor, Size } from '../../../helpers/constants/design-system'; import { IconColor } from '../../../helpers/constants/design-system';
/** /**
* @deprecated - Please use ActionableMessage type danger * @deprecated - Please use ActionableMessage type danger
@ -19,8 +19,8 @@ const ErrorMessage = (props, context) => {
<div className="error-message"> <div className="error-message">
<Icon <Icon
className="error-message__icon" className="error-message__icon"
name={ICON_NAMES.WARNING} name={IconName.Warning}
size={Size.SM} size={IconSize.Sm}
color={IconColor.errorDefault} color={IconColor.errorDefault}
marginRight={2} marginRight={2}
/> />

6
ui/components/ui/form-field/form-field.stories.js
View File

@ -4,7 +4,7 @@ import React, { useState } from 'react';
import Typography from '../typography'; import Typography from '../typography';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName } from '../../component-library';
import { AlignItems } from '../../../helpers/constants/design-system'; import { AlignItems } from '../../../helpers/constants/design-system';
import README from './README.mdx'; import README from './README.mdx';
import FormField from '.'; import FormField from '.';
@ -70,7 +70,7 @@ export const FormFieldWithTitleDetail = (args) => {
Click Me Click Me
</button> </button>
), ),
checkmark: <Icon name={ICON_NAMES.CHECK} />, checkmark: <Icon name={IconName.Check} />,
}; };
return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />; return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />;
@ -108,7 +108,7 @@ export const CustomComponents = (args) => {
position="top" position="top"
html={<Typography>Custom tooltip</Typography>} html={<Typography>Custom tooltip</Typography>}
> >
<Icon name={ICON_NAMES.QUESTION} marginLeft={2} /> <Icon name={IconName.Question} marginLeft={2} />
</Tooltip> </Tooltip>
} }
titleDetail={<Typography>TitleDetail</Typography>} titleDetail={<Typography>TitleDetail</Typography>}

13
ui/components/ui/menu/menu.stories.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { IconName } from '../../component-library';
import { Menu, MenuItem } from '.'; import { Menu, MenuItem } from '.';
export default { export default {
@ -10,11 +10,11 @@ export default {
export const DefaultStory = () => { export const DefaultStory = () => {
return ( return (
<Menu onHide={action('Hide')}> <Menu onHide={action('Hide')}>
<MenuItem iconName={ICON_NAMES.EYE} onClick={action('Menu Item 1')}> <MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
Menu Item 1 Menu Item 1
</MenuItem> </MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem> <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem iconName={ICON_NAMES.EYE_SLASH} onClick={action('Menu Item 3')}> <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
Menu Item 3 Menu Item 3
</MenuItem> </MenuItem>
</Menu> </Menu>
@ -29,14 +29,11 @@ export const Anchored = () => {
<> <>
<button ref={setAnchorElement}>Menu</button> <button ref={setAnchorElement}>Menu</button>
<Menu anchorElement={anchorElement} onHide={action('Hide')}> <Menu anchorElement={anchorElement} onHide={action('Hide')}>
<MenuItem iconName={ICON_NAMES.EXPORT} onClick={action('Menu Item 1')}> <MenuItem iconName={IconName.Export} onClick={action('Menu Item 1')}>
Menu Item 1 Menu Item 1
</MenuItem> </MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem> <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
iconName={ICON_NAMES.EYE_SLSH}
onClick={action('Menu Item 3')}
>
Menu Item 3 Menu Item 3
</MenuItem> </MenuItem>
</Menu> </Menu>

4
ui/components/ui/new-network-info/new-network-info.js
View File

@ -26,7 +26,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
import Chip from '../chip/chip'; import Chip from '../chip/chip';
import { setFirstTimeUsedNetwork } from '../../../store/actions'; import { setFirstTimeUsedNetwork } from '../../../store/actions';
import { NETWORK_TYPES } from '../../../../shared/constants/network'; import { NETWORK_TYPES } from '../../../../shared/constants/network';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName } from '../../component-library';
const NewNetworkInfo = () => { const NewNetworkInfo = () => {
const t = useContext(I18nContext); const t = useContext(I18nContext);
@ -106,7 +106,7 @@ const NewNetworkInfo = () => {
) : ( ) : (
<Icon <Icon
className="question" className="question"
name={ICON_NAMES.QUESTION} name={IconName.Question}
color={Color.iconDefault} color={Color.iconDefault}
/> />
) )

10
ui/components/ui/nickname-popover/nickname-popover.component.js
View File

@ -11,11 +11,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { getTokenList, getBlockExplorerLinkText } from '../../../selectors'; import { getTokenList, getBlockExplorerLinkText } from '../../../selectors';
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes'; import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
import { import { ButtonIcon, IconName, IconSize } from '../../component-library';
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
import { ButtonIcon } from '../../component-library/button-icon/deprecated';
const NicknamePopover = ({ const NicknamePopover = ({
address, address,
@ -67,8 +63,8 @@ const NicknamePopover = ({
title={copied ? t('copiedExclamation') : t('copyToClipboard')} title={copied ? t('copiedExclamation') : t('copyToClipboard')}
> >
<ButtonIcon <ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} iconName={copied ? IconName.CopySuccess : IconName.Copy}
size={ICON_SIZES.SM} size={IconSize.Sm}
onClick={() => handleCopy(address)} onClick={() => handleCopy(address)}
/> />
</Tooltip> </Tooltip>

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

@ -18,13 +18,14 @@ import {
TEXT_ALIGN, TEXT_ALIGN,
BLOCK_SIZES, BLOCK_SIZES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { import {
ButtonIcon,
Icon, Icon,
ICON_NAMES, IconName,
ICON_SIZES, IconSize,
} from '../../component-library/icon/deprecated'; Text,
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; } from '../../component-library';
import { Text } from '../../component-library';
const defaultHeaderProps = { const defaultHeaderProps = {
padding: [6, 4, 4], padding: [6, 4, 4],
@ -86,7 +87,7 @@ const Popover = ({
> >
{onBack ? ( {onBack ? (
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.ARROW_LEFT} iconName={IconName.ArrowLeft}
ariaLabel={t('back')} ariaLabel={t('back')}
onClick={onBack} onClick={onBack}
color={Color.iconDefault} color={Color.iconDefault}
@ -104,7 +105,7 @@ const Popover = ({
</Text> </Text>
{onClose ? ( {onClose ? (
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
ariaLabel={t('close')} ariaLabel={t('close')}
data-testid="popover-close" data-testid="popover-close"
onClick={onClose} onClick={onClose}
@ -151,9 +152,9 @@ const Popover = ({
data-testid="popover-scroll-button" data-testid="popover-scroll-button"
> >
<Icon <Icon
name={ICON_NAMES.ARROW_DOWN} name={IconName.ArrowDown}
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
size={ICON_SIZES.MD} size={IconSize.Md}
aria-label={t('scrollDown')} aria-label={t('scrollDown')}
/> />
</Box> </Box>

10
ui/components/ui/qr-code/qr-code.js
View File

@ -9,11 +9,7 @@ import Tooltip from '../tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { AddressCopyButton } from '../../multichain/address-copy-button'; import { AddressCopyButton } from '../../multichain/address-copy-button';
import Box from '../box/box'; import Box from '../box/box';
import { import { Icon, IconName, IconSize } from '../../component-library';
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
export default connect(mapStateToProps)(QrCodeView); export default connect(mapStateToProps)(QrCodeView);
@ -80,8 +76,8 @@ function QrCodeView(props) {
> >
<div className="qr-code__address">{toChecksumHexAddress(data)}</div> <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
<Icon <Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} name={copied ? IconName.CopySuccess : IconName.Copy}
size={ICON_SIZES.SM} size={IconSize.Sm}
marginInlineStart={3} marginInlineStart={3}
/> />
</div> </div>

15
ui/components/ui/review-spending-cap/review-spending-cap.js
View File

@ -4,12 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
import Box from '../box'; import Box from '../box';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import Typography from '../typography'; import Typography from '../typography';
import { ButtonLink } from '../../component-library'; import { ButtonLink, Icon, IconName, IconSize } from '../../component-library';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
import { import {
AlignItems, AlignItems,
DISPLAY, DISPLAY,
@ -86,7 +81,7 @@ export default function ReviewSpendingCap({
color={TextColor.errorDefault} color={TextColor.errorDefault}
> >
<Icon <Icon
name={ICON_NAMES.WARNING} name={IconName.Warning}
style={{ verticalAlign: 'middle' }} style={{ verticalAlign: 'middle' }}
/> />
{t('beCareful')} {t('beCareful')}
@ -100,16 +95,16 @@ export default function ReviewSpendingCap({
{valueIsGreaterThanBalance && ( {valueIsGreaterThanBalance && (
<Icon <Icon
className="review-spending-cap__heading-title__tooltip__warning-icon" className="review-spending-cap__heading-title__tooltip__warning-icon"
name={ICON_NAMES.DANGER} name={IconName.Danger}
color={IconColor.errorDefault} color={IconColor.errorDefault}
size={ICON_SIZES.SM} size={IconSize.Sm}
style={{ 'vertical-align': 'middle' }} style={{ 'vertical-align': 'middle' }}
/> />
)} )}
{Number(tokenValue) === 0 && ( {Number(tokenValue) === 0 && (
<Icon <Icon
className="review-spending-cap__heading-title__tooltip__question-icon" className="review-spending-cap__heading-title__tooltip__question-icon"
name={ICON_NAMES.QUESTION} name={IconName.Question}
color={IconColor.iconDefault} color={IconColor.iconDefault}
/> />
)} )}

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

@ -9,7 +9,7 @@ import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import NicknamePopovers from '../../app/modals/nickname-popovers'; import NicknamePopovers from '../../app/modals/nickname-popovers';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName } from '../../component-library';
import { import {
DEFAULT_VARIANT, DEFAULT_VARIANT,
CARDS_VARIANT, CARDS_VARIANT,
@ -199,7 +199,7 @@ function Arrow({ variant }) {
</div> </div>
) : ( ) : (
<div className="sender-to-recipient__arrow-container"> <div className="sender-to-recipient__arrow-container">
<Icon name={ICON_NAMES.ARROW_RIGHT} /> <Icon name={IconName.ArrowRight} />
</div> </div>
); );
} }