Merge branch 'develop' into issue/replacing-deprecated-constants

MetaMask · Jul 25, 2023 · 0768a33 · 0768a33
2 parents 3d3dfc7 + 5693d19
commit 0768a33
Show file tree

Hide file tree

Showing 21 changed files with 338 additions and 299 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
@@ -10,7 +10,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
       class="transaction-detail-item__row"
     >
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
       >
         <div
           class="box box--display-flex box--flex-direction-row"
@@ -58,7 +58,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
         class="transaction-detail-item__detail-values"
       >
         <h6
-          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"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
           <div
             class="gas-details-item__currency-container"
@@ -79,7 +79,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
           </div>
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
         >
           <div
             class="gas-details-item__currency-container"
@@ -117,7 +117,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
         </h6>
       </div>
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
       >
         <div
           class="box gas-details-item__gasfee-label box--display-inline-flex box--flex-direction-row"

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
@@ -9,7 +9,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
       class="transaction-detail-item__row"
     >
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
       >
         Estimated gas fee
         <div
@@ -42,7 +42,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         class="transaction-detail-item__detail-values"
       >
         <h6
-          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"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
           <div>
             <div
@@ -61,7 +61,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
           </div>
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
         >
           <div>
             <div
@@ -91,7 +91,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
     >
       <div />
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
       >
         <strong>
           Max fee:

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
@@ -12,15 +12,15 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Layer 1 fees
         </h6>
         <div
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             Unknown
           </h6>
@@ -30,10 +30,10 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         />
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -44,15 +44,15 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Total
         </h6>
         <div
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             0.001000021000 ETH
           </h6>
@@ -62,12 +62,12 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         >
           Amount + fees
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -87,20 +87,20 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Layer 1 fees
         </h6>
         <div
           class="transaction-detail-item__detail-values"
         >
           <h6
-            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"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             Unknown
           </h6>
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             Unknown
           </h6>
@@ -110,10 +110,10 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         />
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -124,15 +124,15 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Total
         </h6>
         <div
           class="transaction-detail-item__detail-values"
         >
           <h6
-            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"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             <div
               class="currency-display-component"
@@ -149,7 +149,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             </div>
           </h6>
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             0.001000021000 ETH
           </h6>
@@ -159,12 +159,12 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         >
           Amount + fees
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>

diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Typography from '../../ui/typography/typography';
 import {
   Color,
   FontWeight,
-  TypographyVariant,
-  DISPLAY,
-  FLEX_WRAP,
   AlignItems,
   TextAlign,
+  TextVariant,
+  Display,
+  FlexWrap,
 } from '../../../helpers/constants/design-system';
+import { Text } from '../../component-library';
 
 export default function TransactionDetailItem({
   'data-testid': dataTestId,
@@ -27,65 +27,60 @@ export default function TransactionDetailItem({
   return (
     <div className="transaction-detail-item" data-testid={dataTestId}>
       <div className="transaction-detail-item__row">
-        <Typography
+        <Text
+          as="h6"
           color={detailTitleColor}
           fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
-          variant={TypographyVariant.H6}
-          boxProps={{
-            display: DISPLAY.FLEX,
-            flexWrap: FLEX_WRAP.NO_WRAP,
-            alignItems: AlignItems.center,
-          }}
+          display={Display.Flex}
+          flexWrap={FlexWrap.NoWrap}
+          alignItems={AlignItems.center}
         >
           {detailTitle}
-        </Typography>
+        </Text>
         <div
           className={classnames('transaction-detail-item__detail-values', {
             'transaction-detail-item__detail-values--flex-width':
               flexWidthValues,
           })}
         >
           {detailText && (
-            <Typography
-              variant={TypographyVariant.H6}
-              color={Color.textAlternative}
-            >
+            <Text as="h6" color={Color.textAlternative}>
               {detailText}
-            </Typography>
+            </Text>
           )}
-          <Typography
+          <Text
+            as="h6"
             color={Color.textDefault}
             fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
-            variant={TypographyVariant.H6}
-            marginTop={1}
-            marginBottom={1}
             marginLeft={1}
-            boxProps={{ textAlign: TextAlign.Right }}
+            textAlign={TextAlign.Right}
           >
             {detailTotal}
-          </Typography>
+          </Text>
         </div>
       </div>
       <div className="transaction-detail-item__row">
         {React.isValidElement(subTitle) ? (
           <div>{subTitle}</div>
         ) : (
-          <Typography
-            variant={TypographyVariant.H7}
+          <Text
+            as="h6"
+            variant={TextVariant.bodySm}
             color={Color.textAlternative}
           >
             {subTitle}
-          </Typography>
+          </Text>
         )}
 
-        <Typography
-          variant={TypographyVariant.H7}
+        <Text
+          as="h6"
+          variant={TextVariant.bodySm}
           color={Color.textAlternative}
-          align="end"
+          textAlign={TextAlign.End}
           className="transaction-detail-item__row-subText"
         >
           {subText}
-        </Typography>
+        </Text>
       </div>
     </div>
   );

diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
@@ -9,7 +9,6 @@ import TransactionDetailItem from '.';
 
 export default {
   title: 'Components/App/TransactionDetailItem',
-
   component: TransactionDetailItem,
   parameters: {
     docs: {

diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
@@ -31,7 +31,7 @@ export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';
 export { TagUrl } from './tag-url';
 export { Text, ValidTag, TextDirection, InvisibleCharacter } from './text';
-export { Input, INPUT_TYPES } from './input';
+export { Input, InputType } from './input';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export { TextFieldSearch } from './text-field-search';
 export { ModalContent, ModalContentSize } from './modal-content';

diff --git a/ui/components/component-library/input/README.mdx b/ui/components/component-library/input/README.mdx
@@ -12,7 +12,7 @@ import { Input } from './input';
 
 ## Props
 
-The `Input` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `Input` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={Input} />
 
@@ -22,24 +22,24 @@ Use the `type` prop to change the type of input.
 
 Possible types include:
 
-- `INPUT_TYPES.TEXT`
-- `INPUT_TYPES.NUMBER`
-- `INPUT_TYPES.PASSWORD`
-- `INPUT_TYPES.SEARCH`
+- `InputType.Text`
+- `InputType.Number`
+- `InputType.Password`
+- `InputType.Search`
 
-Defaults to `INPUT_TYPES.TEXT`.
+Defaults to `InputType.Text`.
 
 <Canvas>
   <Story id="components-componentlibrary-input--type" />
 </Canvas>
 
 ```jsx
-import { Input, INPUT_TYPES } from '../../component-library';
+import { Input, InputType } from '../../component-library';
 
-<Input type={INPUT_TYPES.TEXT} />
-<Input type={INPUT_TYPES.NUMBER} />
-<Input type={INPUT_TYPES.PASSWORD} />
-<Input type={INPUT_TYPES.SEARCH} />
+<Input type={InputType.Text} />
+<Input type={InputType.Number} />
+<Input type={InputType.Password} />
+<Input type={InputType.Search} />
 ```
 
 ### Ref
@@ -81,9 +81,9 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { Input } from '../../component-library';
+import { Input, InputType } from '../../component-library';
 
-<Input type={INPUT_TYPES.PASSWORD} autoComplete />;
+<Input type={InputType.Password} autoComplete />;
 ```
 
 ### Auto Focus

diff --git a/...ry/input/__snapshots__/input.test.js.snap → ...y/input/__snapshots__/input.test.tsx.snap b/...ry/input/__snapshots__/input.test.js.snap → ...y/input/__snapshots__/input.test.tsx.snap
diff --git a/ui/components/component-library/input/index.js b/ui/components/component-library/input/index.js