Restructure CurrencyDisplay to use Design System

MetaMask · May 16, 2023 · fdc5339 · fdc5339
1 parent 488f212
commit fdc5339
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 229 deletions.
diff --git a/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap b/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap
@@ -89,20 +89,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               Account 1
             </div>
             <div
-              class="currency-display-component account-menu__balance"
+              class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               data-testid="account-menu__balance"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -169,20 +166,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               Imported Account 1
             </div>
             <div
-              class="currency-display-component account-menu__balance"
+              class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               data-testid="account-menu__balance"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -62,14 +62,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -83,19 +80,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -131,19 +125,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>

diff --git a/...-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/...-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -45,14 +45,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -64,19 +61,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -97,19 +91,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="currency-display-component"
+            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
             title="0.000021 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>

diff --git a/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -12,37 +12,37 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="currency-display-component confirm-detail-row__primary"
+        class="box currency-display-component confirm-detail-row__primary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 18px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>
       </div>
       <div
-        class="currency-display-component confirm-detail-row__secondary"
+        class="box currency-display-component confirm-detail-row__secondary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 14px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>

diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -27,19 +27,16 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0.00432788 ETH"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           ETH
         </span>
@@ -128,19 +125,16 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$231.06 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
@@ -185,19 +179,16 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$0.00 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>

diff --git a/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -6,37 +6,31 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     class="cancel-transaction-gas-fee"
   >
     <div
-      class="currency-display-component cancel-transaction-gas-fee__eth"
+      class="box currency-display-component cancel-transaction-gas-fee__eth box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
     </div>
     <div
-      class="currency-display-component cancel-transaction-gas-fee__fiat"
+      class="box currency-display-component cancel-transaction-gas-fee__fiat box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>

diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -135,14 +135,11 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="$0.56"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>

diff --git a/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -3,19 +3,16 @@
 exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="0 ETH"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       0
     </span>
     <span
-      class="currency-display-component__suffix"
+      class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
     >
       ETH
     </span>