Deprecated Icon and ButtonIcon clean up (MetaMask#19220)

* Updating all deprecated instances of Icon and ButtonIcon

* Removing unused deprecated components and scripts

.storybook/main.js

@@ -1,39 +1,42 @@
 const path = require('path');
-const {
-  ProvidePlugin
-} = require('webpack');
+const { ProvidePlugin } = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const {
-  generateIconNames
-} = require('../development/generate-icon-names');
 module.exports = {
   core: {
-    disableTelemetry: true
+    disableTelemetry: true,
   },
   features: {
-    buildStoriesJson: true
+    buildStoriesJson: true,
   },
-  stories: ['../ui/**/*.stories.js', '../ui/**/*.stories.tsx', '../ui/**/*.stories.mdx', './*.stories.mdx'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', '@whitespace/storybook-addon-html', '@storybook/addon-mdx-gfm'],
+  stories: [
+    '../ui/**/*.stories.js',
+    '../ui/**/*.stories.tsx',
+    '../ui/**/*.stories.mdx',
+    './*.stories.mdx',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs',
+    './i18n-party-addon/register.js',
+    'storybook-dark-mode',
+    '@whitespace/storybook-addon-html',
+    '@storybook/addon-mdx-gfm',
+  ],
   staticDirs: ['../app', './images'],
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
-  babel: async options => ({
-    overrides: options.overrides
+  babel: async (options) => ({
+    overrides: options.overrides,
   }),
-  // Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/
-  env: async config => {
-    return {
-      ...config,
-      // Creates the icon names environment variable for the component-library/icon/icon.js component
-      ICON_NAMES: generateIconNames()
-    };
-  },
-  webpackFinal: async config => {
+  webpackFinal: async (config) => {
     config.context = process.cwd();
     config.node = {
-      __filename: true
+      __filename: true,
     };
-    config.resolve.alias['webextension-polyfill'] = require.resolve('../ui/__mocks__/webextension-polyfill.js');
+    config.resolve.alias['webextension-polyfill'] = require.resolve(
+      '../ui/__mocks__/webextension-polyfill.js',
+    );
     config.resolve.fallback = {
       child_process: false,
       constants: false,
@@ -45,44 +48,61 @@ module.exports = {
       path: false,
       stream: require.resolve('stream-browserify'),
       zlib: false,
-      _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
+      _stream_transform: require.resolve(
+        'readable-stream/lib/_stream_transform.js',
+      ),
     };
     config.module.strictExportPresence = true;
     config.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', {
-        loader: 'css-loader',
-        options: {
-          import: false,
-          url: false
-        }
-      }, {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: true,
-          implementation: require('sass'),
-          sassOptions: {
-            includePaths: ['ui/css/']
-          }
-        }
-      }]
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            import: false,
+            url: false,
+          },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+            implementation: require('sass'),
+            sassOptions: {
+              includePaths: ['ui/css/'],
+            },
+          },
+        },
+      ],
     });
-    config.plugins.push(new CopyWebpackPlugin({
-      patterns: [{
-        from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-        to: path.join('fonts', 'fontawesome')
-      }]
-    }));
-    config.plugins.push(new ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }));
+    config.plugins.push(
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(
+              'node_modules',
+              '@fortawesome',
+              'fontawesome-free',
+              'webfonts',
+            ),
+            to: path.join('fonts', 'fontawesome'),
+          },
+        ],
+      }),
+    );
+    config.plugins.push(
+      new ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    );
     return config;
   },
   docs: {
-    autodocs: true
+    autodocs: true,
   },
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
-  }
+    options: {},
+  },
 };

builds.yml

@@ -200,8 +200,6 @@ env:
   # Also see DEBUG and NODE_DEBUG
   - METAMASK_DEBUG: false
   # Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
-  - ICON_NAMES
-  # Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
   - IN_TEST
   # Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
   - METAMASK_ENVIRONMENT

development/build/scripts.js

