From 470eb4b5004ca22d6263439d3dc407794456b094 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 Feb 2024 11:30:21 +0530 Subject: [PATCH 1/6] set-up --- .../src/ToggleButtonGroup/ToggleButtonGroup.js | 2 +- .../src/ToggleButtonGroup/ToggleButtonGroup.test.js | 9 +++++++++ .../src/ToggleButtonGroup/toggleButtonGroupClasses.ts | 11 +++++++++-- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js index 799cf46053b912..349b6ceac5bf8c 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -19,7 +19,7 @@ const useUtilityClasses = (ownerState) => { const { classes, orientation, fullWidth, disabled } = ownerState; const slots = { - root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'], + root: ['root', 'vertical', fullWidth && 'fullWidth'], grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'], firstButton: ['firstButton'], lastButton: ['lastButton'], diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js index 142ffc45a3ef5e..385ae149f5d6a7 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js @@ -39,6 +39,15 @@ describe('', () => { expect(getByRole('button')).to.have.class('MuiToggleButtonGroup-groupedVertical'); }); + it('should have horizontal class', () => { + const { getByRole } = render( + + 1 + , + ); + expect(getByRole('group')).to.have.class(classes.horizontal); + }); + it('should disable all ToggleButton if disabled prop is passed', () => { render( diff --git a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts b/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts index 75cf854a4d59fc..d4a133d61996f7 100644 --- a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts +++ b/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts @@ -4,15 +4,21 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass'; export interface ToggleButtonGroupClasses { /** Styles applied to the root element. */ root: string; + /** Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: string; /** Styles applied to the root element if `orientation="vertical"`. */ vertical: string; /** State class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the children. */ grouped: string; - /** Styles applied to the children if `orientation="horizontal"`. */ + /** Styles applied to the children if `orientation="horizontal"`. + * @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedHorizontal: string; - /** Styles applied to the children if `orientation="vertical"`. */ + /** Styles applied to the children if `orientation="vertical"`. + * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedVertical: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; @@ -35,6 +41,7 @@ const toggleButtonGroupClasses: ToggleButtonGroupClasses = generateUtilityClasse [ 'root', 'selected', + 'horizontal', 'vertical', 'disabled', 'grouped', From 79baed45e9f1b7d4c72299ec63682c2788217505 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 Feb 2024 12:08:38 +0530 Subject: [PATCH 2/6] set-up --- .../migrating-from-deprecated-apis.md | 41 ++++++ packages/mui-codemod/README.md | 37 ++++++ .../src/deprecations/all/deprecations-all.js | 2 + .../src/deprecations/all/postcss.config.js | 4 + .../toggle-button-group-classes/index.js | 1 + .../postcss-plugin.js | 33 +++++ .../postcss.config.js | 5 + .../test-cases/actual.css | 7 + .../test-cases/actual.js | 6 + .../test-cases/expected.css | 7 + .../test-cases/expected.js | 6 + .../toggle-button-group-classes.js | 124 ++++++++++++++++++ .../toggle-button-group-classes.test.js | 78 +++++++++++ 13 files changed, 351 insertions(+) create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js create mode 100644 packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.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 a6c761d92ddf4b..f2f170419a09ca 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 @@ -757,3 +757,44 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`: + slotProps={{ track: { testid: 'test-id' } }} /> ``` + +## ToggleButtonGroup + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#toggle-button-group-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/toggle-button-group-classes +``` + +### Composed CSS classes + +The CSS classes composing the `orientation` prop value and `grouped` CSS class have been removed. + +Here's how to migrate: + +```diff +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped +``` + +```diff + + import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: { ++ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${toggleButtonGroupClasses.groupedVertical}`]: { ++ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f527a92d273c2c..787a17b4ce37b3 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -783,6 +783,43 @@ npx @mui/codemod@latest deprecations/pagination-item-classes npx @mui/codemod@latest deprecations/slider-props ``` +#### `toggle-button-group-classes` + +JS transforms: + +```diff + import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + + MuiToggleButtonGroup: { + styleOverrides: { + root: { +- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: { ++ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${toggleButtonGroupClasses.groupedVertical}`]: { ++ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped + /> +``` + +```bash +npx @mui/codemod@latest deprecations/toggle-button-group-classes +``` + ### v5.0.0 #### `base-use-named-exports` diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index a360b241125539..2b3ad46ccd75b1 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -6,6 +6,7 @@ import transformButtonClasses from '../button-classes'; import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; +import transformToggleButtonGroupClasses from '../toggle-button-group-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -20,6 +21,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); file.source = transformAlertClasses(file, api, options); + file.source = transformToggleButtonGroupClasses(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 9673a34e2131fd..5bab2401007863 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -7,6 +7,9 @@ const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); +const { + plugin: toggleButtonGroupClassesPlugin, +} = require('../toggle-button-group-classes/postcss-plugin'); module.exports = { plugins: [ @@ -15,5 +18,6 @@ module.exports = { buttonClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, + toggleButtonGroupClassesPlugin, ], }; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js new file mode 100644 index 00000000000000..652d00fe9b9c62 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js @@ -0,0 +1 @@ +export { default } from './toggle-button-group-classes'; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js new file mode 100644 index 00000000000000..0674ef6f031540 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js @@ -0,0 +1,33 @@ +const classes = [ + { + deprecatedClass: ' .MuiToggleButtonGroup-groupedHorizontal', + replacementSelector: '.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiToggleButtonGroup-groupedVertical', + replacementSelector: '.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated ToggleButtonGroup 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/toggle-button-group-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-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/toggle-button-group-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2e856c77e5cb7b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.css @@ -0,0 +1,7 @@ +.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal { + color: red; +} + +.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js new file mode 100644 index 00000000000000..eed30d616d7210 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + +('& .MuiToggleButtonGroup-groupedHorizontal'); +('& .MuiToggleButtonGroup-groupedVertical'); +`& .${toggleButtonGroupClasses.groupedHorizontal}`; +`& .${toggleButtonGroupClasses.groupedVertical}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css new file mode 100644 index 00000000000000..0a1721efbc7eec --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css @@ -0,0 +1,7 @@ +.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped { + color: red; +} + +.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js new file mode 100644 index 00000000000000..b2030174207157 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + +("&.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped"); +("&.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped"); +`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`; +`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js new file mode 100644 index 00000000000000..78b23e1d850771 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js @@ -0,0 +1,124 @@ +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\/ToggleButtonGroup$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'toggleButtonGroupClasses' + ) { + 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('MuiToggleButtonGroup-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .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 (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, 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 selector = `${replacementSelectorPrefix}${deprecatedClass}`; + root + .find(j.Literal, (literal) => typeof literal.value === 'string' && literal.value === selector) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selector, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js new file mode 100644 index 00000000000000..9769a168e9f86c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-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 './toggle-button-group-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', + ); + }); + }); + }); + }); +}); From a4837cc75ce9b3949ce5572e380d7b297983219f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 Feb 2024 12:10:05 +0530 Subject: [PATCH 3/6] docs:api --- docs/pages/material-ui/api/toggle-button-group.json | 10 +++++++++- .../toggle-button-group/toggle-button-group.json | 11 +++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/pages/material-ui/api/toggle-button-group.json b/docs/pages/material-ui/api/toggle-button-group.json index e3d1c10eefb45c..0ce12e51e361b8 100644 --- a/docs/pages/material-ui/api/toggle-button-group.json +++ b/docs/pages/material-ui/api/toggle-button-group.json @@ -73,12 +73,20 @@ "key": "groupedHorizontal", "className": "MuiToggleButtonGroup-groupedHorizontal", "description": "Styles applied to the children if `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedVertical", "className": "MuiToggleButtonGroup-groupedVertical", "description": "Styles applied to the children if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true + }, + { + "key": "horizontal", + "className": "MuiToggleButtonGroup-horizontal", + "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", "isGlobal": false }, { diff --git a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json index 21eccbcd92b660..a507c96bf9f224 100644 --- a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json +++ b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json @@ -50,12 +50,19 @@ "groupedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "orientation=\"horizontal\"" + "conditions": "orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiToggleButtonGroup-horizontal and .MuiToggleButtonGroup-grouped classes instead. How to migrate" }, "groupedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "orientation=\"vertical\"" + "conditions": "orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiToggleButtonGroup-vertical and .MuiToggleButtonGroup-grouped classes instead. How to migrate" + }, + "horizontal": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "orientation=\"horizontal\"" }, "lastButton": { "description": "Styles applied to {{nodeName}}.", From 1af2a9436f10cc5d839ed7b9234d3e3c454d8a98 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 29 Feb 2024 11:22:38 +0530 Subject: [PATCH 4/6] fix test --- .../mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js index 349b6ceac5bf8c..34c8a1393d6ca0 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -19,7 +19,7 @@ const useUtilityClasses = (ownerState) => { const { classes, orientation, fullWidth, disabled } = ownerState; const slots = { - root: ['root', 'vertical', fullWidth && 'fullWidth'], + root: ['root', orientation, fullWidth && 'fullWidth'], grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'], firstButton: ['firstButton'], lastButton: ['lastButton'], From 5a82e408b830f779e24182a05c32c2d7937c8049 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 29 Feb 2024 11:34:11 +0530 Subject: [PATCH 5/6] use regex --- .../toggle-button-group-classes.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js index 78b23e1d850771..6d824b3c67271f 100644 --- a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js @@ -106,14 +106,17 @@ export default function transformer(file, api, options) { }); }); - const selector = `${replacementSelectorPrefix}${deprecatedClass}`; + const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}(.|$)`); root - .find(j.Literal, (literal) => typeof literal.value === 'string' && literal.value === selector) + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) .forEach((path) => { path.replace( j.literal( path.value.value.replace( - selector, + selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`, ), ), From 5358ad0ba11583be69b7943d260726e8af9db8b2 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Apr 2024 10:19:19 +0530 Subject: [PATCH 6/6] fix regex --- .../deprecations/toggle-button-group-classes/postcss-plugin.js | 2 +- .../toggle-button-group-classes/toggle-button-group-classes.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js index 0674ef6f031540..fc59a4a1c8b29a 100644 --- a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js @@ -16,7 +16,7 @@ const plugin = () => { const { selector } = rule; classes.forEach(({ deprecatedClass, replacementSelector }) => { - const selectorRegex = new RegExp(`${deprecatedClass}`); + const selectorRegex = new RegExp(`${deprecatedClass}$`); if (selector.match(selectorRegex)) { rule.selector = selector.replace(selectorRegex, replacementSelector); diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js index 6d824b3c67271f..60bec34f754946 100644 --- a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js @@ -106,7 +106,7 @@ export default function transformer(file, api, options) { }); }); - const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}(.|$)`); + const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`); root .find( j.Literal,