Update text field demos

mui · May 10, 2024 · d340263 · d340263
1 parent cc825ec
commit d340263
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 70 deletions.
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
@@ -65,7 +65,12 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 const RedditTextField = styled((props) => (
-  <TextField InputProps={{ disableUnderline: true }} {...props} />
+  <TextField
+    slotProps={{
+      input: { disableUnderline: true },
+    }}
+    {...props}
+  />
 ))(({ theme }) => ({
   '& .MuiFilledInput-root': {
     overflow: 'hidden',

diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
@@ -67,7 +67,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 
 const RedditTextField = styled((props: TextFieldProps) => (
   <TextField
-    InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
+    slotProps={{
+      input: { disableUnderline: true } as Partial<OutlinedInputProps>,
+    }}
     {...props}
   />
 ))(({ theme }) => ({

diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.js b/docs/data/material/components/text-fields/FormPropsTextFields.js
@@ -35,16 +35,20 @@ export default function FormPropsTextFields() {
           id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
         />
         <TextField
           id="outlined-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
         />
         <TextField id="outlined-search" label="Search field" type="search" />
@@ -81,17 +85,21 @@ export default function FormPropsTextFields() {
           id="filled-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
           variant="filled"
         />
         <TextField
           id="filled-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
           variant="filled"
         />
@@ -135,17 +143,21 @@ export default function FormPropsTextFields() {
           id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
           variant="standard"
         />
         <TextField
           id="standard-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
           variant="standard"
         />

diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.tsx b/docs/data/material/components/text-fields/FormPropsTextFields.tsx
@@ -35,16 +35,20 @@ export default function FormPropsTextFields() {
           id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
         />
         <TextField
           id="outlined-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
         />
         <TextField id="outlined-search" label="Search field" type="search" />
@@ -81,19 +85,23 @@ export default function FormPropsTextFields() {
           id="filled-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="filled"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="filled-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="filled"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="filled-search"
@@ -135,19 +143,23 @@ export default function FormPropsTextFields() {
           id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="standard"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="standard-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="standard"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="standard-search"

diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -89,8 +89,10 @@ export default function FormattedInputs() {
         onChange={handleChange}
         name="numberformat"
         id="formatted-numberformat-input"
-        InputProps={{
-          inputComponent: NumericFormatCustom,
+        slotProps={{
+          input: {
+            inputComponent: NumericFormatCustom,
+          },
         }}
         variant="standard"
       />

diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -85,8 +85,10 @@ export default function FormattedInputs() {
         onChange={handleChange}
         name="numberformat"
         id="formatted-numberformat-input"
-        InputProps={{
-          inputComponent: NumericFormatCustom as any,
+        slotProps={{
+          input: {
+            inputComponent: NumericFormatCustom as any,
+          },
         }}
         variant="standard"
       />

diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js
@@ -28,8 +28,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="outlined-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
@@ -77,8 +79,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="filled-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="filled"
         />
@@ -125,8 +129,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="standard-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="standard"
         />

diff --git a/docs/data/material/components/text-fields/InputAdornments.tsx b/docs/data/material/components/text-fields/InputAdornments.tsx
@@ -28,8 +28,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="outlined-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
@@ -77,8 +79,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="filled-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="filled"
         />
@@ -125,8 +129,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="standard-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="standard"
         />

diff --git a/docs/data/material/components/text-fields/InputWithIcon.js b/docs/data/material/components/text-fields/InputWithIcon.js
@@ -26,12 +26,14 @@ export default function InputWithIcon() {
       <TextField
         id="input-with-icon-textfield"
         label="TextField"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <AccountCircle />
-            </InputAdornment>
-          ),
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            ),
+          },
         }}
         variant="standard"
       />

diff --git a/docs/data/material/components/text-fields/InputWithIcon.tsx b/docs/data/material/components/text-fields/InputWithIcon.tsx
@@ -26,12 +26,14 @@ export default function InputWithIcon() {
       <TextField
         id="input-with-icon-textfield"
         label="TextField"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <AccountCircle />
-            </InputAdornment>
-          ),
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            ),
+          },
         }}
         variant="standard"
       />

diff --git a/docs/data/material/components/text-fields/SelectTextFields.js b/docs/data/material/components/text-fields/SelectTextFields.js
@@ -51,8 +51,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
         >
@@ -83,8 +85,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="filled"
@@ -116,8 +120,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="standard"