diff --git a/docs/pages/material-ui/api/input.json b/docs/pages/material-ui/api/input.json index 023edaf5d786b1..319f57dcdcb0fe 100644 --- a/docs/pages/material-ui/api/input.json +++ b/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" }, diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json index 7b9e265eeed5c1..1e3d0cb5231d6a 100644 --- a/docs/translations/api-docs/input/input.json +++ b/docs/translations/api-docs/input/input.json @@ -92,6 +92,16 @@ "nodeName": "the input element", "conditions": "multiline={true}" }, + "inputAdornedStart": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the input element", + "conditions": "startAdornment is provided" + }, + "inputAdornedEnd": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the input element", + "conditions": "endAdornment is provided" + }, "inputTypeSearch": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the input element", diff --git a/packages/mui-material/src/Input/inputClasses.ts b/packages/mui-material/src/Input/inputClasses.ts index bc553344a50e3d..96aab43356b70f 100644 --- a/packages/mui-material/src/Input/inputClasses.ts +++ b/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; } diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts index 3833621c0909be..468affd862e276 100644 --- a/packages/mui-material/src/TextField/TextField.d.ts +++ b/packages/mui-material/src/TextField/TextField.d.ts @@ -230,7 +230,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps { InputProps?: Partial; } -export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps; +export type TextFieldVariants = 'outlined' | 'standard' | 'filled'; + +export type TextFieldProps = + 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( + props: { + /** + * The variant to use. + * @default 'outlined' + */ + variant?: Variant; + } & Omit, +): JSX.Element; diff --git a/packages/mui-material/src/TextField/TextField.spec.tsx b/packages/mui-material/src/TextField/TextField.spec.tsx index aef486d4692d48..242cb93ed188cc 100644 --- a/packages/mui-material/src/TextField/TextField.spec.tsx +++ b/packages/mui-material/src/TextField/TextField.spec.tsx @@ -11,6 +11,22 @@ import { expectType } from '@mui/types'; ); + const StandardInputAdorned = ( + + ); + const DefaultInputAdorned = ( + + ); + const outlinedInputTypeSearch = ( ); diff --git a/packages/mui-material/test/typescript/hoc-interop.spec.tsx b/packages/mui-material/test/typescript/hoc-interop.spec.tsx index d9abaf997eb78b..c4bf957a30ebd7 100644 --- a/packages/mui-material/test/typescript/hoc-interop.spec.tsx +++ b/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 -; -// @ts-expect-error -; // desired to throw - -// styled -{ - const StyledTextField = styled(TextField)``; - ; // desired to pass - // @ts-expect-error - ; // undesired, should throw -} - -// @emotion/styled -{ - const StyledTextField = emotionStyled(TextField)``; - ; - // @ts-expect-error - ; // desired to throw -} // https://github.com/mui/material-ui/issues/14586 {