From b3090b94dc8868a148883a73ed0cb82f79b624e0 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 14 Feb 2025 20:05:25 +0530 Subject: [PATCH] [material-ui][InputBase] Deprecate composed classes (#45234) --- .../migrating-from-deprecated-apis.md | 51 ++++++++ docs/pages/material-ui/api/input-base.json | 17 ++- .../api-docs/input-base/input-base.json | 21 ++-- packages/mui-codemod/README.md | 54 ++++++++ .../src/deprecations/all/deprecations-all.js | 2 + .../src/deprecations/all/postcss.config.js | 2 + .../deprecations/input-base-classes/index.js | 1 + .../input-base-classes/input-base-classes.js | 119 ++++++++++++++++++ .../input-base-classes.test.js | 78 ++++++++++++ .../input-base-classes/postcss-plugin.js | 45 +++++++ .../input-base-classes/postcss.config.js | 5 + .../input-base-classes/test-cases/actual.css | 20 +++ .../input-base-classes/test-cases/actual.js | 13 ++ .../test-cases/expected.css | 20 +++ .../input-base-classes/test-cases/expected.js | 13 ++ .../src/InputBase/inputBaseClasses.ts | 21 +++- 16 files changed, 460 insertions(+), 22 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.js diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index d721836608fa61..832abcf916ca2a 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -1298,6 +1298,57 @@ Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-code ```bash npx @mui/codemod@latest deprecations/input-base-props +npx @mui/codemod@latest deprecations/input-base-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `input` class with other props `size`, `type`, `multiline`, `adornedStart`, `adornedEnd`, and `hiddenLabel` have been removed. + +Here's how to migrate: + +```diff +-.MuiInputBase-root .MuiInputBase-inputSizeSmall ++.MuiInputBase-root.MuiInputBase-sizeSmall > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputMultiline ++.MuiInputBase-root.MuiInputBase-multiline > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputAdornedStart ++.MuiInputBase-root.MuiInputBase-adornedStart > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputAdornedEnd ++.MuiInputBase-root.MuiInputBase-adornedEnd > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputHiddenLabel ++.MuiInputBase-root.MuiInputBase-hiddenLabel > .MuiInputBase-input +``` + +```diff + import { inputBaseClasses } from '@mui/material/InputBase'; + + MuiInputBase: { + styleOverrides: { + root: { +- [`& .${inputBaseClasses.inputSizeSmall}`]: { ++ [`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputMultiline}`]: { ++ [`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputAdornedStart}`]: { ++ [`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputAdornedEnd}`]: { ++ [`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputHiddenLabel}`]: { ++ [`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`]: { + color: 'red', + }, + }, + }, + }, ``` ### components diff --git a/docs/pages/material-ui/api/input-base.json b/docs/pages/material-ui/api/input-base.json index d82043dbd4bd7e..edfbe5519a6f08 100644 --- a/docs/pages/material-ui/api/input-base.json +++ b/docs/pages/material-ui/api/input-base.json @@ -147,36 +147,41 @@ "key": "inputAdornedEnd", "className": "MuiInputBase-inputAdornedEnd", "description": "Styles applied to the input element if `endAdornment` is provided.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "inputAdornedStart", "className": "MuiInputBase-inputAdornedStart", "description": "Styles applied to the input element if `startAdornment` is provided.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "inputHiddenLabel", "className": "MuiInputBase-inputHiddenLabel", "description": "Styles applied to the input element if `hiddenLabel={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "inputMultiline", "className": "MuiInputBase-inputMultiline", "description": "Styles applied to the input element if `multiline={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "inputSizeSmall", "className": "MuiInputBase-inputSizeSmall", "description": "Styles applied to the input element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "inputTypeSearch", "className": "MuiInputBase-inputTypeSearch", - "description": "Styles applied to the input element if `type=\"search\"`.", + "description": "", "isGlobal": false }, { diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json index ad671af0f1bd52..3f0aef4b10dfe2 100644 --- a/docs/translations/api-docs/input-base/input-base.json +++ b/docs/translations/api-docs/input-base/input-base.json @@ -143,33 +143,34 @@ "inputAdornedEnd": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the input element", - "conditions": "endAdornment is provided" + "conditions": "endAdornment is provided", + "deprecationInfo": "Combine the .MuiInputBase-input and .MuiInputBase-adornedEnd classes instead. See Migrating from deprecated APIs for more details." }, "inputAdornedStart": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the input element", - "conditions": "startAdornment is provided" + "conditions": "startAdornment is provided", + "deprecationInfo": "Combine the .MuiInputBase-input and .MuiInputBase-adornedStart classes instead. See Migrating from deprecated APIs for more details." }, "inputHiddenLabel": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the input element", - "conditions": "hiddenLabel={true}" + "conditions": "hiddenLabel={true}", + "deprecationInfo": "Combine the .MuiInputBase-input and .MuiInputBase-hiddenLabel classes instead. See Migrating from deprecated APIs for more details." }, "inputMultiline": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the input element", - "conditions": "multiline={true}" + "conditions": "multiline={true}", + "deprecationInfo": "Combine the .MuiInputBase-input and .MuiInputBase-multiline classes instead. See Migrating from deprecated APIs for more details." }, "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\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiInputBase-input and .MuiInputBase-sizeSmall classes instead. See Migrating from deprecated APIs for more details." }, + "inputTypeSearch": { "description": "" }, "multiline": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index b89175a729f0c2..bdd22d0c3e9a0e 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1288,6 +1288,60 @@ npx @mui/codemod@latest deprecations/image-list-item-bar-classes npx @mui/codemod@latest deprecations/input-base-props ``` +#### `input-base-classes` + +JS transforms: + +```diff + import { inputBaseClasses } from '@mui/material/InputBase'; + + MuiInputBase: { + styleOverrides: { + root: { +- [`& .${inputBaseClasses.inputSizeSmall}`]: { ++ [`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputMultiline}`]: { ++ [`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputAdornedStart}`]: { ++ [`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputAdornedEnd}`]: { ++ [`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`]: { + color: 'red', + }, +- [`& .${inputBaseClasses.inputHiddenLabel}`]: { ++ [`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiInputBase-root .MuiInputBase-inputSizeSmall ++.MuiInputBase-root.MuiInputBase-sizeSmall > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputMultiline ++.MuiInputBase-root.MuiInputBase-multiline > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputAdornedStart ++.MuiInputBase-root.MuiInputBase-adornedStart > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputAdornedEnd ++.MuiInputBase-root.MuiInputBase-adornedEnd > .MuiInputBase-input +-.MuiInputBase-root .MuiInputBase-inputHiddenLabel ++.MuiInputBase-root.MuiInputBase-hiddenLabel > .MuiInputBase-input +``` + +```bash +npx @mui/codemod@latest deprecations/input-base-classes +``` + #### `input-props` ```diff diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index df720a5a5d88d7..ae02787be6afd1 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -15,6 +15,7 @@ import transformFilledInputProps from '../filled-input-props'; import transformFormControlLabelProps from '../form-control-label-props'; import transformImageListItemBarClasses from '../image-list-item-bar-classes'; import transformInputBaseProps from '../input-base-props'; +import transformInputBaseClasses from '../input-base-classes'; import transformInputProps from '../input-props'; import transformListItemTextProps from '../list-item-text-props'; import transformLinearProgressClasses from '../linear-progress-classes'; @@ -62,6 +63,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformFormControlLabelProps(file, api, options); file.source = transformImageListItemBarClasses(file, api, options); file.source = transformInputBaseProps(file, api, options); + file.source = transformInputBaseClasses(file, api, options); file.source = transformInputProps(file, api, options); file.source = transformListItemTextProps(file, api, options); file.source = transformLinearProgressClasses(file, api, options); diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 11a62e27ca372d..dad3d79f0a9454 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -16,6 +16,7 @@ const { const { plugin: circularProgressClassesPlugin, } = require('../circular-progress-classes/postcss-plugin'); +const { plugin: inputBaseClassesPlugin } = require('../input-base-classes/postcss-plugin'); const { plugin: linearProgressClassesPlugin, } = require('../linear-progress-classes/postcss-plugin'); @@ -34,6 +35,7 @@ module.exports = { buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, + inputBaseClassesPlugin, linearProgressClassesPlugin, drawerClassesPlugin, paginationItemClassesPlugin, diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/index.js b/packages/mui-codemod/src/deprecations/input-base-classes/index.js new file mode 100644 index 00000000000000..5bc93337503a35 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/index.js @@ -0,0 +1 @@ +export { default } from './input-base-classes'; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js new file mode 100644 index 00000000000000..aba031150b1a22 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js @@ -0,0 +1,119 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/InputBase$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'inputBaseClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiInputBase-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + + if (replacementSelector.includes(' > ')) { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js new file mode 100644 index 00000000000000..b239d8dc0406ba --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './input-base-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('input-base-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/input-base-classes/postcss-plugin.js new file mode 100644 index 00000000000000..2b1894d645e546 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/postcss-plugin.js @@ -0,0 +1,45 @@ +const classes = [ + { + deprecatedClass: ' .MuiInputBase-inputSizeSmall', + replacementSelector: '.MuiInputBase-sizeSmall > .MuiInputBase-input', + }, + { + deprecatedClass: ' .MuiInputBase-inputMultiline', + replacementSelector: '.MuiInputBase-multiline > .MuiInputBase-input', + }, + { + deprecatedClass: ' .MuiInputBase-inputAdornedStart', + replacementSelector: '.MuiInputBase-adornedStart > .MuiInputBase-input', + }, + { + deprecatedClass: ' .MuiInputBase-inputAdornedEnd', + replacementSelector: '.MuiInputBase-adornedEnd > .MuiInputBase-input', + }, + { + deprecatedClass: ' .MuiInputBase-inputHiddenLabel', + replacementSelector: '.MuiInputBase-hiddenLabel > .MuiInputBase-input', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deprecated InputBase classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/input-base-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.css new file mode 100644 index 00000000000000..ce9b7d61f53dc6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.css @@ -0,0 +1,20 @@ +.MuiInputBase-root .MuiInputBase-inputSizeSmall { + color: red; +} + +.MuiInputBase-root .MuiInputBase-inputMultiline { + color: red; +} + +.MuiInputBase-root .MuiInputBase-inputAdornedStart { + color: red; +} + +.MuiInputBase-root .MuiInputBase-inputAdornedEnd { + color: red; +} + +.MuiInputBase-root .MuiInputBase-inputHiddenLabel { + color: red; +} + diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.js new file mode 100644 index 00000000000000..b629efcaf2bf58 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/actual.js @@ -0,0 +1,13 @@ +import { inputBaseClasses } from '@mui/material/InputBase'; + +('& .MuiInputBase-inputHiddenLabel'); +('& .MuiInputBase-inputMultiline'); +('& .MuiInputBase-inputAdornedStart'); +('& .MuiInputBase-inputAdornedEnd'); +('& .MuiInputBase-inputSizeSmall'); + +`& .${inputBaseClasses.inputHiddenLabel}`; +`& .${inputBaseClasses.inputMultiline}`; +`& .${inputBaseClasses.inputAdornedStart}`; +`& .${inputBaseClasses.inputAdornedEnd}`; +`& .${inputBaseClasses.inputSizeSmall}`; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.css new file mode 100644 index 00000000000000..eb987888f3bec4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.css @@ -0,0 +1,20 @@ +.MuiInputBase-root.MuiInputBase-sizeSmall > .MuiInputBase-input { + color: red; +} + +.MuiInputBase-root.MuiInputBase-multiline > .MuiInputBase-input { + color: red; +} + +.MuiInputBase-root.MuiInputBase-adornedStart > .MuiInputBase-input { + color: red; +} + +.MuiInputBase-root.MuiInputBase-adornedEnd > .MuiInputBase-input { + color: red; +} + +.MuiInputBase-root.MuiInputBase-hiddenLabel > .MuiInputBase-input { + color: red; +} + diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.js new file mode 100644 index 00000000000000..23b5a477492f79 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/expected.js @@ -0,0 +1,13 @@ +import { inputBaseClasses } from '@mui/material/InputBase'; + +("&.MuiInputBase-hiddenLabel > .MuiInputBase-input"); +("&.MuiInputBase-multiline > .MuiInputBase-input"); +("&.MuiInputBase-adornedStart > .MuiInputBase-input"); +("&.MuiInputBase-adornedEnd > .MuiInputBase-input"); +("&.MuiInputBase-sizeSmall > .MuiInputBase-input"); + +`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`; diff --git a/packages/mui-material/src/InputBase/inputBaseClasses.ts b/packages/mui-material/src/InputBase/inputBaseClasses.ts index 7a5271e2bc78c5..af8ec0d14286b1 100644 --- a/packages/mui-material/src/InputBase/inputBaseClasses.ts +++ b/packages/mui-material/src/InputBase/inputBaseClasses.ts @@ -30,17 +30,26 @@ export interface InputBaseClasses { readOnly: string; /** Styles applied to the input element. */ input: string; - /** Styles applied to the input element if `size="small"`. */ + /** Styles applied to the input element if `size="small"`. + * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#inputbase-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ inputSizeSmall: string; - /** Styles applied to the input element if `multiline={true}`. */ + /** Styles applied to the input element if `multiline={true}`. + * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#inputbase-classes-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ inputMultiline: string; - /** Styles applied to the input element if `type="search"`. */ inputTypeSearch: string; - /** Styles applied to the input element if `startAdornment` is provided. */ + /** Styles applied to the input element if `startAdornment` is provided. + * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#inputbase-classes-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ inputAdornedStart: string; - /** Styles applied to the input element if `endAdornment` is provided. */ + /** Styles applied to the input element if `endAdornment` is provided. + * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#inputbase-classes-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ inputAdornedEnd: string; - /** Styles applied to the input element if `hiddenLabel={true}`. */ + /** Styles applied to the input element if `hiddenLabel={true}`. + * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-hiddenLabel](/material-ui/api/input-base/#inputbase-classes-hiddenLabel) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ inputHiddenLabel: string; }