[TextField][material-next] Add FormLabel and InputLabel components (#…

…39483) Signed-off-by: Albert Yu <[email protected]> Co-authored-by: Diego Andai <[email protected]>
mui · Nov 8, 2023 · 3bada36 · 3bada36
1 parent 6bc9bab
commit 3bada36
Show file tree

Hide file tree

Showing 15 changed files with 533 additions and 317 deletions.
diff --git a/docs/pages/experiments/md3/inputs.tsx b/docs/pages/experiments/md3/inputs.tsx
@@ -1,10 +1,17 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
-import Md2FilledInput from '@mui/material/FilledInput';
+import {
+  FilledInput as Md2FilledInput,
+  FormControl as Md2FormControl,
+  InputLabel as Md2InputLabel,
+  InputAdornment as Md2InputAdornment,
+} from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import FilledInput from '@mui/material-next/FilledInput';
+import { FilledInput, FormControl, InputLabel } from '@mui/material-next';
 import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import SearchIcon from '@mui/icons-material/Search';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { ModeSwitcher } from '.';
 
 const md2Theme = createTheme();
@@ -17,8 +24,36 @@ export default function MaterialYouInputs() {
       <ThemeProvider theme={md2Theme}>
         <pre>MD2</pre>
         <Stack display="inline-flex" direction="row" gap={4}>
-          <Md2FilledInput defaultValue="primary" color="primary" />
-          <Md2FilledInput defaultValue="secondary" color="secondary" />
+          <Md2FormControl color="primary" variant="filled">
+            <Md2InputLabel htmlFor="md2-primary">Primary</Md2InputLabel>
+            <Md2FilledInput id="md2-primary" defaultValue="primary" />
+          </Md2FormControl>
+          <Md2FormControl color="secondary" variant="filled">
+            <Md2InputLabel htmlFor="md2-secondary">Secondary</Md2InputLabel>
+            <Md2FilledInput id="md2-secondary" defaultValue="secondary" />
+          </Md2FormControl>
+        </Stack>
+        <Stack display="inline-flex" direction="row" gap={4}>
+          <Md2FormControl color="primary" variant="filled">
+            <Md2InputLabel htmlFor="md2-primary">Primary adornments</Md2InputLabel>
+            <Md2FilledInput
+              id="md2-primary"
+              defaultValue="primary"
+              startAdornment={
+                <Md2InputAdornment position="start">
+                  <SearchIcon />
+                </Md2InputAdornment>
+              }
+            />
+          </Md2FormControl>
+          <Md2FormControl color="secondary" variant="filled">
+            <Md2InputLabel htmlFor="md2-secondary">Secondary adornments</Md2InputLabel>
+            <Md2FilledInput
+              id="md2-secondary"
+              defaultValue="secondary"
+              startAdornment={<Md2InputAdornment position="start">$</Md2InputAdornment>}
+            />
+          </Md2FormControl>
         </Stack>
         <Divider />
       </ThemeProvider>
@@ -28,9 +63,49 @@ export default function MaterialYouInputs() {
           <ModeSwitcher />
         </Stack>
         <Stack display="inline-flex" direction="row" gap={4}>
-          <FilledInput defaultValue="primary" color="primary" />
-          <FilledInput defaultValue="secondary" color="secondary" />
-          <FilledInput defaultValue="tertiary" color="tertiary" />
+          <FormControl color="primary" variant="filled">
+            <InputLabel htmlFor="md3-primary">Primary</InputLabel>
+            <FilledInput id="md3-primary" defaultValue="primary" />
+          </FormControl>
+          <FormControl color="secondary" variant="filled">
+            <InputLabel htmlFor="md3-secondary">Secondary</InputLabel>
+            <FilledInput id="md3-secondary" defaultValue="secondary" />
+          </FormControl>
+          <FormControl color="tertiary" variant="filled">
+            <InputLabel htmlFor="md3-tertiary">Tertiary</InputLabel>
+            <FilledInput id="md3-tertiary" defaultValue="tertiary" />
+          </FormControl>
+        </Stack>
+        <Stack display="inline-flex" direction="row" gap={4}>
+          <FormControl color="primary" variant="filled">
+            <InputLabel htmlFor="md3-primary">Primary adornments</InputLabel>
+            <FilledInput
+              id="md3-primary"
+              defaultValue="primary"
+              startAdornment={
+                <Md2InputAdornment position="start">
+                  <SearchIcon />
+                </Md2InputAdornment>
+              }
+            />
+          </FormControl>
+          <FormControl color="secondary" variant="filled">
+            <InputLabel htmlFor="md3-secondary">Secondary adornments</InputLabel>
+            <FilledInput
+              id="md3-secondary"
+              defaultValue="secondary"
+              startAdornment={
+                <Md2InputAdornment position="start">
+                  <SearchIcon />
+                </Md2InputAdornment>
+              }
+              endAdornment={
+                <Md2InputAdornment position="end">
+                  <HighlightOffIcon />
+                </Md2InputAdornment>
+              }
+            />
+          </FormControl>
         </Stack>
       </CssVarsProvider>
     </Stack>

diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md
@@ -168,6 +168,12 @@ The `FormControlState` interface was renamed to `FormControlContextValue`:
 
 The standard variant is no longer supported in Material You, use the `filled` or `outlined` variants instead.
 
+## FormLabel
+
+### Removed the `standard` variant
+
+The standard variant is no longer supported in Material You, use the `filled` or `outlined` variants instead.
+
 ## InputBase
 
 ### Removed `inputProps`
@@ -181,6 +187,12 @@ The standard variant is no longer supported in Material You, use the `filled` or
  />
 ```
 
+## InputLabel
+
+### Removed the `standard` variant
+
+The standard variant is no longer supported in Material You, use the `filled` or `outlined` variants instead.
+
 ## Chip
 
 ### Removed the "default" color option

diff --git a/packages/mui-material-next/src/FormControl/FormControl.types.ts b/packages/mui-material-next/src/FormControl/FormControl.types.ts
@@ -24,7 +24,7 @@ export interface FormControlOwnProps extends BaseFormControlOwnProps {
    * @default 'primary'
    */
   color?: OverridableStringUnion<
-    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    'primary' | 'secondary' | 'tertiary' | 'error' | 'info' | 'success' | 'warning',
     FormControlPropsColorOverrides
   >;
   /**

diff --git a/packages/mui-material-next/src/FormLabel/FormLabel.js b/packages/mui-material-next/src/FormLabel/FormLabel.js