@@ -33,7 +33,6 @@ const bifyModuleGroups = require('bify-module-groups');
 
 const phishingWarningManifest = require('@metamask/phishing-warning/package.json');
 const { streamFlatMap } = require('../stream-flat-map');
-const { generateIconNames } = require('../generate-icon-names');
 const { BUILD_TARGETS, ENVIRONMENT } = require('./constants');
 const { getConfig } = require('./config');
 const {
@@ -1182,10 +1181,8 @@ async function setEnvironmentVariables({
 }) {
   const devMode = isDevBuild(buildTarget);
   const testing = isTestBuild(buildTarget);
-  const iconNames = await generateIconNames();
 
   variables.set({
-    ICON_NAMES: iconNames,
     IN_TEST: testing,
     INFURA_PROJECT_ID: getInfuraProjectId({
       buildType,

jest.config.js

@@ -32,11 +32,7 @@ module.exports = {
   // TODO: enable resetMocks
   // resetMocks: true,
   restoreMocks: true,
-  setupFiles: [
-    '<rootDir>/test/setup.js',
-    '<rootDir>/test/env.js',
-    '<rootDir>/test/jest/env.js', // jest specific env vars that break mocha tests
-  ],
+  setupFiles: ['<rootDir>/test/setup.js', '<rootDir>/test/env.js'],
   setupFilesAfterEnv: ['<rootDir>/test/jest/setup.js'],
   testMatch: [
     '<rootDir>/app/scripts/constants/error-utils.test.js',

ui/components/app/dropdowns/network-dropdown.js

@@ -33,8 +33,8 @@ import {
   ADD_POPULAR_CUSTOM_NETWORK,
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { Icon, IconName, IconSize } from '../../component-library';
+
+import { Icon, IconName, IconSize, ButtonIcon } from '../../component-library';
 
 import { Dropdown, DropdownMenuItem } from './dropdown';
 

ui/components/app/wallet-overview/token-overview.js

@@ -37,10 +37,14 @@ import {
 import { AssetType } from '../../../../shared/constants/transaction';
 import useRamps from '../../../hooks/experiences/useRamps';
 
-import { ButtonIcon, Icon, IconName } from '../../component-library';
+import {
+  ButtonIcon,
+  ButtonIconSize,
+  Icon,
+  IconName,
+} from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 
-import { BUTTON_ICON_SIZES } from '../../component-library/button-icon/deprecated';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import WalletOverview from './wallet-overview';
 
@@ -95,7 +99,7 @@ const TokenOverview = ({ className, token }) => {
               color={IconColor.primaryDefault}
               iconName={IconName.Diagram}
               ariaLabel={t('portfolio')}
-              size={BUTTON_ICON_SIZES.LG}
+              size={ButtonIconSize.Lg}
               onClick={() => {
                 const portfolioUrl = getPortfolioUrl('', 'ext', metaMetricsId);
                 global.platform.openTab({

ui/components/component-library/banner-base/banner-base.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { ButtonIcon } from '../button-icon/deprecated';
-import { ButtonLink, Text } from '..';
-import { ICON_NAMES } from '../icon/deprecated';
-
-import Box from '../../ui/box';
 
 import {
   BackgroundColor,
   BorderRadius,
-  DISPLAY,
+  Display,
   Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 
+import Box from '../../ui/box';
+
+import { ButtonLink, Text, IconName, ButtonIcon } from '..';
+
 export const BannerBase = ({
   className,
   title,
@@ -33,7 +32,7 @@ export const BannerBase = ({
   return (
     <Box
       className={classnames('mm-banner-base', className)}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       gap={2}
       backgroundColor={BackgroundColor.backgroundDefault}
       borderRadius={BorderRadius.SM}
@@ -73,7 +72,7 @@ export const BannerBase = ({
         <ButtonIcon
           className="mm-banner-base__close-button"
           marginLeft="auto"
-          iconName={ICON_NAMES.CLOSE}
+          iconName={IconName.Close}
           size={Size.SM}
           ariaLabel="Close" // TODO: i18n
           onClick={onClose}