[TextField] Improve IntelliSense support for props

docs/pages/material-ui/api/input.json

@@ -71,6 +71,8 @@
       "input",
       "inputSizeSmall",
       "inputMultiline",
+      "inputAdornedStart",
+      "inputAdornedEnd",
       "inputTypeSearch"
     ],
     "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },

docs/translations/api-docs/input/input.json

@@ -92,6 +92,16 @@
       "nodeName": "the input element",
       "conditions": "<code>multiline={true}</code>"
     },
+    "inputAdornedStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>startAdornment</code> is provided"
+    },
+    "inputAdornedEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>endAdornment</code> is provided"
+    },
     "inputTypeSearch": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",

packages/mui-material/src/Input/inputClasses.ts

@@ -29,6 +29,10 @@ export interface InputClasses {
   inputSizeSmall: string;
   /** Styles applied to the input element if `multiline={true}`. */
   inputMultiline: string;
+  /** Styles applied to the input element if `startAdornment` is provided. */
+  inputAdornedStart: string;
+  /** Styles applied to the input element if `endAdornment` is provided. */
+  inputAdornedEnd: string;
   /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;
 }

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

@@ -230,7 +230,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
   InputProps?: Partial<OutlinedInputProps>;
 }
 
-export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> =
+  Variant extends 'filled'
+    ? FilledTextFieldProps
+    : Variant extends 'standard'
+    ? StandardTextFieldProps
+    : OutlinedTextFieldProps;
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
@@ -274,4 +281,12 @@ export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | Out
  * - [TextField API](https://mui.com/material-ui/api/text-field/)
  * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField<Variant extends TextFieldVariants>(
+  props: {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: Variant;
+  } & Omit<TextFieldProps, 'variant'>,
+): JSX.Element;

packages/mui-material/src/TextField/TextField.spec.tsx

@@ -11,6 +11,22 @@ import { expectType } from '@mui/types';
     <TextField variant="standard" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );
 
+  const StandardInputAdorned = (
+    <TextField
+      variant="standard"
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+  const DefaultInputAdorned = (
+    <TextField
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+
   const outlinedInputTypeSearch = (
     <TextField variant="outlined" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );

packages/mui-material/test/typescript/hoc-interop.spec.tsx

@@ -4,41 +4,11 @@
  * It's a common pattern to use some form of Pick or Omit in hocs which don't have
  * a desired outcome when operating on union types.
  *
- * We use our TextField component since it has a union type as props
- *
  * See https://github.com/Microsoft/TypeScript/issues/28339 for in-depth discussion
  */
 import { Button } from '@mui/material';
 import { createStyles, withStyles } from '@mui/styles';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import emotionStyled from '@emotion/styled';
 import * as React from 'react';
-import styled from 'styled-components';
-
-const filledProps = {
-  InputProps: { classes: { inputAdornedStart: 'adorned' } },
-};
-
-// baseline behavior
-<TextField variant="filled" {...filledProps} />;
-// @ts-expect-error
-<TextField {...filledProps} />; // desired to throw
-
-// styled
-{
-  const StyledTextField = styled(TextField)``;
-  <StyledTextField variant="filled" {...filledProps} />; // desired to pass
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // undesired, should throw
-}
-
-// @emotion/styled
-{
-  const StyledTextField = emotionStyled(TextField)``;
-  <StyledTextField variant="filled" {...filledProps} />;
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // desired to throw
-}
 
 // https://github.com/mui/material-ui/issues/14586
 {