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

* 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>
2024-11-25 03:20:23 +01:00 · 2023-04-18 09:48:34 -07:00 · 2023-04-18 09:48:34 -07:00 · 13f4295287
commit 13f4295287
parent 7fa7c05586
14 changed files with 52 additions and 78 deletions
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@ -5,11 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
 import Typography from '../typography';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName, IconSize } from '../../component-library';

 export default function Callout({
  severity,
@ -47,8 +43,8 @@ export default function Callout({
      </Typography>
      {dismiss && (
        <ButtonIcon
-          iconName={ICON_NAMES.CLOSE}
-          size={ICON_SIZES.SM}
+          iconName={IconName.Close}
+          size={IconSize.Sm}
          className="callout__close-button"
          onClick={() => {
            setRemoved(true);
--- a/ui/components/ui/contract-token-values/contract-token-values.js
+++ b/ui/components/ui/contract-token-values/contract-token-values.js
@ -16,8 +16,7 @@ import {
  Color,
 } from '../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';

 export default function ContractTokenValues({
  address,
@ -51,7 +50,7 @@ export default function ContractTokenValues({
        title={copied ? t('copiedExclamation') : t('copyToClipboard')}
      >
        <ButtonIcon
-          iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+          iconName={copied ? IconName.CopySuccess : IconName.Copy}
          color={Color.iconMuted}
          onClick={() => handleCopy(address)}
          ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')}
@ -60,7 +59,7 @@ export default function ContractTokenValues({
      <Tooltip position="top" title={t('openInBlockExplorer')}>
        <ButtonIcon
          display={DISPLAY.FLEX}
-          iconName={ICON_NAMES.EXPORT}
+          iconName={IconName.Export}
          color={Color.iconMuted}
          onClick={() => {
            const blockExplorerTokenLink = getAccountLink(
--- a/ui/components/ui/disclosure/disclosure.js
+++ b/ui/components/ui/disclosure/disclosure.js
@ -1,8 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
-import { Size } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize } from '../../component-library';

 const Disclosure = ({ children, title, size }) => {
  const disclosureFooterEl = useRef(null);
@ -27,8 +26,8 @@ const Disclosure = ({ children, title, size }) => {
          <summary className="disclosure__summary">
            <Icon
              className="disclosure__summary--icon"
-              name={ICON_NAMES.ADD}
-              size={Size.SM}
+              name={IconName.Add}
+              size={IconSize.Sm}
              marginInlineEnd={2}
            />
            {title}
--- a/ui/components/ui/dropdown/dropdown.js
+++ b/ui/components/ui/dropdown/dropdown.js
@ -1,11 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { Icon, IconName, IconSize } from '../../component-library';

 const Dropdown = ({
  className,
@ -46,8 +42,8 @@ const Dropdown = ({
        })}
      </select>
      <Icon
-        name={ICON_NAMES.ARROW_DOWN}
-        size={ICON_SIZES.SM}
+        name={IconName.ArrowDown}
+        size={IconSize.Sm}
        className="dropdown__icon-caret-down"
      />
    </div>
--- a/ui/components/ui/editable-label/editable-label.js
+++ b/ui/components/ui/editable-label/editable-label.js
@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Color } from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';

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

 /**
 * @deprecated - Please use ActionableMessage type danger
@ -19,8 +19,8 @@ const ErrorMessage = (props, context) => {
    <div className="error-message">
      <Icon
        className="error-message__icon"
-        name={ICON_NAMES.WARNING}
-        size={Size.SM}
+        name={IconName.Warning}
+        size={IconSize.Sm}
        color={IconColor.errorDefault}
        marginRight={2}
      />
--- a/ui/components/ui/form-field/form-field.stories.js
+++ b/ui/components/ui/form-field/form-field.stories.js
@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import Typography from '../typography';
 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 README from './README.mdx';
 import FormField from '.';
@ -70,7 +70,7 @@ export const FormFieldWithTitleDetail = (args) => {
        Click Me
      </button>
    ),
-    checkmark: <Icon name={ICON_NAMES.CHECK} />,
+    checkmark: <Icon name={IconName.Check} />,
  };

  return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />;
@ -108,7 +108,7 @@ export const CustomComponents = (args) => {
            position="top"
            html={<Typography>Custom tooltip</Typography>}
          >
-            <Icon name={ICON_NAMES.QUESTION} marginLeft={2} />
+            <Icon name={IconName.Question} marginLeft={2} />
          </Tooltip>
        }
        titleDetail={<Typography>TitleDetail</Typography>}
--- a/ui/components/ui/menu/menu.stories.js
+++ b/ui/components/ui/menu/menu.stories.js
@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { IconName } from '../../component-library';
 import { Menu, MenuItem } from '.';

 export default {
@ -10,11 +10,11 @@ export default {
 export const DefaultStory = () => {
  return (
    <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
      </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
      </MenuItem>
    </Menu>
@ -29,14 +29,11 @@ export const Anchored = () => {
    <>
      <button ref={setAnchorElement}>Menu</button>
      <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
        </MenuItem>
        <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-        <MenuItem
-          iconName={ICON_NAMES.EYE_SLSH}
-          onClick={action('Menu Item 3')}
-        >
+        <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
          Menu Item 3
        </MenuItem>
      </Menu>
--- a/ui/components/ui/new-network-info/new-network-info.js
+++ b/ui/components/ui/new-network-info/new-network-info.js
@ -26,7 +26,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 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 t = useContext(I18nContext);
@ -106,7 +106,7 @@ const NewNetworkInfo = () => {
          ) : (
            <Icon
              className="question"
-              name={ICON_NAMES.QUESTION}
+              name={IconName.Question}
              color={Color.iconDefault}
            />
          )
--- a/ui/components/ui/nickname-popover/nickname-popover.component.js
+++ b/ui/components/ui/nickname-popover/nickname-popover.component.js
@ -11,11 +11,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { getTokenList, getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName, IconSize } from '../../component-library';

 const NicknamePopover = ({
  address,
@ -67,8 +63,8 @@ const NicknamePopover = ({
            title={copied ? t('copiedExclamation') : t('copyToClipboard')}
          >
            <ButtonIcon
-              iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-              size={ICON_SIZES.SM}
+              iconName={copied ? IconName.CopySuccess : IconName.Copy}
+              size={IconSize.Sm}
              onClick={() => handleCopy(address)}
            />
          </Tooltip>
--- a/ui/components/ui/popover/popover.component.js
+++ b/ui/components/ui/popover/popover.component.js
@ -18,13 +18,14 @@ import {
  TEXT_ALIGN,
  BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
+
 import {
+  ButtonIcon,
  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { Text } from '../../component-library';
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';

 const defaultHeaderProps = {
  padding: [6, 4, 4],
@ -86,7 +87,7 @@ const Popover = ({
      >
        {onBack ? (
          <ButtonIcon
-            iconName={ICON_NAMES.ARROW_LEFT}
+            iconName={IconName.ArrowLeft}
            ariaLabel={t('back')}
            onClick={onBack}
            color={Color.iconDefault}
@ -104,7 +105,7 @@ const Popover = ({
        </Text>
        {onClose ? (
          <ButtonIcon
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
            ariaLabel={t('close')}
            data-testid="popover-close"
            onClick={onClose}
@ -151,9 +152,9 @@ const Popover = ({
            data-testid="popover-scroll-button"
          >
            <Icon
-              name={ICON_NAMES.ARROW_DOWN}
+              name={IconName.ArrowDown}
              color={IconColor.primaryDefault}
-              size={ICON_SIZES.MD}
+              size={IconSize.Md}
              aria-label={t('scrollDown')}
            />
          </Box>
--- a/ui/components/ui/qr-code/qr-code.js
+++ b/ui/components/ui/qr-code/qr-code.js
@ -9,11 +9,7 @@ import Tooltip from '../tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AddressCopyButton } from '../../multichain/address-copy-button';
 import Box from '../box/box';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { Icon, IconName, IconSize } from '../../component-library';

 export default connect(mapStateToProps)(QrCodeView);

@ -80,8 +76,8 @@ function QrCodeView(props) {
          >
            <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
            <Icon
-              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-              size={ICON_SIZES.SM}
+              name={copied ? IconName.CopySuccess : IconName.Copy}
+              size={IconSize.Sm}
              marginInlineStart={3}
            />
          </div>
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@ -4,12 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../box';
 import Tooltip from '../tooltip';
 import Typography from '../typography';
-import { ButtonLink } from '../../component-library';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { ButtonLink, Icon, IconName, IconSize } from '../../component-library';
 import {
  AlignItems,
  DISPLAY,
@ -86,7 +81,7 @@ export default function ReviewSpendingCap({
                        color={TextColor.errorDefault}
                      >
                        <Icon
-                          name={ICON_NAMES.WARNING}
+                          name={IconName.Warning}
                          style={{ verticalAlign: 'middle' }}
                        />
                        {t('beCareful')}
@ -100,16 +95,16 @@ export default function ReviewSpendingCap({
              {valueIsGreaterThanBalance && (
                <Icon
                  className="review-spending-cap__heading-title__tooltip__warning-icon"
-                  name={ICON_NAMES.DANGER}
+                  name={IconName.Danger}
                  color={IconColor.errorDefault}
-                  size={ICON_SIZES.SM}
+                  size={IconSize.Sm}
                  style={{ 'vertical-align': 'middle' }}
                />
              )}
              {Number(tokenValue) === 0 && (
                <Icon
                  className="review-spending-cap__heading-title__tooltip__question-icon"
-                  name={ICON_NAMES.QUESTION}
+                  name={IconName.Question}
                  color={IconColor.iconDefault}
                />
              )}
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
@ -9,7 +9,7 @@ import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch
 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/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import {
  DEFAULT_VARIANT,
  CARDS_VARIANT,
@ -199,7 +199,7 @@ function Arrow({ variant }) {
    </div>
  ) : (
    <div className="sender-to-recipient__arrow-container">
-      <Icon name={ICON_NAMES.ARROW_RIGHT} />
+      <Icon name={IconName.ArrowRight} />
    </div>
  );
 }