[TextField] Migrate to emotion (#25286)

Author: tomasznguyen

docs/pages/api-docs/text-field.json

@@ -45,6 +45,7 @@
         "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       }
     },
+    "sx": { "type": { "name": "object" } },
     "type": { "type": { "name": "string" } },
     "value": { "type": { "name": "any" } },
     "variant": {
@@ -62,6 +63,6 @@
   "filename": "/packages/material-ui/src/TextField/TextField.js",
   "inheritance": { "component": "FormControl", "pathname": "/api/form-control/" },
   "demos": "<ul><li><a href=\"/components/autocomplete/\">Autocomplete</a></li>\n<li><a href=\"/components/pickers/\">Pickers</a></li>\n<li><a href=\"/components/text-fields/\">Text Fields</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/text-field/text-field.json

@@ -29,6 +29,7 @@
     "select": "Render a <a href=\"/api/select/\"><code>Select</code></a> element while passing the Input element to <code>Select</code> as <code>input</code> parameter. If this option is set you must pass the options of the select as children.",
     "SelectProps": "Props applied to the <a href=\"/api/select/\"><code>Select</code></a> element.",
     "size": "The size of the component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
     "value": "The value of the <code>input</code> element, required for a controlled component.",
     "variant": "The variant to use."

framer/scripts/framerConfig.js

@@ -345,6 +345,7 @@ export const componentSettings = {
       'value',
       'size',
       'color',
+      'sx',
     ],
     propValues: {
       helperText: "''",

packages/material-ui/src/TextField/TextField.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { OverridableStringUnion } from '@material-ui/types';
 import { InternalStandardProps as StandardProps } from '..';
 import { FormControlProps } from '../FormControl';
@@ -9,6 +10,7 @@ import { FilledInputProps } from '../FilledInput';
 import { OutlinedInputProps } from '../OutlinedInput';
 import { InputLabelProps } from '../InputLabel';
 import { SelectProps } from '../Select';
+import { Theme } from '../styles';
 
 export interface TextFieldPropsColorOverrides {}
 export interface TextFieldPropsSizeOverrides {}
@@ -143,6 +145,10 @@ export interface BaseTextFieldProps
    * The size of the component.
    */
   size?: OverridableStringUnion<Record<'small' | 'medium', true>, TextFieldPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */

packages/material-ui/src/TextField/TextField.js

@@ -1,27 +1,49 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { refType } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge, refType } from '@material-ui/utils';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import Input from '../Input';
 import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
 import InputLabel from '../InputLabel';
 import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
-import withStyles from '../styles/withStyles';
+import { getTextFieldUtilityClass } from './textFieldClasses';
 
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
   outlined: OutlinedInput,
 };
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {},
+const overridesResolver = (props, styles) => {
+  return deepmerge(styles.root || {}, {});
 };
 
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getTextFieldUtilityClass, classes);
+};
+
+const TextFieldRoot = experimentalStyled(
+  FormControl,
+  {},
+  {
+    name: 'MuiTextField',
+    slot: 'Root',
+    overridesResolver,
+  },
+)({});
+
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
  * It cannot be all things to all people, otherwise the API would grow out of control.
@@ -54,12 +76,12 @@ export const styles = {
  * - using the upper case props for passing values directly to the components
  * - using the underlying components directly as shown in the demos
  */
-const TextField = React.forwardRef(function TextField(props, ref) {
+const TextField = React.forwardRef(function TextField(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTextField' });
   const {
     autoComplete,
     autoFocus = false,
     children,
-    classes,
     className,
     color = 'primary',
     defaultValue,
@@ -92,6 +114,21 @@ const TextField = React.forwardRef(function TextField(props, ref) {
     ...other
   } = props;
 
+  const styleProps = {
+    ...props,
+    autoFocus,
+    color,
+    disabled,
+    error,
+    fullWidth,
+    multiline,
+    required,
+    select,
+    variant,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error(
@@ -154,7 +191,7 @@ const TextField = React.forwardRef(function TextField(props, ref) {
   );
 
   return (
-    <FormControl
+    <TextFieldRoot
       className={clsx(classes.root, className)}
       disabled={disabled}
       error={error}
@@ -163,6 +200,7 @@ const TextField = React.forwardRef(function TextField(props, ref) {
       required={required}
       color={color}
       variant={variant}
+      styleProps={styleProps}
       {...other}
     >
       {label && (
@@ -191,7 +229,7 @@ const TextField = React.forwardRef(function TextField(props, ref) {
           {helperText}
         </FormHelperText>
       )}
-    </FormControl>
+    </TextFieldRoot>
   );
 });
 
@@ -353,6 +391,10 @@ TextField.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['medium', 'small']),
     PropTypes.string,
   ]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
@@ -368,4 +410,4 @@ TextField.propTypes /* remove-proptypes */ = {
   variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
 };
 
-export default withStyles(styles, { name: 'MuiTextField' })(TextField);
+export default TextField;

packages/material-ui/src/TextField/TextField.test.js

@@ -1,27 +1,25 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
-import FormControl from '../FormControl';
-import TextField from './TextField';
-import MenuItem from '../MenuItem';
-import { inputBaseClasses } from '../InputBase';
-import { outlinedInputClasses } from '../OutlinedInput';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
+import FormControl from '@material-ui/core/FormControl';
+import { inputBaseClasses } from '@material-ui/core/InputBase';
+import MenuItem from '@material-ui/core/MenuItem';
+import { outlinedInputClasses } from '@material-ui/core/OutlinedInput';
+import TextField, { textFieldClasses as classes } from '@material-ui/core/TextField';
 
 describe('<TextField />', () => {
-  let classes;
   const mount = createMount();
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<TextField variant="standard" />);
-  });
-
-  describeConformance(<TextField variant="standard" />, () => ({
+  describeConformanceV5(<TextField variant="standard" />, () => ({
     classes,
     inheritComponent: FormControl,
+    render,
     mount,
+    muiName: 'MuiTextField',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    testVariantProps: { variant: 'outlined' },
+    skip: ['componentProp', 'componentsProp'],
   }));
 
   describe('structure', () => {

packages/material-ui/src/TextField/index.js

@@ -1 +1,4 @@
 export { default } from './TextField';
+
+export { default as textFieldClasses } from './textFieldClasses';
+export * from './textFieldClasses';

packages/material-ui/src/TextField/textFieldClasses.d.ts

@@ -0,0 +1,7 @@
+import { TextFieldClassKey } from './TextField';
+
+declare const textFieldClasses: Record<TextFieldClassKey, string>;
+
+export function getTextFieldUtilityClass(slot: string): string;
+
+export default textFieldClasses;

packages/material-ui/src/TextField/textFieldClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTextFieldUtilityClass(slot) {
+  return generateUtilityClass('MuiTextField', slot);
+}
+
+const textFieldClasses = generateUtilityClasses('MuiTextField', ['root']);
+
+export default textFieldClasses;