Restructure CurrencyDisplay to use Design System (#19171)

* Restructure CurrencyDisplay to use Design System * Add storybook, remove CSS * Update ui/components/ui/currency-display/currency-display.component.js Co-authored-by: George Marshall <[email protected]> * Update ui/components/ui/currency-display/currency-display.component.js Co-authored-by: George Marshall <[email protected]> * Update ui/components/ui/currency-display/currency-display.stories.js Co-authored-by: George Marshall <[email protected]> * Update ui/components/ui/currency-display/currency-display.component.js Co-authored-by: George Marshall <[email protected]> * Update ui/components/ui/currency-display/currency-display.stories.js Co-authored-by: George Marshall <[email protected]> * Update ui/components/ui/currency-display/currency-display.stories.js Co-authored-by: George Marshall <[email protected]> * Remove deprecated imports, import EtherDenomination * Update jest * Use TextVariant: Inherit to keep correct font-size * Snapshots * Switch from boxProps to props --------- Co-authored-by: George Marshall <[email protected]>
MetaMask · Jul 25, 2023 · bab1670 · bab1670
1 parent 9310a95
commit bab1670
Show file tree

Hide file tree

Showing 16 changed files with 231 additions and 227 deletions.
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
@@ -64,14 +64,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
@@ -85,19 +82,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -133,19 +127,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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
@@ -46,14 +46,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.000021"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.000021
               </span>
@@ -65,19 +62,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.000021 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -98,19 +92,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="currency-display-component"
+            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
             title="0.000021 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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,39 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="currency-display-component confirm-detail-row__primary"
+        class="mm-box currency-display-component confirm-detail-row__primary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 18px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0
         </span>
       </div>
       <div
-        class="currency-display-component confirm-detail-row__secondary"
+        class="mm-box currency-display-component confirm-detail-row__secondary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 14px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-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="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0.00432788 ETH"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="$231.06 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="$0.00 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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="mm-box currency-display-component cancel-transaction-gas-fee__eth mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
       >
         ETH
       </span>
     </div>
     <div
-      class="currency-display-component cancel-transaction-gas-fee__fiat"
+      class="mm-box currency-display-component cancel-transaction-gas-fee__fiat mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-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="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="$0.56"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-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="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="0 ETH"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     >
       0
     </span>
     <span
-      class="currency-display-component__suffix"
+      class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
     >
       ETH
     </span>

diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -70,19 +70,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.006 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.006
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -106,19 +103,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         >
           <div
-            class="currency-display-component"
+            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
             title="0.006 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
             >
               0.006
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
             >
               ETH
             </span>