[material-ui][ToggleButtonGroup] Deprecate composed classes

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -954,6 +954,46 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+## 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 <path>
+```
+
+### 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',
+        },
+   },
+  },
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

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
     },
     {

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": "<code>orientation=\"horizontal\"</code>"
+      "conditions": "<code>orientation=\"horizontal\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal\">.MuiToggleButtonGroup-horizontal</a> and <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped\">.MuiToggleButtonGroup-grouped</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "groupedVertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the children",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+      "conditions": "<code>orientation=\"vertical\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical\">.MuiToggleButtonGroup-vertical</a> and <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped\">.MuiToggleButtonGroup-grouped</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
+    },
+    "horizontal": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
     },
     "lastButton": {
       "description": "Styles applied to {{nodeName}}.",

packages/mui-codemod/README.md

@@ -948,6 +948,43 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `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 <path>
+```
+
 #### `step-label-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -7,6 +7,7 @@ import transformButtonGroupClasses from '../button-group-classes';
 import transformChipClasses from '../chip-classes';
 import transformPaginationItemClasses from '../pagination-item-classes';
 import transformAlertClasses from '../alert-classes';
+import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformStepLabelProps from '../step-label-props';
 import transformBackdropProps from '../backdrop-props';
 
@@ -24,6 +25,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);
   file.source = transformStepLabelProps(file, api, options);
   file.source = transformBackdropProps(file, api, options);
 

packages/mui-codemod/src/deprecations/all/postcss.config.js

@@ -8,6 +8,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: [
@@ -17,5 +20,6 @@ module.exports = {
     buttonGroupClassesPlugin,
     chipClassesPlugin,
     paginationItemClassesPlugin,
+    toggleButtonGroupClassesPlugin,
   ],
 };

packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js

@@ -0,0 +1 @@
+export { default } from './toggle-button-group-classes';

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,
+};

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],
+};

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;
+}

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}`;

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;
+}

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}`;

packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js

@@ -0,0 +1,127 @@
+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 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);
+}