diff --git a/docs/pages/material-ui/api/filled-input.json b/docs/pages/material-ui/api/filled-input.json
index edf8016b29aa3a..bb2e23a24a0651 100644
--- a/docs/pages/material-ui/api/filled-input.json
+++ b/docs/pages/material-ui/api/filled-input.json
@@ -117,42 +117,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 ``.",
- "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",
@@ -168,7 +132,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
index 03a2c44eede3b9..6ed22701517f27 100644
--- a/docs/translations/api-docs/filled-input/filled-input.json
+++ b/docs/translations/api-docs/filled-input/filled-input.json
@@ -127,36 +127,6 @@
"conditions": "hiddenLabel={true}
"
},
"input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
- "inputAdornedEnd": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input element",
- "conditions": "endAdornment
is provided"
- },
- "inputAdornedStart": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input element",
- "conditions": "startAdornment
is provided"
- },
- "inputHiddenLabel": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input
",
- "conditions": "in
"
- },
- "inputMultiline": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input element",
- "conditions": "multiline={true}
"
- },
- "inputSizeSmall": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input element",
- "conditions": "size=\"small\"
"
- },
- "inputTypeSearch": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the input element",
- "conditions": "type=\"search\"
"
- },
"multiline": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -165,7 +135,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": "size=\"small\"
"
},
"underline": {
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index 9e2de297107310..6905d319964f07 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -14,12 +14,22 @@ import {
InputBaseRoot,
InputBaseComponent as InputBaseInput,
} from '../InputBase/InputBase';
+import { capitalize } from '../utils';
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
index ad2bd3f0b01416..d01c7831be1345 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.test.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.test.js
@@ -75,4 +75,34 @@ describe('', () => {
render(} slotProps={{}} />);
render(} slotProps={{}} />);
});
+
+ it('should not have following classes', () => {
+ render(
+ ,
+ );
+
+ 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(
+ ,
+ );
+ 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
index 5576a1379b35f2..3d9607cacbaf5a 100644
--- a/packages/mui-material/src/FilledInput/filledInputClasses.ts
+++ b/packages/mui-material/src/FilledInput/filledInputClasses.ts
@@ -19,7 +19,7 @@ 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;
@@ -27,18 +27,6 @@ export interface FilledInputClasses {
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 ``. */
- 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;