Icon house keeping updates (#16621)

MetaMask · Nov 23, 2022 · ab808b6 · ab808b6
1 parent 65f2f17
commit ab808b6
Show file tree

Hide file tree

Showing 18 changed files with 238 additions and 132 deletions.
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@@ -27,7 +27,7 @@ describe('AvatarFavicon', () => {
     const { container } = render(
       <AvatarFavicon data-testid="avatar-favicon" />,
     );
-    expect(container.getElementsByClassName('icon')).toHaveLength(1);
+    expect(container.getElementsByClassName('mm-icon')).toHaveLength(1);
   });
 
   it('should render fallback image with custom fallbackIconProps if no ImageSource is provided', () => {

diff --git a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap
@@ -8,8 +8,8 @@ exports[`ButtonIcon should render button element correctly 1`] = `
     data-testid="button-icon"
   >
     <div
-      class="box icon icon--size-lg box--flex-direction-row box--color-inherit"
-      style="mask-image: url('./images/icons/icon-add-square-filled.svg;"
+      class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
+      style="mask-image: url('./images/icons/icon-add-square-filled.svg');"
     />
   </button>
 </div>

diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js
@@ -79,7 +79,7 @@ describe('ButtonLink', () => {
       <ButtonLink data-testid="icon" icon="add-square-filled" />,
     );
 
-    const icons = container.getElementsByClassName('icon').length;
+    const icons = container.getElementsByClassName('mm-icon').length;
     expect(icons).toBe(1);
   });
 });
diff --git a/ui/components/component-library/button-primary/button-primary.test.js b/ui/components/component-library/button-primary/button-primary.test.js
@@ -92,7 +92,7 @@ describe('ButtonPrimary', () => {
       <ButtonPrimary data-testid="icon" icon="add-square-filled" />,
     );
 
-    const icons = container.getElementsByClassName('icon').length;
+    const icons = container.getElementsByClassName('mm-icon').length;
     expect(icons).toBe(1);
   });
 });
diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js
@@ -96,7 +96,7 @@ describe('ButtonSecondary', () => {
       <ButtonSecondary data-testid="icon" icon="add-square-filled" />,
     );
 
-    const icons = container.getElementsByClassName('icon').length;
+    const icons = container.getElementsByClassName('mm-icon').length;
     expect(icons).toBe(1);
   });
 });
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
@@ -20,21 +20,22 @@ The `Icon` accepts all props below as well as all [Box](/docs/ui-components-ui-b
 
 Use the `name` prop and the `ICON_NAMES` object to change the icon.
 
-Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
+Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.
+
+<Canvas>
+  <Story id="ui-components-component-library-icon-icon-stories-js--name" />
+</Canvas>
 
 ```jsx
-import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
 <Icon name={ICON_NAMES.BANK_FILLED} />
 <Icon name={ICON_NAMES.CALCULATOR_FILLED} />
 <Icon name={ICON_NAMES.COIN_FILLED} />
+// etc...
 ```
 
-<Canvas>
-  <Story id="ui-components-component-library-icon-icon-stories-js--name" />
-</Canvas>
-
 ### Size
 
 Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM`
@@ -55,7 +56,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@@ -79,7 +80,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />

diff --git a/ui/components/component-library/icon/__snapshots__/icon.test.js.snap b/ui/components/component-library/icon/__snapshots__/icon.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
+    data-testid="icon"
+    style="mask-image: url('./images/icons/icon-add-square-filled.svg');"
+  />
+</div>
+`;
diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js
@@ -1,11 +1,25 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
 /**
  * The ICON_NAMES object contains all the possible icon names.
- * It is generated using the generateIconNames script in development/generate-icon-names.js
- * and stored in the environment variable ICON_NAMES
- * To add a new icon, add the icon svg file to app/images/icons
- * Ensure the svg has been optimized, is kebab case and starts with "icon-"
- * See "Adding a new icon" in ./README.md for more details
+ *
+ * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/ui-components-component-library-icon-icon-stories-js--default-story
+ *
+ * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/ui-components-component-library-icon-icon-stories-js--default-story#adding-a-new-icon
+ *
+ * ICON_NAMES is generated using svgs in app/images/icons and
+ * the generateIconNames script in development/generate-icon-names.js
+ * then stored as an environment variable
  */
 
 /* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring
 export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES);
+export const ICON_SIZES = {
+  XXS: SIZES.XXS,
+  XS: SIZES.XS,
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  XL: SIZES.XL,
+  AUTO: SIZES.AUTO,
+};
diff --git a/ui/components/component-library/icon/icon.js b/ui/components/component-library/icon/icon.js
@@ -10,6 +10,8 @@ import {
   ICON_COLORS,
 } from '../../../helpers/constants/design-system';
 
+import { ICON_SIZES } from './icon.constants';
+
 export const Icon = ({
   name,
   size = SIZES.MD,
@@ -21,15 +23,15 @@ export const Icon = ({
   return (
     <Box
       color={color}
-      className={classnames(className, 'icon', `icon--size-${size}`)}
+      className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
       style={{
         /**
          * To reduce the possibility of injection attacks
          * the icon component uses mask-image instead of rendering
          * the svg directly.
          */
-        maskImage: `url('./images/icons/icon-${name}.svg`,
-        WebkitMaskImage: `url('./images/icons/icon-${name}.svg`,
+        maskImage: `url('./images/icons/icon-${name}.svg')`,
+        WebkitMaskImage: `url('./images/icons/icon-${name}.svg')`,
         ...style,
       }}
       {...props}
@@ -44,10 +46,10 @@ Icon.propTypes = {
   name: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
   /**
    * The size of the Icon.
-   * Possible values could be 'SIZES.XXS', 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL',
-   * Default value is 'SIZES.MD'.
+   * Possible values could be SIZES.XXS (10px), SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px),
+   * Default value is SIZES.MD (20px).
    */
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  size: PropTypes.oneOf(Object.values(ICON_SIZES)),
   /**
    * The color of the icon.
    * Defaults to COLORS.INHERIT.

diff --git a/ui/components/component-library/icon/icon.scss b/ui/components/component-library/icon/icon.scss
@@ -1,4 +1,4 @@
-.icon {
+.mm-icon {
   --icon-size: var(--size, 16px);
 
   font-size: var(--icon-size);