Declared <TextField/> as deprecated (#20640)

* Declared <TextField/> as deprecated

* Declared <TextField/> as deprecated

ui/components/ui/text-field/text-field.component.js

@@ -3,6 +3,15 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MaterialTextField from '@material-ui/core/TextField';
 
+/**
+ * @deprecated The `<TextField />` component has been deprecated in favor of the new `<TextField>` component from the component-library.
+ * Please update your code to use the new `<TextField>` component instead, which can be found at ui/components/component-library/text-field/text-field.js.
+ * You can find documentation for the new `TextField` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-textfield--docs}
+ * If you would like to help with the replacement of the old `TextField` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20483}
+ */
+
 const inputLabelBase = {
   transform: 'none',
   transition: 'none',

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

@@ -1,7 +1,26 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { BannerAlert } from '../../component-library';
+import { Severity } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import TextField from '.';
 
+const Deprecated = ({ children }) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="<TextField/> has been deprecated in favor of <TextField/>"
+      marginBottom={4}
+    />
+    {children}
+  </>
+);
+
+Deprecated.propTypes = {
+  children: PropTypes.node,
+};
+
 export default {
   title: 'Components/UI/TextField',
 
@@ -27,46 +46,74 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => <TextField {...args} />;
+export const DefaultStory = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 DefaultStory.storyName = 'Default';
 DefaultStory.args = {
   label: 'Text',
   type: 'text',
 };
 
-export const Password = (args) => <TextField {...args} />;
+export const Password = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 Password.args = {
   label: 'Password',
   type: 'password',
 };
-export const TextError = (args) => <TextField {...args} />;
+export const TextError = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 TextError.args = {
   type: 'text',
   label: 'Name',
   error: 'Invalid Value',
 };
-export const MascaraText = (args) => <TextField {...args} />;
+export const MascaraText = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 MascaraText.args = {
   label: 'Text',
   type: 'text',
   largeLabel: true,
 };
 
-export const MaterialText = (args) => <TextField {...args} />;
+export const MaterialText = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 MaterialText.args = {
   label: 'Text',
   type: 'text',
   theme: 'material',
 };
 
-export const MaterialPassword = (args) => <TextField {...args} />;
+export const MaterialPassword = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 MaterialPassword.args = {
   label: 'Password',
   type: 'password',
   theme: 'material',
 };
 
-export const MaterialError = (args) => <TextField {...args} />;
+export const MaterialError = (args) => (
+  <Deprecated>
+    <TextField {...args} />
+  </Deprecated>
+);
 MaterialError.args = {
   type: 'text',
   label: 'Name',