[Input] Export InputBase's classes from the classes const (#31186)

mui · Feb 25, 2022 · 4b8e354 · 4b8e354
1 parent 0ad733b
commit 4b8e354
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 52 deletions.
diff --git a/packages/mui-material/src/FilledInput/FilledInput.test.js b/packages/mui-material/src/FilledInput/FilledInput.test.js
@@ -40,4 +40,15 @@ describe('<FilledInput />', () => {
     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(
+      <FilledInput
+        data-test="test"
+        multiline
+        sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }}
+      />,
+    );
+    expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
+  });
 });
diff --git a/packages/mui-material/src/FilledInput/filledInputClasses.ts b/packages/mui-material/src/FilledInput/filledInputClasses.ts
@@ -1,4 +1,5 @@
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 
 export interface FilledInputClasses {
   /** Styles applied to the root element. */
@@ -43,24 +44,9 @@ export function getFilledInputUtilityClass(slot: string): string {
   return generateUtilityClass('MuiFilledInput', slot);
 }
 
-const filledInputClasses: FilledInputClasses = generateUtilityClasses('MuiFilledInput', [
-  'root',
-  'colorSecondary',
-  'underline',
-  'focused',
-  'disabled',
-  'adornedStart',
-  'adornedEnd',
-  'error',
-  'sizeSmall',
-  'multiline',
-  'hiddenLabel',
-  'input',
-  'inputSizeSmall',
-  'inputHiddenLabel',
-  'inputMultiline',
-  'inputAdornedStart',
-  'inputAdornedEnd',
-]);
+const filledInputClasses: FilledInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']),
+};
 
 export default filledInputClasses;
diff --git a/packages/mui-material/src/Input/Input.test.js b/packages/mui-material/src/Input/Input.test.js
@@ -28,4 +28,11 @@ describe('<Input />', () => {
     render(<Input componentsProps={{ root: { 'data-test': 'test' } }} />);
     expect(document.querySelector('[data-test=test]')).not.to.equal(null);
   });
+
+  it('should respect the classes coming from InputBase', () => {
+    render(
+      <Input data-test="test" multiline sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }} />,
+    );
+    expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
+  });
 });
diff --git a/packages/mui-material/src/Input/inputClasses.ts b/packages/mui-material/src/Input/inputClasses.ts
@@ -1,4 +1,5 @@
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 
 export interface InputClasses {
   /** Styles applied to the root element. */
@@ -37,21 +38,9 @@ export function getInputUtilityClass(slot: string): string {
   return generateUtilityClass('MuiInput', slot);
 }
 
-const inputClasses: InputClasses = generateUtilityClasses('MuiInput', [
-  'root',
-  'formControl',
-  'focused',
-  'disabled',
-  'colorSecondary',
-  'underline',
-  'error',
-  'sizeSmall',
-  'multiline',
-  'fullWidth',
-  'input',
-  'inputSizeSmall',
-  'inputMultiline',
-  'inputTypeSearch',
-]);
+const inputClasses: InputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiInput', ['root', 'underline', 'input']),
+};
 
 export default inputClasses;
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js
@@ -48,4 +48,15 @@ describe('<OutlinedInput />', () => {
     render(<OutlinedInput componentsProps={{ root: { 'data-test': 'test' } }} />);
     expect(document.querySelector('[data-test=test]')).not.to.equal(null);
   });
+
+  it('should respect the classes coming from InputBase', () => {
+    render(
+      <OutlinedInput
+        data-test="test"
+        multiline
+        sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }}
+      />,
+    );
+    expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
+  });
 });
diff --git a/packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts b/packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts
@@ -1,4 +1,5 @@
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 
 export interface OutlinedInputClasses {
   /** Styles applied to the root element. */
@@ -39,22 +40,9 @@ export function getOutlinedInputUtilityClass(slot: string): string {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
 
-const outlinedInputClasses: OutlinedInputClasses = generateUtilityClasses('MuiOutlinedInput', [
-  'root',
-  'colorSecondary',
-  'focused',
-  'disabled',
-  'adornedStart',
-  'adornedEnd',
-  'error',
-  'sizeSmall',
-  'multiline',
-  'notchedOutline',
-  'input',
-  'inputSizeSmall',
-  'inputMultiline',
-  'inputAdornedStart',
-  'inputAdornedEnd',
-]);
+const outlinedInputClasses: OutlinedInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']),
+};
 
 export default outlinedInputClasses;