Updating Icon html element to span (#17790)

2024-12-23 09:52:26 +01:00 · 2023-02-22 14:42:50 -08:00 · 2023-02-22 14:42:50 -08:00 · 72af5626de
commit 72af5626de
parent 236b08e9fe
23 changed files with 129 additions and 53 deletions
--- a/ui/components/app/add-network/add-network.stories.js
+++ b/ui/components/app/add-network/add-network.stories.js
@ -9,7 +9,7 @@ const PALM_IMAGE_URL = './images/palm.svg';
 const BSC_IMAGE_URL = './images/bsc-filled.svg';

 export default {
-  title: 'Components/APP/AddNetwork',
+  title: 'Components/App/AddNetwork',

  argTypes: {
    onBackClick: {
--- a/ui/components/app/app-header/snapshots/app-header.test.js.snap
+++ b/ui/components/app/app-header/snapshots/app-header.test.js.snap
@ -232,8 +232,8 @@ exports[`App Header should match snapshot 1`] = `
            <div
              class="chip__right-icon"
            >
-              <div
-                class="box mm-icon mm-icon--size-xs box--flex-direction-row box--color-inherit"
+              <span
+                class="box mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-inherit"
                style="mask-image: url('./images/icons/arrow-down.svg');"
              />
            </div>
--- a/ui/components/app/confirm-page-container/confirm-page-container-header/snapshots/confirm-page-container-header.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/snapshots/confirm-page-container-header.component.test.js.snap
@ -13,8 +13,8 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
        class="confirm-page-container-header__back-button-container"
        style="visibility: hidden;"
      >
-        <div
-          class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
          style="mask-image: url('./images/icons/arrow-left.svg');"
        />
        <span
--- a/ui/components/app/nft-details/snapshots/nft-details.test.js.snap
+++ b/ui/components/app/nft-details/snapshots/nft-details.test.js.snap
@ -8,8 +8,8 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
    <button
      class="asset-breadcrumb"
    >
-      <div
-        class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--flex-direction-row box--color-inherit"
+      <span
+        class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-inherit"
        data-testid="asset__back"
        style="mask-image: url('./images/icons/arrow-left.svg');"
      />
@ -29,8 +29,8 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
        class="box mm-button-icon mm-button-icon--size-lg nft-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
        data-testid="nft-options__button"
      >
-        <div
-          class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
+        <span
+          class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
          style="mask-image: url('./images/icons/more-vertical.svg');"
        />
      </button>
@ -137,8 +137,8 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
                class="box mm-button-icon mm-button-icon--size-lg nft-details__contract-copy-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
                data-testid="nft-address-copy"
              >
-                <div
-                  class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
+                <span
+                  class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
                  style="mask-image: url('./images/icons/copy.svg');"
                />
              </button>
--- a/ui/components/app/selected-account/snapshots/selected-account-component.test.js.snap
+++ b/ui/components/app/selected-account/snapshots/selected-account-component.test.js.snap
@ -32,8 +32,8 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
            <div
              class="selected-account__copy"
            >
-              <div
-                class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-alternative"
+              <span
+                class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-alternative"
                style="mask-image: url('./images/icons/copy.svg');"
              />
            </div>
--- a/ui/components/app/selected-account/index.scss
+++ b/ui/components/app/selected-account/index.scss
@ -49,8 +49,7 @@
  }

  &__copy {
-    height: 13px;
-    display: inline-block;
+    display: flex;
    margin-inline-start: 3px;
  }
 }
--- a/ui/components/app/selected-account/selected-account.stories.js
+++ b/ui/components/app/selected-account/selected-account.stories.js
@ -0,0 +1,15 @@
+import React from 'react';
+import SelectedAccount from '.';
+
+export default {
+  title: 'Components/App/SelectedAccount',
+  argTypes: {
+    copied: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <SelectedAccount {...args} />;
+
+DefaultStory.storyName = 'Default';
--- a/ui/components/app/token-cell/snapshots/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/snapshots/token-cell.test.js.snap
@ -83,8 +83,8 @@ exports[`Token Cell should match snapshot 1`] = `
      <div
        class="box box--flex-direction-row"
      >
-        <div
-          class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+        <span
+          class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
          style="mask-image: url('./images/icons/arrow-right.svg'); vertical-align: middle;"
        />
        <a
--- a/ui/components/app/transaction-activity-log/snapshots/transaction-activity-log.component.test.js.snap
+++ b/ui/components/app/transaction-activity-log/snapshots/transaction-activity-log.component.test.js.snap
@ -19,8 +19,8 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
        <div
          class="transaction-activity-log-icon transaction-activity-log__activity-icon"
        >
-          <div
-            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
            style="mask-image: url('./images/icons/add.svg');"
          />
        </div>
@ -41,8 +41,8 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
        <div
          class="transaction-activity-log-icon transaction-activity-log__activity-icon"
        >
-          <div
-            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
            style="mask-image: url('./images/icons/arrow-up.svg');"
          />
        </div>
@ -63,8 +63,8 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
        <div
          class="transaction-activity-log-icon transaction-activity-log__activity-icon"
        >
-          <div
-            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
            style="mask-image: url('./images/icons/programming-arrows.svg');"
          />
        </div>
@ -85,8 +85,8 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
        <div
          class="transaction-activity-log-icon transaction-activity-log__activity-icon"
        >
-          <div
-            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
            style="mask-image: url('./images/icons/check.svg');"
          />
        </div>
--- a/ui/components/component-library/avatar-favicon/snapshots/avatar-favicon.test.js.snap
+++ b/ui/components/component-library/avatar-favicon/snapshots/avatar-favicon.test.js.snap
@ -6,8 +6,8 @@ exports[`AvatarFavicon should render correctly 1`] = `
    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
    data-testid="avatar-favicon"
  >
-    <div
-      class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
+    <span
+      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
      style="mask-image: url('./images/icons/global.svg');"
    />
  </div>
--- a/ui/components/component-library/avatar-icon/snapshots/avatar-icon.test.js.snap
+++ b/ui/components/component-library/avatar-icon/snapshots/avatar-icon.test.js.snap
@ -6,8 +6,8 @@ exports[`AvatarIcon should render correctly 1`] = `
    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-icon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--border-color-transparent box--border-style-solid box--border-width-1"
    data-testid="avatar-icon"
  >
-    <div
-      class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
+    <span
+      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
      style="mask-image: url('./images/icons/swap-horizontal.svg');"
    />
  </div>
--- a/ui/components/component-library/banner-alert/snapshots/banner-alert.test.js.snap
+++ b/ui/components/component-library/banner-alert/snapshots/banner-alert.test.js.snap
@ -6,8 +6,8 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
    data-testid="bannerAlert"
  >
-    <div
-      class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-primary-default"
+    <span
+      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
      style="mask-image: url('./images/icons/info.svg');"
    />
    <div>
--- 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
@ -7,8 +7,8 @@ exports[`ButtonIcon should render button element correctly 1`] = `
    class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
    data-testid="button-icon"
  >
-    <div
-      class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
+    <span
+      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
      style="mask-image: url('./images/icons/add-square.svg');"
    />
  </button>
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@ -119,7 +119,7 @@ import {

 import Box from '../../ui/box/box';

-import { ICON_NAMES, Icon, Text } from '../../component-library';
+import { ICON_NAMES, Icon, Text, Label } from '../../component-library';

 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
  <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
@ -158,6 +158,21 @@ import { ICON_NAMES, Icon, Text } from '../../component-library';
    <Icon name={ICON_NAMES.ADD} color={IconColor.iconDefault} marginRight={2} />
    <Text>Create account</Text>
  </Box>
+  <Label>
+    Custom spending cap{' '}
+    <Icon name={ICON_NAMES.INFO} size={ICON_SIZES.AUTO} marginLeft={1} />
+  </Label>
+  <div>
+    <Text>
+      <Icon
+        name={ICON_NAMES.WARNING}
+        size={ICON_SIZES.AUTO}
+        marginLeft={1}
+        color={IconColor.warningDefault}
+      />{' '}
+      Warning
+    </Text>
+  </div>
 </Box>;
 ```

--- a/ui/components/component-library/icon/snapshots/icon.test.js.snap
+++ b/ui/components/component-library/icon/snapshots/icon.test.js.snap
@ -2,8 +2,8 @@

 exports[`Icon should render correctly 1`] = `
 <div>
-  <div
-    class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
+  <span
+    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
    data-testid="icon"
    style="mask-image: url('./images/icons/add-square.svg');"
  />
--- a/ui/components/component-library/icon/icon.js
+++ b/ui/components/component-library/icon/icon.js
@ -4,7 +4,11 @@ import classnames from 'classnames';

 import Box from '../../ui/box/box';

-import { Size, IconColor } from '../../../helpers/constants/design-system';
+import {
+  Size,
+  IconColor,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';

 import { ICON_SIZES, ICON_NAMES } from './icon.constants';

@ -18,8 +22,10 @@ export const Icon = ({
 }) => {
  return (
    <Box
-      color={color}
      className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
+      as="span"
+      display={DISPLAY.INLINE_BLOCK}
+      color={color}
      style={{
        /**
         * To reduce the possibility of injection attacks
--- a/ui/components/component-library/icon/icon.scss
+++ b/ui/components/component-library/icon/icon.scss
@ -6,7 +6,6 @@
  height: 1em;
  max-width: 1em;
  flex: 0 0 1em;
-  display: inline-block;
  background-color: currentColor; // inherits parent text color
  mask-size: cover;
  -webkit-mask-size: cover;
--- a/ui/components/component-library/icon/icon.stories.js
+++ b/ui/components/component-library/icon/icon.stories.js
@ -225,7 +225,6 @@ export const Name = (args) => (
  <>
    <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={2}>
      {Object.keys(ICON_NAMES).map((item) => {
-        console.log('item:', item);
        return (
          <Box
            borderColor={BorderColor.borderMuted}
@ -259,9 +258,37 @@ export const SizeStory = (args) => (
      <Icon {...args} size={Size.LG} />
      <Icon {...args} size={Size.XL} />
    </Box>
-    <Text as="p" variant={TextVariant.bodySm}>
-      <Icon {...args} size={Size.inherit} /> inherits the font-size of the
-      parent element.
+    <Text variant={TextVariant.displayMd}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.headingLg}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.headingMd}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.headingSm}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.bodyLgMedium}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.bodyMd}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.bodySm}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
+    </Text>
+    <Text variant={TextVariant.bodyXs}>
+      inherits the font-size of the parent element.{' '}
+      <Icon {...args} size={Size.inherit} />
    </Text>
  </>
 );
@ -390,5 +417,20 @@ export const LayoutAndSpacing = () => (
      />
      <Text>Create account</Text>
    </Box>
+    <Label>
+      Custom spending cap{' '}
+      <Icon name={ICON_NAMES.INFO} size={ICON_SIZES.AUTO} marginLeft={1} />
+    </Label>
+    <div>
+      <Text>
+        <Icon
+          name={ICON_NAMES.WARNING}
+          size={ICON_SIZES.AUTO}
+          marginLeft={1}
+          color={IconColor.warningDefault}
+        />{' '}
+        Warning
+      </Text>
+    </div>
  </Box>
 );
--- a/ui/components/component-library/picker-network/snapshots/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/snapshots/picker-network.test.js.snap
@ -16,8 +16,8 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
    >
      Imported
    </p>
-    <div
-      class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--flex-direction-row box--color-icon-default"
+    <span
+      class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
      style="mask-image: url('./images/icons/arrow-down.svg');"
    />
  </button>
--- a/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
@ -9,8 +9,8 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
    <div
      class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
    >
-      <div
-        class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
+      <span
+        class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
        style="mask-image: url('./images/icons/global.svg');"
      />
    </div>
--- a/ui/components/component-library/text-field-search/snapshots/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/snapshots/text-field-search.test.js.snap
@ -5,8 +5,8 @@ exports[`TextFieldSearch should render correctly 1`] = `
  <div
    class="box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-text-field-search box--padding-left-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
  >
-    <div
-      class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-inherit"
+    <span
+      class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
      style="mask-image: url('./images/icons/search.svg');"
    />
    <input
--- a/ui/pages/keychains/snapshots/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/snapshots/reveal-seed.test.js.snap
@ -64,8 +64,8 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
    <div
      class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
    >
-      <div
-        class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-error-default"
+      <span
+        class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
        style="mask-image: url('./images/icons/danger.svg');"
      />
      <div>
--- a/ui/pages/send/send-content/add-recipient/snapshots/add-recipient.component.test.js.snap
+++ b/ui/pages/send/send-content/add-recipient/snapshots/add-recipient.component.test.js.snap
@ -80,8 +80,8 @@ exports[`Add Recipient Component Own Account Recipient Search should match snaps
        role="button"
        tabindex="0"
      >
-        <div
-          class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
          style="mask-image: url('./images/icons/arrow-left.svg');"
        />
        Back to all