Deprecating FormField and fixing console error (#19739)

* Deprecating FormField and fixing console error

* Updating snapshots

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -15,13 +15,13 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           class="form-field"
         >
           <div
-            class="box box--flex-direction-row"
+            class="mm-box"
           >
             <div
               class="form-field__heading"
             >
               <div
-                class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
                   class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -52,7 +52,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="box form-field__heading-detail box--margin-bottom-2 box--flex-direction-row box--text-align-end"
+                class="mm-box form-field__heading-detail mm-box--margin-right-0 mm-box--margin-bottom-2 mm-box--text-align-end"
               >
                 <button
                   class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"

ui/components/ui/form-field/README.mdx

@@ -1,5 +1,20 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
+import { Severity } from '../../../helpers/constants/design-system';
+
+import { BannerAlert } from '../../component-library/banner-alert';
+
+<BannerAlert
+  severity={Severity.Warning}
+  title="Deprecated"
+  description="FormField has been deprecated in favor of FormTextField"
+  actionButtonLabel="See details"
+  actionButtonProps={{
+    href: 'https://github.com/MetaMask/metamask-extension/issues/19737',
+  }}
+  marginBottom={4}
+/>
+
 import FormField from '.';
 
 # Form Field

ui/components/ui/form-field/form-field.js

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import Box from '../box/box';
 import {
   TextAlign,
-  DISPLAY,
+  Display,
   TextVariant,
   AlignItems,
   TextColor,
@@ -13,7 +12,16 @@ import {
 
 import NumericInput from '../numeric-input/numeric-input.component';
 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Text } from '../../component-library';
+import { Text, Box } from '../../component-library';
+
+/**
+ * @deprecated The `<FormField />` component has been deprecated in favor of the new `<FormTextField>` component from the component-library.
+ * Please update your code to use the new `<FormTextField>` component instead, which can be found at ui/components/component-library/form-text-field/form-text-field.js.
+ * You can find documentation for the new FormTextField component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-formtextfield--docs}
+ * If you would like to help with the replacement of the old FormField component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19737}
+ */
 
 export default function FormField({
   dataTestId,
@@ -54,7 +62,7 @@ export default function FormField({
         <div className="form-field__heading">
           <Box
             className="form-field__heading-title"
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.baseline}
             {...titleHeadingWrapperProps}
           >
@@ -63,10 +71,9 @@ export default function FormField({
                 <Text
                   tag="label"
                   htmlFor={id}
-                  html
                   variant={TextVariant.bodySmBold}
                   as="h6"
-                  display={DISPLAY.INLINE_BLOCK}
+                  display={Display.InlineBlock}
                 >
                   {titleText}
                 </Text>
@@ -78,7 +85,7 @@ export default function FormField({
                   variant={TextVariant.bodySm}
                   as="h6"
                   color={TextColor.textAlternative}
-                  display={DISPLAY.INLINE_BLOCK}
+                  display={Display.InlineBlock}
                 >
                   {titleUnit}
                 </Text>

ui/components/ui/form-field/form-field.stories.js

@@ -10,7 +10,6 @@ import FormField from '.';
 
 export default {
   title: 'Components/UI/FormField',
-
   component: FormField,
   parameters: {
     docs: {

ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap

@@ -40,13 +40,13 @@ exports[`Add Network Modal should render 1`] = `
         class="form-field"
       >
         <label
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <div
             class="form-field__heading"
           >
             <div
-              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
                 class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -71,13 +71,13 @@ exports[`Add Network Modal should render 1`] = `
         class="form-field"
       >
         <label
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <div
             class="form-field__heading"
           >
             <div
-              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
                 class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -102,13 +102,13 @@ exports[`Add Network Modal should render 1`] = `
         class="form-field"
       >
         <label
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <div
             class="form-field__heading"
           >
             <div
-              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
                 class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -158,13 +158,13 @@ exports[`Add Network Modal should render 1`] = `
         class="form-field"
       >
         <label
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <div
             class="form-field__heading"
           >
             <div
-              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
                 class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -189,13 +189,13 @@ exports[`Add Network Modal should render 1`] = `
         class="form-field"
       >
         <label
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <div
             class="form-field__heading"
           >
             <div
-              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
                 class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"

ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap

@@ -49,13 +49,13 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
           class="form-field"
         >
           <label
-            class="box box--flex-direction-row"
+            class="mm-box"
           >
             <div
               class="form-field__heading"
             >
               <div
-                class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
                   class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@@ -67,7 +67,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                 
               </div>
               <div
-                class="box form-field__heading-detail box--margin-right-2 box--flex-direction-row box--text-align-end"
+                class="mm-box form-field__heading-detail mm-box--margin-right-2 mm-box--text-align-end"
               >
                 <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-default"
@@ -96,13 +96,13 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
           class="form-field"
         >
           <label
-            class="box box--flex-direction-row"
+            class="mm-box"
           >
             <div
               class="form-field__heading"
             >
               <div
-                class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
                   class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"