[FilledInput][material-next] Add FilledInput component (#39307)

mui · Oct 23, 2023 · b5c39e1 · b5c39e1
1 parent a731e86
commit b5c39e1
Show file tree

Hide file tree

Showing 14 changed files with 609 additions and 421 deletions.
diff --git a/docs/pages/experiments/md3/inputs.tsx b/docs/pages/experiments/md3/inputs.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
 import Md2FilledInput from '@mui/material/FilledInput';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import FilledInput from '@mui/material-next/FilledInput';
@@ -14,16 +15,22 @@ export default function MaterialYouInputs() {
   return (
     <Stack spacing={4}>
       <ThemeProvider theme={md2Theme}>
+        <pre>MD2</pre>
         <Stack display="inline-flex" direction="row" gap={4}>
-          <Md2FilledInput defaultValue="Hello" color="primary" />
-          <Md2FilledInput defaultValue="Hello" color="secondary" />
+          <Md2FilledInput defaultValue="primary" color="primary" />
+          <Md2FilledInput defaultValue="secondary" color="secondary" />
         </Stack>
+        <Divider />
       </ThemeProvider>
       <CssVarsProvider theme={md3Theme}>
-        <ModeSwitcher />
+        <Stack direction="row" gap={1}>
+          <pre>MD3</pre>
+          <ModeSwitcher />
+        </Stack>
         <Stack display="inline-flex" direction="row" gap={4}>
-          <FilledInput defaultValue="Hello" color="primary" />
-          <FilledInput defaultValue="Hello" color="secondary" />
+          <FilledInput defaultValue="primary" color="primary" />
+          <FilledInput defaultValue="secondary" color="secondary" />
+          <FilledInput defaultValue="tertiary" color="tertiary" />
         </Stack>
       </CssVarsProvider>
     </Stack>

diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md
@@ -140,6 +140,19 @@ If you need to prevent default on a `key-up` and/or `key-down` event, then besid
 
 This is to ensure that default is prevented when the `ButtonBase` root is not a native button, for example, when the root element used is a `span`.
 
+## FilledInput
+
+### Removed `inputProps`
+
+`inputProps` are removed in favor of `slotProps.input`:
+
+```diff
+ <FilledInput
+-    inputProps={{ className: 'my-input' }}
++    slotProps={{ input: { className: 'my-input' } }}
+ />
+```
+
 ## FormControl
 
 ### Renamed `FormControlState`

diff --git a/packages/mui-material-next/src/FilledInput/FilledInput.d.ts b/packages/mui-material-next/src/FilledInput/FilledInput.d.ts
diff --git a/...-next/src/FilledInput/FilledInput.test.js → ...next/src/FilledInput/FilledInput.test.tsx b/...-next/src/FilledInput/FilledInput.test.js → ...next/src/FilledInput/FilledInput.test.tsx
@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '@mui-internal/test-utils';
-import FilledInput, { filledInputClasses as classes } from '@mui/material/FilledInput';
-import InputBase from '@mui/material/InputBase';
+import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import FilledInput, { filledInputClasses as classes } from '@mui/material-next/FilledInput';
+import InputBase from '@mui/material-next/InputBase';
 
 describe('<FilledInput />', () => {
   const { render } = createRenderer();
 
   describeConformance(<FilledInput open />, () => ({
+    ThemeProvider: CssVarsProvider,
+    createTheme: extendTheme,
     classes,
     inheritComponent: InputBase,
     render,
@@ -16,11 +19,9 @@ describe('<FilledInput />', () => {
     testDeepOverrides: { slotName: 'input', slotClassName: classes.input },
     testVariantProps: { variant: 'contained', fullWidth: true },
     testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
-    testLegacyComponentsProp: true,
     slots: {
-      // can't test with DOM element as Input places an ownerState prop on it unconditionally.
-      root: { expectedClassName: classes.root, testWithElement: null },
-      input: { expectedClassName: classes.input, testWithElement: null },
+      root: { expectedClassName: classes.root },
+      input: { expectedClassName: classes.input, testWithElement: 'input' },
     },
     skip: [
       'componentProp',
@@ -30,9 +31,10 @@ describe('<FilledInput />', () => {
   }));
 
   it('should have the underline class', () => {
-    const { container } = render(<FilledInput />);
-    const root = container.firstChild;
+    const { getByTestId } = render(<FilledInput data-testid="test-input" />);
+    const root = getByTestId('test-input');
     expect(root).not.to.equal(null);
+    expect(root).to.have.class(classes.underline);
   });
 
   it('color={undefined} should not result in crash', () => {
@@ -42,8 +44,8 @@ describe('<FilledInput />', () => {
   });
 
   it('can disable the underline', () => {
-    const { container } = render(<FilledInput disableUnderline />);
-    const root = container.firstChild;
+    const { getByTestId } = render(<FilledInput data-testid="test-input" disableUnderline />);
+    const root = getByTestId('test-input');
     expect(root).not.to.have.class(classes.underline);
   });
 
@@ -52,19 +54,15 @@ describe('<FilledInput />', () => {
     expect(document.querySelector('.error')).not.to.equal(null);
   });
 
-  it('should respects the componentsProps if passed', () => {
-    render(<FilledInput componentsProps={{ root: { 'data-test': 'test' } }} />);
-    expect(document.querySelector('[data-test=test]')).not.to.equal(null);
-  });
-
   it('should respect the classes coming from InputBase', () => {
-    render(
+    const { getByTestId } = render(
       <FilledInput
-        data-test="test"
+        data-testid="test-input"
         multiline
         sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }}
       />,
     );
-    expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
+    const root = getByTestId('test-input');
+    expect(root).toHaveComputedStyle({ marginTop: '10px' });
   });
 });