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;