[material-ui][TextField] Add root slot (@sai6855)

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

@@ -79,7 +79,7 @@
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, select?: elementType }"
+        "description": "{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType }"
       },
       "default": "{}"
     },
@@ -106,6 +106,12 @@
     "import { TextField } from '@mui/material';"
   ],
   "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "FormControl",
+      "class": "MuiTextField-root"
+    },
     {
       "name": "input",
       "description": "The component that renders the input.",
@@ -137,14 +143,7 @@
       "class": null
     }
   ],
-  "classes": [
-    {
-      "key": "root",
-      "className": "MuiTextField-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    }
-  ],
+  "classes": [],
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiTextField",

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

@@ -83,12 +83,13 @@
     },
     "variant": { "description": "The variant to use." }
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
+  "classDescriptions": {},
   "slotDescriptions": {
     "formHelperText": "The component that renders the helper text.",
     "htmlInput": "The html input element.",
     "input": "The component that renders the input.",
     "inputLabel": "The component that renders the input's label.",
+    "root": "The component that renders the root.",
     "select": "The component that renders the select."
   }
 }

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

@@ -18,6 +18,11 @@ export interface TextFieldPropsColorOverrides {}
 export interface TextFieldPropsSizeOverrides {}
 
 export interface TextFieldSlots {
+  /**
+   * The component that renders the root.
+   * @default FormControl
+   */
+  root: React.ElementType;
   /**
    * The component that renders the input.
    * @default OutlinedInput
@@ -48,10 +53,35 @@ export interface TextFieldSlots {
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
   TextFieldSlots,
   {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
+     */
+    root: SlotProps<React.ElementType<FormControlProps>, {}, TextFieldOwnerState>;
+    /**
+     * Props forwarded to the input slot.
+     * By default, the avaible props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
+     */
     input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+    /**
+     * Props forwarded to the input label slot.
+     * By default, the avaible props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
+     */
     inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+    /**
+     * Props forwarded to the html input slot.
+     * By default, the avaible props are based on the html input element.
+     */
     htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
+    /**
+     * Props forwarded to the form helper text slot.
+     * By default, the avaible props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
+     */
     formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+    /**
+     * Props forwarded to the select slot.
+     * By default, the avaible props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
+     */
     select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
   }
 >;

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

@@ -168,6 +168,26 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     inputAdditionalProps['aria-describedby'] = undefined;
   }
 
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: TextFieldRoot,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      disabled,
+      error,
+      fullWidth,
+      required,
+      color,
+      variant,
+    },
+  });
+
   const [InputSlot, inputProps] = useSlot('input', {
     elementType: InputComponent,
     externalForwardedProps,
@@ -228,18 +248,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
   );
 
   return (
-    <TextFieldRoot
-      className={clsx(classes.root, className)}
-      disabled={disabled}
-      error={error}
-      fullWidth={fullWidth}
-      ref={ref}
-      required={required}
-      color={color}
-      variant={variant}
-      ownerState={ownerState}
-      {...other}
-    >
+    <RootSlot {...rootProps}>
       {label != null && label !== '' && (
         <InputLabelSlot htmlFor={id} id={inputLabelId} {...inputLabelProps}>
           {label}
@@ -266,7 +275,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
           {helperText}
         </FormHelperTextSlot>
       )}
-    </TextFieldRoot>
+    </RootSlot>
   );
 });
 
@@ -457,6 +466,7 @@ TextField.propTypes /* remove-proptypes */ = {
     htmlInput: PropTypes.elementType,
     input: PropTypes.elementType,
     inputLabel: PropTypes.elementType,
+    root: PropTypes.elementType,
     select: PropTypes.elementType,
   }),
   /**

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

@@ -21,6 +21,15 @@ describe('<TextField />', () => {
     );
   }
 
+  function TestFormControl(props) {
+    const { children, error, ...rest } = props;
+    return (
+      <FormControl data-testid={'custom'} {...rest}>
+        {children}
+      </FormControl>
+    );
+  }
+
   describeConformance(
     <TextField variant="standard" helperText="Helper text" label="Label" />,
     () => ({
@@ -40,6 +49,10 @@ describe('<TextField />', () => {
           testWithElement: 'input',
         },
         formHelperText: {},
+        root: {
+          expectedClassName: classes.root,
+          testWithElement: TestFormControl,
+        },
       },
       skip: ['componentProp', 'componentsProp'],
     }),