Use TextVariant: Inherit to keep correct font-size

MetaMask · Jul 17, 2023 · e6376e6 · e6376e6
1 parent 3fb4b02
commit e6376e6
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 54 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
@@ -68,7 +68,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -86,12 +86,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                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"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -131,12 +131,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                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"
+                class="box mm-text currency-display-component__suffix mm-text--inherit 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
@@ -50,7 +50,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -66,12 +66,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                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"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -96,12 +96,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
             <span
-              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"
+              class="box mm-text currency-display-component__suffix mm-text--inherit 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
@@ -17,14 +17,15 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       >
         <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;"
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
@@ -35,14 +36,15 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       >
         <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;"
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis 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
@@ -31,12 +31,12 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          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"
+          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           ETH
         </span>
@@ -129,12 +129,12 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
         <span
-          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"
+          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
@@ -183,12 +183,12 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
         <span
-          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"
+          class="box mm-text currency-display-component__suffix mm-text--inherit 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
@@ -10,12 +10,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        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"
+        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
@@ -25,12 +25,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        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"
+        class="box mm-text currency-display-component__suffix mm-text--inherit 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
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis 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
@@ -7,12 +7,12 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       0
     </span>
     <span
-      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"
+      class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row 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
@@ -78,12 +78,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
               <span
-                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"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -111,12 +111,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>
             <span
-              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"
+              class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>

diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       -
       $123.45

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
@@ -8,6 +8,7 @@ import {
   AlignItems,
   Display,
   FlexWrap,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({
@@ -54,6 +55,7 @@ export default function CurrencyDisplay({
         <Box
           className="currency-display-component__prefix"
           marginInlineEnd={1}
+          variant={TextVariant.inherit}
           {...prefixComponentWrapperProps}
         >
           {prefixComponent}
@@ -63,6 +65,7 @@ export default function CurrencyDisplay({
         as="span"
         className="currency-display-component__text"
         ellipsis
+        variant={TextVariant.inherit}
         {...textProps}
       >
         {parts.prefix}
@@ -73,6 +76,7 @@ export default function CurrencyDisplay({
           as="span"
           className="currency-display-component__suffix"
           marginInlineStart={1}
+          variant={TextVariant.inherit}
           {...suffixProps}
         >
           {parts.suffix}
-Original file line number
+Diff line change
@@ Expand Up @@
                   title="$0.56"
                 >
                   <span
-                    class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                    class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                   >
                     $0.56
                   </span>
@@ Expand Down @@