From cf7151b76f247bc363f3e6349e3ff42f60888e35 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:24:31 +0530 Subject: [PATCH 01/23] set up --- .../src/deprecations/select-classes/index.js | 1 + .../select-classes/postcss-plugin.js | 38 +++++ .../select-classes/postcss.config.js | 5 + .../select-classes/select-classes.js | 135 ++++++++++++++++++ .../select-classes/select-classes.test.js | 78 ++++++++++ .../select-classes/test-cases/actual.css | 13 ++ .../select-classes/test-cases/actual.js | 8 ++ .../select-classes/test-cases/expected.css | 0 .../select-classes/test-cases/expected.js | 6 + .../mui-material/src/Select/selectClasses.ts | 12 +- 10 files changed, 293 insertions(+), 3 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/select-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/select-classes.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js diff --git a/packages/mui-codemod/src/deprecations/select-classes/index.js b/packages/mui-codemod/src/deprecations/select-classes/index.js new file mode 100644 index 00000000000000..14de6453e01e88 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/index.js @@ -0,0 +1 @@ +export { default } from './select-classes'; diff --git a/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js new file mode 100644 index 00000000000000..c63ce191b4f74c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js @@ -0,0 +1,38 @@ +const classes = [ + { + deprecatedClass: ' .MuiSelect-iconFilled', + replacementSelector: ' .MuiSelect-filled ~ .MuiSelect-icon', + }, + { + deprecatedClass: ' .MuiSelect-iconOutlined', + replacementSelector: ' .MuiSelect-outlined ~ .MuiSelect-icon', + }, + { + deprecatedClass: ' .MuiSelect-iconStandard', + replacementSelector: ' .MuiSelect-standard ~ .MuiSelect-icon', + }, + +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deprecated Select 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/select-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/select-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-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/select-classes/select-classes.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js new file mode 100644 index 00000000000000..6a659964e45c48 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js @@ -0,0 +1,135 @@ +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\/Select$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') { + 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]; + + let cssSelector = ''; + if (replacementSelector.includes(' > ')) { + cssSelector = '>'; + } else if (replacementSelector.includes(' ~ ')) { + cssSelector = '~'; + } + + const atomicClasses = replacementSelector + .replaceAll('MuiTableSortLabel-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(`${cssSelector} `, '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (cssSelector) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement( + { raw: ` ${cssSelector} .`, cooked: ` ${cssSelector} .` }, + false, + ), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } 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/select-classes/select-classes.test.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js new file mode 100644 index 00000000000000..69dd52f93ce90f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/select-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 './table-sort-label-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('toggle-button-group-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/select-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css new file mode 100644 index 00000000000000..5537f4bb068189 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css @@ -0,0 +1,13 @@ +.MuiSelect-root .MuiSelect-iconFilled { + color: red; +} + +.MuiSelect-root .MuiSelect-iconOutlined { + color: red; +} + +.MuiSelect-root .MuiSelect-iconStandard { + color: red; +} + + diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js new file mode 100644 index 00000000000000..17b450ff684cfb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js @@ -0,0 +1,8 @@ +import { selectClasses } from '@mui/material/Select'; + +('& .MuiSelect-iconFilled'); +('& .MuiSelect-iconOutlined'); +('& .MuiSelect-iconStandard'); +`& .${selectClasses.iconFilled}`; +`& .${selectClasses.iconOutlined}`; +`& .${selectClasses.iconStandard}`; diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js new file mode 100644 index 00000000000000..41d90b56c056dd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { tableSortLabelClasses } from '@mui/material/TableSortLabel'; + +("&.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon"); +("&.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon"); +`&.${tableSortLabelClasses.directionDesc} > .${tableSortLabelClasses.icon}`; +`&.${tableSortLabelClasses.directionAsc} > .${tableSortLabelClasses.icon}`; diff --git a/packages/mui-material/src/Select/selectClasses.ts b/packages/mui-material/src/Select/selectClasses.ts index d65ecac5bd954c..23eff0c6429090 100644 --- a/packages/mui-material/src/Select/selectClasses.ts +++ b/packages/mui-material/src/Select/selectClasses.ts @@ -20,11 +20,17 @@ export interface SelectClasses { icon: string; /** Styles applied to the icon component if the popup is open. */ iconOpen: string; - /** Styles applied to the icon component if `variant="filled"`. */ + /** Styles applied to the icon component if `variant="filled"`. + * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-filled](/material-ui/api/select/#select-classes-filled) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ iconFilled: string; - /** Styles applied to the icon component if `variant="outlined"`. */ + /** Styles applied to the icon component if `variant="outlined"`. + * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-outlined](/material-ui/api/select/#select-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ iconOutlined: string; - /** Styles applied to the icon component if `variant="standard"`. */ + /** Styles applied to the icon component if `variant="standard"`. + * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-standard](/material-ui/api/select/#select-classes-standard) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ iconStandard: string; /** Styles applied to the underlying native input component. */ nativeInput: string; From dc2fd50790a87d87abc34ea2f670291acafd009c Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:44:11 +0530 Subject: [PATCH 02/23] fix codemod --- .../select-classes/select-classes.js | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js index 6a659964e45c48..996d5cbbbc1840 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js @@ -15,7 +15,10 @@ export default function transformer(file, api, options) { .filter((path) => path.node.source.value.match(/^@mui\/material\/Select$/)) .forEach((path) => { path.node.specifiers.forEach((specifier) => { - if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'selectClasses' + ) { const deprecatedAtomicClass = deprecatedClass.replace( `${deprecatedClass.split('-')[0]}-`, '', @@ -32,19 +35,12 @@ export default function transformer(file, api, options) { (expression) => expression === memberExpression.value, ); const precedingTemplateElement = parent.quasis[memberExpressionIndex]; - - let cssSelector = ''; - if (replacementSelector.includes(' > ')) { - cssSelector = '>'; - } else if (replacementSelector.includes(' ~ ')) { - cssSelector = '~'; - } - const atomicClasses = replacementSelector - .replaceAll('MuiTableSortLabel-', '') + .replaceAll('MuiSelect-', '') .replaceAll(replacementSelectorPrefix, '') - .replaceAll(`${cssSelector} `, '') + .replaceAll(' ~ ', '') .split('.') + .map((className) => className.trim()) .filter(Boolean); if ( @@ -66,7 +62,7 @@ export default function transformer(file, api, options) { ]; parent.expressions.splice(...atomicClassesArgs); - if (cssSelector) { + if (replacementSelector.includes(' ~ ')) { const quasisArgs = [ memberExpressionIndex, 1, @@ -77,10 +73,7 @@ export default function transformer(file, api, options) { }, false, ), - j.templateElement( - { raw: ` ${cssSelector} .`, cooked: ` ${cssSelector} .` }, - false, - ), + j.templateElement({ raw: ' ~ .', cooked: ' ~ .' }, false), ]; if (atomicClasses.length === 3) { From d1ca77c4a57e810cc7ee18b35ee7a3c22f4e2c4a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:45:19 +0530 Subject: [PATCH 03/23] fix --- .../deprecations/select-classes/select-classes.js | 2 +- .../deprecations/select-classes/test-cases/actual.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js index 996d5cbbbc1840..859d3affa2eb44 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js @@ -68,7 +68,7 @@ export default function transformer(file, api, options) { 1, j.templateElement( { - raw: precedingTemplateElement.value.raw.replace(' ', ''), + raw: precedingTemplateElement.value.raw, cooked: precedingTemplateElement.value.cooked.replace(' ', ''), }, false, diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js index 17b450ff684cfb..bc288e72b4cb36 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js @@ -1,8 +1,8 @@ import { selectClasses } from '@mui/material/Select'; -('& .MuiSelect-iconFilled'); -('& .MuiSelect-iconOutlined'); -('& .MuiSelect-iconStandard'); -`& .${selectClasses.iconFilled}`; -`& .${selectClasses.iconOutlined}`; -`& .${selectClasses.iconStandard}`; +("& .MuiSelect-filled ~ .MuiSelect-icon"); +("& .MuiSelect-outlined ~ .MuiSelect-icon"); +("& .MuiSelect-standard ~ .MuiSelect-icon"); +`& .${selectClasses.filled} ~ .${selectClasses.icon}`; +`& .${selectClasses.outlined} ~ .${selectClasses.icon}`; +`& .${selectClasses.standard} ~ .${selectClasses.icon}`; From 83ab52bf01eea1de52da2572b0309f1ef51be404 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:49:41 +0530 Subject: [PATCH 04/23] fix --- .../select-classes/test-cases/actual.css | 2 -- .../deprecations/select-classes/test-cases/actual.js | 12 ++++++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css index 5537f4bb068189..f802995088a12f 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css @@ -9,5 +9,3 @@ .MuiSelect-root .MuiSelect-iconStandard { color: red; } - - diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js index bc288e72b4cb36..17b450ff684cfb 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js @@ -1,8 +1,8 @@ import { selectClasses } from '@mui/material/Select'; -("& .MuiSelect-filled ~ .MuiSelect-icon"); -("& .MuiSelect-outlined ~ .MuiSelect-icon"); -("& .MuiSelect-standard ~ .MuiSelect-icon"); -`& .${selectClasses.filled} ~ .${selectClasses.icon}`; -`& .${selectClasses.outlined} ~ .${selectClasses.icon}`; -`& .${selectClasses.standard} ~ .${selectClasses.icon}`; +('& .MuiSelect-iconFilled'); +('& .MuiSelect-iconOutlined'); +('& .MuiSelect-iconStandard'); +`& .${selectClasses.iconFilled}`; +`& .${selectClasses.iconOutlined}`; +`& .${selectClasses.iconStandard}`; From ebd6128eaf4115d8bf3b78d9c588006ed6fffe38 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:50:44 +0530 Subject: [PATCH 05/23] fix --- .../select-classes/test-cases/expected.css | 11 +++++++++++ .../select-classes/test-cases/expected.js | 12 +++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css index e69de29bb2d1d6..cc38c2f87b57e3 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css @@ -0,0 +1,11 @@ +.MuiSelect-root .MuiSelect-filled ~ .MuiSelect-icon { + color: red; +} + +.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon { + color: red; +} + +.MuiSelect-root .MuiSelect-standard ~ .MuiSelect-icon { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js index 41d90b56c056dd..bc288e72b4cb36 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js @@ -1,6 +1,8 @@ -import { tableSortLabelClasses } from '@mui/material/TableSortLabel'; +import { selectClasses } from '@mui/material/Select'; -("&.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon"); -("&.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon"); -`&.${tableSortLabelClasses.directionDesc} > .${tableSortLabelClasses.icon}`; -`&.${tableSortLabelClasses.directionAsc} > .${tableSortLabelClasses.icon}`; +("& .MuiSelect-filled ~ .MuiSelect-icon"); +("& .MuiSelect-outlined ~ .MuiSelect-icon"); +("& .MuiSelect-standard ~ .MuiSelect-icon"); +`& .${selectClasses.filled} ~ .${selectClasses.icon}`; +`& .${selectClasses.outlined} ~ .${selectClasses.icon}`; +`& .${selectClasses.standard} ~ .${selectClasses.icon}`; From 1ec6244c8149ef86899e9c8554ddd7a03ed03563 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:57:51 +0530 Subject: [PATCH 06/23] docs:api --- docs/pages/material-ui/api/select.json | 9 ++++++--- docs/translations/api-docs/select/select.json | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/pages/material-ui/api/select.json b/docs/pages/material-ui/api/select.json index feb36be1afaa82..f502ec73a8ccfd 100644 --- a/docs/pages/material-ui/api/select.json +++ b/docs/pages/material-ui/api/select.json @@ -90,7 +90,8 @@ "key": "iconFilled", "className": "MuiSelect-iconFilled", "description": "Styles applied to the icon component if `variant=\"filled\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconOpen", @@ -102,13 +103,15 @@ "key": "iconOutlined", "className": "MuiSelect-iconOutlined", "description": "Styles applied to the icon component if `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconStandard", "className": "MuiSelect-iconStandard", "description": "Styles applied to the icon component if `variant=\"standard\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "multiple", diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json index 8cb27165d2be53..365a8646533615 100644 --- a/docs/translations/api-docs/select/select.json +++ b/docs/translations/api-docs/select/select.json @@ -92,7 +92,8 @@ "iconFilled": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon component", - "conditions": "variant=\"filled\"" + "conditions": "variant=\"filled\"", + "deprecationInfo": "Combine the .MuiSelect-icon and .MuiSelect-filled classes instead. See Migrating from deprecated APIs for more details." }, "iconOpen": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -102,12 +103,14 @@ "iconOutlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon component", - "conditions": "variant=\"outlined\"" + "conditions": "variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiSelect-icon and .MuiSelect-outlined classes instead. See Migrating from deprecated APIs for more details." }, "iconStandard": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon component", - "conditions": "variant=\"standard\"" + "conditions": "variant=\"standard\"", + "deprecationInfo": "Combine the .MuiSelect-icon and .MuiSelect-standard classes instead. See Migrating from deprecated APIs for more details." }, "multiple": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", From 35f30316970520d5fc5f602d6937e36282c00156 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 12:58:24 +0530 Subject: [PATCH 07/23] docs:api --- .../src/deprecations/select-classes/postcss-plugin.js | 1 - .../src/deprecations/select-classes/select-classes.js | 5 +---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js index c63ce191b4f74c..37d0ef06dbf4f5 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js @@ -11,7 +11,6 @@ const classes = [ deprecatedClass: ' .MuiSelect-iconStandard', replacementSelector: ' .MuiSelect-standard ~ .MuiSelect-icon', }, - ]; const plugin = () => { diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js index 859d3affa2eb44..ffd978bd092c0c 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js @@ -15,10 +15,7 @@ export default function transformer(file, api, options) { .filter((path) => path.node.source.value.match(/^@mui\/material\/Select$/)) .forEach((path) => { path.node.specifiers.forEach((specifier) => { - if ( - specifier.type === 'ImportSpecifier' && - specifier.imported.name === 'selectClasses' - ) { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') { const deprecatedAtomicClass = deprecatedClass.replace( `${deprecatedClass.split('-')[0]}-`, '', From 32df9137cbbde3e13e5ae68a4489c2659a6f837e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 13:06:55 +0530 Subject: [PATCH 08/23] add test --- packages/mui-material/src/Select/Select.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 86ffb06d56bd7c..934926956e512e 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1754,4 +1754,10 @@ describe('); + expect(container.querySelector('.MuiSelect-iconOutlined')).not.null(); + expect(container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon')).not.null(); + }); }); From 28917139d9be7192184e9c84a7f4e609fb47773f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 13:09:01 +0530 Subject: [PATCH 09/23] fix import --- packages/mui-codemod/src/deprecations/all/deprecations-all.js | 2 ++ packages/mui-codemod/src/deprecations/all/postcss.config.js | 2 ++ .../src/deprecations/select-classes/select-classes.test.js | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index aff9ab5da72113..6dc9335eff2b9f 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -22,6 +22,7 @@ import transformStepLabelProps from '../step-label-props'; import transformTextFieldProps from '../text-field-props'; import transformTabClasses from '../tab-classes'; import transformToggleButtonGroupClasses from '../toggle-button-group-classes'; +import transformSelectClasses from '../select-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -52,6 +53,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformTextFieldProps(file, api, options); file.source = transformTabClasses(file, api, options); file.source = transformToggleButtonGroupClasses(file, api, options); + file.source = transformSelectClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index a37e524e2072dc..948f51a315bae8 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -19,6 +19,7 @@ const { plugin: tabClassesPlugin } = require('../tab-classes/postcss-plugin'); const { plugin: tableSortLabelClassesPlugin, } = require('../table-sort-label-classes/postcss-plugin'); +const { plugin: selectClassesPlugin } = require('../select-classes/postcss-plugin'); module.exports = { plugins: [ @@ -33,5 +34,6 @@ module.exports = { toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, + selectClassesPlugin, ], }; diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js index 69dd52f93ce90f..0e0b7a6055e52c 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js @@ -2,7 +2,7 @@ import path from 'path'; import { expect } from 'chai'; import postcss from 'postcss'; import { jscodeshift } from '../../../testUtils'; -import jsTransform from './table-sort-label-classes'; +import jsTransform from './select-classes'; import { plugin as postcssPlugin } from './postcss-plugin'; import readFile from '../../util/readFile'; From 035db6f53930a56fe2ed863ad5adddb596ce2531 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 15:16:59 +0530 Subject: [PATCH 10/23] fix test --- packages/mui-material/src/Select/Select.test.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 934926956e512e..a8cc45704ebffc 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1757,7 +1757,9 @@ describe('); - expect(container.querySelector('.MuiSelect-iconOutlined')).not.null(); - expect(container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon')).not.null(); + expect(container.querySelector('.MuiSelect-root .MuiSelect-iconOutlined')).not.to.equal(null); + expect( + container.querySelector('.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon'), + ).not.to.equal(null); }); }); From 374e25c09126b1a32010ab67bcd4ed01327d9e96 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 15:18:04 +0530 Subject: [PATCH 11/23] fix --- packages/mui-material/src/Select/Select.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index a8cc45704ebffc..6b57bf30a790c0 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1755,7 +1755,7 @@ describe('); expect(container.querySelector('.MuiSelect-root .MuiSelect-iconOutlined')).not.to.equal(null); expect( From 39f5f2a175d85c5a8fca8ca34b0dd31c3eee397c Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 16:50:02 +0530 Subject: [PATCH 12/23] log test --- packages/mui-material/src/Select/Select.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 6b57bf30a790c0..07dce4cba71158 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1757,6 +1757,7 @@ describe('); + console.log(container.classList,'p'); expect(container.querySelector('.MuiSelect-root .MuiSelect-iconOutlined')).not.to.equal(null); expect( container.querySelector('.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon'), From bbb180be3d202b338d358fa246757b29f7d43d69 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 16:50:17 +0530 Subject: [PATCH 13/23] log test --- packages/mui-material/src/Select/Select.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 07dce4cba71158..3697e2bb74f229 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1757,7 +1757,7 @@ describe('); - console.log(container.classList,'p'); + console.log(container.classList, 'p'); expect(container.querySelector('.MuiSelect-root .MuiSelect-iconOutlined')).not.to.equal(null); expect( container.querySelector('.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon'), From e5072b4a2c77b1c2f349de5236a953831a8eabaf Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 17:45:17 +0530 Subject: [PATCH 14/23] fix test --- packages/mui-material/src/Select/Select.test.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 3697e2bb74f229..e1e39940e43333 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1757,10 +1757,9 @@ describe('); - console.log(container.classList, 'p'); - expect(container.querySelector('.MuiSelect-root .MuiSelect-iconOutlined')).not.to.equal(null); + expect(container.querySelector('.MuiSelect-iconOutlined')).not.to.equal(null); expect( - container.querySelector('.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon'), + container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon'), ).not.to.equal(null); }); }); From 6f039d0274c8f73d3208bf9624d06105dff5c619 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 18:24:28 +0530 Subject: [PATCH 15/23] fix tests --- .../src/deprecations/select-classes/test-cases/actual.css | 6 +++--- .../src/deprecations/select-classes/test-cases/expected.css | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css index f802995088a12f..0f15a3556fb8ca 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css @@ -1,11 +1,11 @@ -.MuiSelect-root .MuiSelect-iconFilled { +.MuiSelect-select .MuiSelect-iconFilled { color: red; } -.MuiSelect-root .MuiSelect-iconOutlined { +.MuiSelect-select .MuiSelect-iconOutlined { color: red; } -.MuiSelect-root .MuiSelect-iconStandard { +.MuiSelect-select .MuiSelect-iconStandard { color: red; } diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css index cc38c2f87b57e3..e5d7ddd82e6d8d 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css @@ -1,11 +1,11 @@ -.MuiSelect-root .MuiSelect-filled ~ .MuiSelect-icon { +.MuiSelect-select .MuiSelect-filled ~ .MuiSelect-icon { color: red; } -.MuiSelect-root .MuiSelect-outlined ~ .MuiSelect-icon { +.MuiSelect-select .MuiSelect-outlined ~ .MuiSelect-icon { color: red; } -.MuiSelect-root .MuiSelect-standard ~ .MuiSelect-icon { +.MuiSelect-select .MuiSelect-standard ~ .MuiSelect-icon { color: red; } From b1799d92c6f640e1aa1ae034c28b186301860a01 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 18:32:18 +0530 Subject: [PATCH 16/23] fix css --- .../src/deprecations/select-classes/postcss-plugin.js | 2 +- .../src/deprecations/select-classes/test-cases/actual.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js index 37d0ef06dbf4f5..be0deea8b61a12 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/select-classes/postcss-plugin.js @@ -20,7 +20,7 @@ const plugin = () => { const { selector } = rule; classes.forEach(({ deprecatedClass, replacementSelector }) => { - const selectorRegex = new RegExp(`${deprecatedClass}$`); + const selectorRegex = new RegExp(`${deprecatedClass.trim()}$`); if (selector.match(selectorRegex)) { rule.selector = selector.replace(selectorRegex, replacementSelector); diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css index 0f15a3556fb8ca..6f0ff7f77f9c88 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.css @@ -1,11 +1,11 @@ -.MuiSelect-select .MuiSelect-iconFilled { +.MuiSelect-iconFilled { color: red; } -.MuiSelect-select .MuiSelect-iconOutlined { +.MuiSelect-iconOutlined { color: red; } -.MuiSelect-select .MuiSelect-iconStandard { +.MuiSelect-iconStandard { color: red; } From 124d5d53ce82ffa04d743376a3df38c50071a77e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 18:35:38 +0530 Subject: [PATCH 17/23] fix --- .../src/deprecations/select-classes/test-cases/expected.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css index e5d7ddd82e6d8d..ea749b4f252427 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css @@ -1,11 +1,11 @@ -.MuiSelect-select .MuiSelect-filled ~ .MuiSelect-icon { +.MuiSelect-filled ~ .MuiSelect-icon { color: red; } -.MuiSelect-select .MuiSelect-outlined ~ .MuiSelect-icon { + .MuiSelect-outlined ~ .MuiSelect-icon { color: red; } -.MuiSelect-select .MuiSelect-standard ~ .MuiSelect-icon { + .MuiSelect-standard ~ .MuiSelect-icon { color: red; } From af40fc58d2ad99ec24fa71e254f248582bb54b7c Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 18:46:45 +0530 Subject: [PATCH 18/23] add guides --- .../migrating-from-deprecated-apis.md | 46 ++++++++++++++++++ packages/mui-codemod/README.md | 48 +++++++++++++++++++ .../mui-material/src/Select/Select.test.js | 4 +- 3 files changed, 95 insertions(+), 3 deletions(-) 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 8d8db39876683a..c7971ce5695f31 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 @@ -1297,6 +1297,52 @@ The Popper's prop `componentsProps` was deprecated in favor of `slotProps`: /> ``` +## Select + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#select-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/select-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `icon` class and `variant` prop were removed. + +Here's how to migrate: + +```diff +- .MuiSelect-iconFilled ++ .MuiSelect-filled ~ .MuiSelect-icon +- .MuiSelect-iconOutlined ++ .MuiSelect-outlined ~ .MuiSelect-icon +- .MuiSelect-iconStandard ++ .MuiSelect-standard ~ .MuiSelect-icon +``` + +```diff + import { selectClasses } from '@mui/material/Select'; + + MuiSelect: { + styleOverrides: { + root: { +- [`& .${selectClasses.iconFilled}`]: { ++ [`& .${selectClasses.filled} ~ .${selectClasses.icon}`]: { + color: 'red', + }, +- [`& .${selectClasses.iconOutlined}`]: { ++ [`& .${selectClasses.outlined} ~ .${selectClasses.icon}`]: { + color: 'red', + }, +- [`& .${selectClasses.iconStandard}`]: { ++ [`& .${selectClasses.standard} ~ .${selectClasses.icon}`]: { + color: 'red', + }, + }, + }, + }, +``` + ## Slider Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections: diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 370e49ce8a6792..c64a1d3e3031e5 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1333,6 +1333,54 @@ npx @mui/codemod@next deprecations/popper-props npx @mui/codemod@next deprecations/outlined-input-props ``` +#### `select-classes` + +JS transforms: + +```diff + import { selectClasses } from '@mui/material/Select'; + + MuiSelect: { + styleOverrides: { + root: { +- [`& .${selectClasses.iconFilled}`]: { ++ [`& .${selectClasses.filled} ~ .${selectClasses.icon}`]: { + color: 'red', + }, +- [`& .${selectClasses.iconOutlined}`]: { ++ [`& .${selectClasses.outlined} ~ .${selectClasses.icon}`]: { + color: 'red', + }, +- [`& .${selectClasses.iconStandard}`]: { ++ [`& .${selectClasses.standard} ~ .${selectClasses.icon}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +- .MuiSelect-iconFilled ++ .MuiSelect-filled ~ .MuiSelect-icon +``` + +```diff +- .MuiSelect-iconOutlined ++ .MuiSelect-outlined ~ .MuiSelect-icon +``` + +```diff +- .MuiSelect-iconStandard ++ .MuiSelect-standard ~ .MuiSelect-icon +``` + +```bash +npx @mui/codemod@next deprecations/select-classes +``` + #### `slider-props` ```diff diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index e1e39940e43333..313d308710d61a 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1758,8 +1758,6 @@ describe('); expect(container.querySelector('.MuiSelect-iconOutlined')).not.to.equal(null); - expect( - container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon'), - ).not.to.equal(null); + expect(container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon')).not.to.equal(null); }); }); From 15a02d4d8f788fb7e606647f5b89f3cc7502aea9 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 19:03:43 +0530 Subject: [PATCH 19/23] fix expected css --- .../src/deprecations/select-classes/test-cases/expected.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css index ea749b4f252427..5a6773edc80c28 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css @@ -1,4 +1,4 @@ -.MuiSelect-filled ~ .MuiSelect-icon { + .MuiSelect-filled ~ .MuiSelect-icon { color: red; } From a0f5081619260d17ffb68f8ce9ef0b15cf90f99b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 16 Jul 2024 19:18:59 +0530 Subject: [PATCH 20/23] trigger ci From 38d6996397e47c8d0e2c26f7b0a10d6ddaee4c4a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 2 Jan 2025 13:19:37 +0530 Subject: [PATCH 21/23] apply suggestions --- .../migrating-from-deprecated-apis.md | 2 +- packages/mui-codemod/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 0cd642891ac44d..3b47b02d30161b 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 @@ -1533,7 +1533,7 @@ The Popper's prop `componentsProps` was deprecated in favor of `slotProps`: Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#select-classes) below to migrate the code as described in the following sections: ```bash -npx @mui/codemod@next deprecations/select-classes +npx @mui/codemod@latest deprecations/select-classes ``` ### Composed CSS classes diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 8678f856042339..c0b5aa8c01e760 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1451,7 +1451,7 @@ CSS transforms: ``` ```bash -npx @mui/codemod@next deprecations/select-classes +npx @mui/codemod@latest deprecations/select-classes ``` #### `slider-props` From 023f64c748767ffed85ceeddd7a71eb50bd9a1d0 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 2 Jan 2025 13:34:04 +0530 Subject: [PATCH 22/23] add more tests --- packages/mui-material/src/Select/Select.test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 36e666da569ccf..94f4092c28b356 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1758,4 +1758,16 @@ describe('); + expect(container.querySelector('.MuiSelect-iconStandard')).not.to.equal(null); + expect(container.querySelector('.MuiSelect-standard ~ .MuiSelect-icon')).not.to.equal(null); + }); + + it('filled icon should be selected from below css selectors', () => { + const { container } = render(