[material-ui][FilledInput] Remove unapplied classes from filledInputC…

…lasses interface and add missing classes to root (#42082)
mui · May 30, 2024 · 090850a · 090850a
1 parent fc68b8e
commit 090850a
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 84 deletions.
diff --git a/docs/pages/material-ui/api/filled-input.json b/docs/pages/material-ui/api/filled-input.json
@@ -121,42 +121,6 @@
       "description": "Styles applied to the input element.",
       "isGlobal": false
     },
-    {
-      "key": "inputAdornedEnd",
-      "className": "MuiFilledInput-inputAdornedEnd",
-      "description": "Styles applied to the input element if `endAdornment` is provided.",
-      "isGlobal": false
-    },
-    {
-      "key": "inputAdornedStart",
-      "className": "MuiFilledInput-inputAdornedStart",
-      "description": "Styles applied to the input element if `startAdornment` is provided.",
-      "isGlobal": false
-    },
-    {
-      "key": "inputHiddenLabel",
-      "className": "MuiFilledInput-inputHiddenLabel",
-      "description": "Styles applied to the `input` if in `<FormControl hiddenLabel />`.",
-      "isGlobal": false
-    },
-    {
-      "key": "inputMultiline",
-      "className": "MuiFilledInput-inputMultiline",
-      "description": "Styles applied to the input element if `multiline={true}`.",
-      "isGlobal": false
-    },
-    {
-      "key": "inputSizeSmall",
-      "className": "MuiFilledInput-inputSizeSmall",
-      "description": "Styles applied to the input element if `size=\"small\"`.",
-      "isGlobal": false
-    },
-    {
-      "key": "inputTypeSearch",
-      "className": "MuiFilledInput-inputTypeSearch",
-      "description": "Styles applied to the input element if `type=\"search\"`.",
-      "isGlobal": false
-    },
     {
       "key": "multiline",
       "className": "MuiFilledInput-multiline",
@@ -172,7 +136,7 @@
     {
       "key": "sizeSmall",
       "className": "MuiFilledInput-sizeSmall",
-      "description": "Styles applied to the input element if `size=\"small\"`.",
+      "description": "Styles applied to the root element if `size=\"small\"`.",
       "isGlobal": false
     },
     {

diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json
@@ -125,36 +125,6 @@
       "conditions": "<code>hiddenLabel={true}</code>"
     },
     "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
-    "inputAdornedEnd": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>endAdornment</code> is provided"
-    },
-    "inputAdornedStart": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>startAdornment</code> is provided"
-    },
-    "inputHiddenLabel": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>input</code>",
-      "conditions": "in <code><FormControl hiddenLabel /></code>"
-    },
-    "inputMultiline": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>multiline={true}</code>"
-    },
-    "inputSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "inputTypeSearch": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>type=\"search\"</code>"
-    },
     "multiline": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -163,7 +133,7 @@
     "root": { "description": "Styles applied to the root element." },
     "sizeSmall": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
+      "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
     "underline": {

diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -14,14 +14,24 @@ import {
   InputBaseRoot,
   InputBaseInput,
 } from '../InputBase/InputBase';
+import { capitalize } from '../utils';
 
 const useThemeProps = createUseThemeProps('MuiFilledInput');
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, disableUnderline } = ownerState;
+  const { classes, disableUnderline, startAdornment, endAdornment, size, hiddenLabel, multiline } =
+    ownerState;
 
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: [
+      'root',
+      !disableUnderline && 'underline',
+      startAdornment && 'adornedStart',
+      endAdornment && 'adornedEnd',
+      size === 'small' && `size${capitalize(size)}`,
+      hiddenLabel && 'hiddenLabel',
+      multiline && 'multiline',
+    ],
     input: ['input'],
   };
 

diff --git a/packages/mui-material/src/FilledInput/FilledInput.test.js b/packages/mui-material/src/FilledInput/FilledInput.test.js
@@ -75,4 +75,34 @@ describe('<FilledInput />', () => {
     render(<FilledInput endAdornment={<Adornment />} slotProps={{}} />);
     render(<FilledInput startAdornment={<Adornment />} slotProps={{}} />);
   });
+
+  it('should not have following classes', () => {
+    render(
+      <FilledInput
+        size="small"
+        multiline
+        startAdornment="start"
+        endAdornment="end"
+        type="search"
+      />,
+    );
+
+    expect(document.querySelector('.MuiFilledInput-inputSizeSmall')).to.equal(null);
+    expect(document.querySelector('.MuiFilledInput-inputMultiline')).to.equal(null);
+    expect(document.querySelector('.MuiFilledInput-inputAdornedStart')).to.equal(null);
+    expect(document.querySelector('.MuiFilledInput-inputAdornedEnd')).to.equal(null);
+    expect(document.querySelector('.MuiFilledInput-inputTypeSearch')).to.equal(null);
+  });
+
+  it('should have following classes', () => {
+    const { container } = render(
+      <FilledInput hiddenLabel multiline size="small" startAdornment="start" endAdornment="end" />,
+    );
+    const root = container.firstChild;
+    expect(root).to.have.class(classes.hiddenLabel);
+    expect(root).to.have.class(classes.multiline);
+    expect(root).to.have.class(classes.sizeSmall);
+    expect(root).to.have.class(classes.adornedEnd);
+    expect(root).to.have.class(classes.adornedStart);
+  });
 });
diff --git a/packages/mui-material/src/FilledInput/filledInputClasses.ts b/packages/mui-material/src/FilledInput/filledInputClasses.ts
@@ -19,26 +19,14 @@ export interface FilledInputClasses {
   adornedEnd: string;
   /** State class applied to the root element if `error={true}`. */
   error: string;
-  /** Styles applied to the input element if `size="small"`. */
+  /** Styles applied to the root element if `size="small"`. */
   sizeSmall: string;
   /** Styles applied to the root element if `multiline={true}`. */
   multiline: string;
   /** Styles applied to the root element if `hiddenLabel={true}`. */
   hiddenLabel: string;
   /** Styles applied to the input element. */
   input: string;
-  /** Styles applied to the input element if `size="small"`. */
-  inputSizeSmall: string;
-  /** Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
-  inputHiddenLabel: 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;
 }
 
 export type FilledInputClassKey = keyof FilledInputClasses;
@@ -49,7 +37,16 @@ export function getFilledInputUtilityClass(slot: string): string {
 
 const filledInputClasses: FilledInputClasses = {
   ...inputBaseClasses,
-  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']),
+  ...generateUtilityClasses('MuiFilledInput', [
+    'root',
+    'underline',
+    'input',
+    'adornedStart',
+    'adornedEnd',
+    'sizeSmall',
+    'multiline',
+    'hiddenLabel',
+  ]),
 };
 
 export default filledInputClasses;