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..cc822216f4e53b 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 @@ -465,6 +465,140 @@ Here's how to migrate: }, ``` +## ButtonGroup + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-group-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/button-group-classes +``` + +### Composed CSS classes + +The CSS classes that composed the following props were deprecated: + +- `orientation` | `variant` and `grouped` +- `color`, `variant` and `grouped` + +Here's how to migrate: + +```diff +-.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedVertical ++.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedText ++.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined ++.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContained ++.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +``` + +```diff + + import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${buttonGroupClasses.groupedHorizontal}`]: { ++ [`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedVertical}`]: { ++ [`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedText}`]: { ++ [`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextHorizontal}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextVertical}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextPrimary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextSecondary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlined}`]: { ++ [`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedHorizontal}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedVertical}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedPrimary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedSecondary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContained}`]: { ++ [`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedHorizontal}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedVertical}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedPrimary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedSecondary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + +``` + ## Chip Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections: diff --git a/docs/pages/material-ui/api/button-group.json b/docs/pages/material-ui/api/button-group.json index 16a90311dfbd13..88121829c7f353 100644 --- a/docs/pages/material-ui/api/button-group.json +++ b/docs/pages/material-ui/api/button-group.json @@ -47,6 +47,18 @@ "import { ButtonGroup } from '@mui/material';" ], "classes": [ + { + "key": "colorPrimary", + "className": "MuiButtonGroup-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiButtonGroup-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`", + "isGlobal": false + }, { "key": "contained", "className": "MuiButtonGroup-contained", @@ -87,102 +99,125 @@ "key": "groupedContained", "className": "MuiButtonGroup-groupedContained", "description": "Styles applied to the children if `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedHorizontal", "className": "MuiButtonGroup-groupedContainedHorizontal", "description": "Styles applied to the children if `variant=\"contained\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedPrimary", "className": "MuiButtonGroup-groupedContainedPrimary", "description": "Styles applied to the children if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedSecondary", "className": "MuiButtonGroup-groupedContainedSecondary", "description": "Styles applied to the children if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedVertical", "className": "MuiButtonGroup-groupedContainedVertical", "description": "Styles applied to the children if `variant=\"contained\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedHorizontal", "className": "MuiButtonGroup-groupedHorizontal", "description": "Styles applied to the children if `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlined", "className": "MuiButtonGroup-groupedOutlined", "description": "Styles applied to the children if `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedHorizontal", "className": "MuiButtonGroup-groupedOutlinedHorizontal", "description": "Styles applied to the children if `variant=\"outlined\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedPrimary", "className": "MuiButtonGroup-groupedOutlinedPrimary", "description": "Styles applied to the children if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedSecondary", "className": "MuiButtonGroup-groupedOutlinedSecondary", "description": "Styles applied to the children if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedVertical", "className": "MuiButtonGroup-groupedOutlinedVertical", "description": "Styles applied to the children if `variant=\"outlined\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedText", "className": "MuiButtonGroup-groupedText", "description": "Styles applied to the children if `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextHorizontal", "className": "MuiButtonGroup-groupedTextHorizontal", "description": "Styles applied to the children if `variant=\"text\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextPrimary", "className": "MuiButtonGroup-groupedTextPrimary", "description": "Styles applied to the children if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextSecondary", "className": "MuiButtonGroup-groupedTextSecondary", "description": "Styles applied to the children if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextVertical", "className": "MuiButtonGroup-groupedTextVertical", "description": "Styles applied to the children if `variant=\"text\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedVertical", "className": "MuiButtonGroup-groupedVertical", "description": "Styles applied to the children if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true + }, + { + "key": "horizontal", + "className": "MuiButtonGroup-horizontal", + "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", "isGlobal": false }, { diff --git a/docs/translations/api-docs/button-group/button-group.json b/docs/translations/api-docs/button-group/button-group.json index a4d761a2f23f79..f3d4332d76ef50 100644 --- a/docs/translations/api-docs/button-group/button-group.json +++ b/docs/translations/api-docs/button-group/button-group.json @@ -30,6 +30,12 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorPrimary": { + "description": "Styles applied to the root element if color="primary"" + }, + "colorSecondary": { + "description": "Styles applied to the root element if color="secondary"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -58,87 +64,109 @@ "groupedContained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\"" + "conditions": "variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and orientation=\"horizontal\"" + "conditions": "variant=\"contained\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and orientation=\"vertical\"" + "conditions": "variant=\"contained\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "orientation=\"horizontal\"" + "conditions": "orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\"" + "conditions": "variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and orientation=\"horizontal\"" + "conditions": "variant=\"outlined\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and orientation=\"vertical\"" + "conditions": "variant=\"outlined\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedText": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\"" + "conditions": "variant=\"text\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and orientation=\"horizontal\"" + "conditions": "variant=\"text\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and orientation=\"vertical\"" + "conditions": "variant=\"text\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-vertical and .MuiButtonGroup-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 .MuiButtonGroup-vertical and .MuiButtonGroup-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}}.", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 3a123187bc9e18..92379a9314b9dc 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -497,6 +497,132 @@ CSS transforms: npx @mui/codemod@latest deprecations/button-classes ``` +#### `button-group-classes` + +JS transforms: + +```diff + import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${buttonGroupClasses.groupedHorizontal}`]: { ++ [`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedVertical}`]: { ++ [`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedText}`]: { ++ [`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextHorizontal}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextVertical}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextPrimary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextSecondary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlined}`]: { ++ [`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedHorizontal}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedVertical}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedPrimary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedSecondary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContained}`]: { ++ [`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedHorizontal}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedVertical}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedPrimary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedSecondary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedVertical ++.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedText ++.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined ++.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContained ++.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +``` + +```bash +npx @mui/codemod@latest deprecations/button-group-classes +``` + #### `chip-classes` JS transforms: diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index a360b241125539..8d6f3aed3aa557 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -3,6 +3,7 @@ import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; import transformButtonClasses from '../button-classes'; +import transformButtonGroupClasses from '../button-group-classes'; import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; @@ -17,6 +18,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); file.source = transformButtonClasses(file, api, options); + file.source = transformButtonGroupClasses(file, api, options); file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); file.source = transformAlertClasses(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 9673a34e2131fd..67d88d6ac1e777 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -3,6 +3,7 @@ const { } = require('../accordion-summary-classes/postcss-plugin'); const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin'); const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); +const { plugin: buttonGroupClassesPlugin } = require('../button-group-classes/postcss-plugin'); const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, @@ -13,6 +14,7 @@ module.exports = { accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, + buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, ], diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js new file mode 100644 index 00000000000000..cffe90a28e2599 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/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\/ButtonGroup$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'buttonGroupClasses' + ) { + 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('MuiButtonGroup-', '') + .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); +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js new file mode 100644 index 00000000000000..f01fec88ccb4a4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/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 './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('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/button-group-classes/index.js b/packages/mui-codemod/src/deprecations/button-group-classes/index.js new file mode 100644 index 00000000000000..61090001f8f759 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/index.js @@ -0,0 +1 @@ +export { default } from './button-group-classes'; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js new file mode 100644 index 00000000000000..1d3ebf4054fead --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js @@ -0,0 +1,103 @@ +const classes = [ + { + deprecatedClass: ' .MuiButtonGroup-groupedHorizontal', + replacementSelector: '.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedVertical', + replacementSelector: '.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedText', + replacementSelector: '.MuiButtonGroup-text > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextHorizontal', + replacementSelector: '.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextVertical', + replacementSelector: '.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextPrimary', + replacementSelector: + '.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextSecondary', + replacementSelector: + '.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlined', + replacementSelector: '.MuiButtonGroup-outlined > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedHorizontal', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedVertical', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedPrimary', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedSecondary', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContained', + replacementSelector: '.MuiButtonGroup-contained > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedHorizontal', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedVertical', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedPrimary', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedSecondary', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated ButtonGroup 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/button-group-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/button-group-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/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/button-group-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css new file mode 100644 index 00000000000000..776ac7444db6e6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css @@ -0,0 +1,67 @@ +.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedText { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContained { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js new file mode 100644 index 00000000000000..a01fc2611a63ac --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + +('& .MuiButtonGroup-groupedHorizontal'); +('& .MuiButtonGroup-groupedVertical'); +('& .MuiButtonGroup-groupedText'); +('& .MuiButtonGroup-groupedTextHorizontal'); +('& .MuiButtonGroup-groupedTextVertical'); +('& .MuiButtonGroup-groupedTextPrimary'); +('& .MuiButtonGroup-groupedTextSecondary'); +('& .MuiButtonGroup-groupedOutlined'); +('& .MuiButtonGroup-groupedOutlinedHorizontal'); +('& .MuiButtonGroup-groupedOutlinedVertical'); +('& .MuiButtonGroup-groupedOutlinedPrimary'); +('& .MuiButtonGroup-groupedOutlinedSecondary'); +('& .MuiButtonGroup-groupedContained'); +('& .MuiButtonGroup-groupedContainedHorizontal'); +('& .MuiButtonGroup-groupedContainedVertical'); +('& .MuiButtonGroup-groupedContainedPrimary'); +('& .MuiButtonGroup-groupedContainedSecondary'); +`& .${buttonGroupClasses.groupedHorizontal}`; +`& .${buttonGroupClasses.groupedVertical}`; +`& .${buttonGroupClasses.groupedText}`; +`& .${buttonGroupClasses.groupedTextHorizontal}`; +`& .${buttonGroupClasses.groupedTextVertical}`; +`& .${buttonGroupClasses.groupedTextPrimary}`; +`& .${buttonGroupClasses.groupedTextSecondary}`; +`& .${buttonGroupClasses.groupedOutlined}`; +`& .${buttonGroupClasses.groupedOutlinedHorizontal}`; +`& .${buttonGroupClasses.groupedOutlinedVertical}`; +`& .${buttonGroupClasses.groupedOutlinedPrimary}`; +`& .${buttonGroupClasses.groupedOutlinedSecondary}`; +`& .${buttonGroupClasses.groupedContained}`; +`& .${buttonGroupClasses.groupedContainedHorizontal}`; +`& .${buttonGroupClasses.groupedContainedVertical}`; +`& .${buttonGroupClasses.groupedContainedPrimary}`; +`& .${buttonGroupClasses.groupedContainedSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css new file mode 100644 index 00000000000000..304f77cbcabb29 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css @@ -0,0 +1,67 @@ +.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js new file mode 100644 index 00000000000000..809d1ecfba446b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + +("&.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 8dc5c7aa6e1855..7153a43d09ded9 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -54,9 +54,10 @@ const useUtilityClasses = (ownerState) => { root: [ 'root', variant, - orientation === 'vertical' && 'vertical', + orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', + `color${capitalize(color)}`, ], grouped: [ 'grouped', diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index bfe0a0f0965543..65387b240d46ef 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -38,6 +38,28 @@ describe('', () => { expect(buttonGroup).not.to.have.class(classes.fullWidth); }); + it('should have colorPrimary, horizontal class', () => { + const { container } = render( + + + , + ); + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorPrimary); + expect(buttonGroup).to.have.class(classes.horizontal); + }); + + it('should have colorSecondary class', () => { + const { container } = render( + + + , + ); + + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorSecondary); + }); + it('should render an outlined button', () => { const { getByRole } = render( diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index de0223228fa273..89f93aaf8d8ad3 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -18,43 +18,83 @@ export interface ButtonGroupClasses { firstButton: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; + /** Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: string; /** Styles applied to the root element if `orientation="vertical"`. */ vertical: string; /** Styles applied to the children. */ grouped: string; - /** Styles applied to the children if `orientation="horizontal"`. */ + /** Styles applied to the root element if `color="primary"` */ + colorPrimary: string; + /** Styles applied to the root element if `color="secondary"` */ + colorSecondary: string; + /** Styles applied to the children if `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#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 [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedVertical: string; - /** Styles applied to the children if `variant="text"`. */ + /** Styles applied to the children if `variant="text"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedText: string; - /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextHorizontal: string; - /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextVertical: string; - /** Styles applied to the children if `variant="text"` and `color="primary"`. */ + /** Styles applied to the children if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextPrimary: string; - /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextSecondary: string; - /** Styles applied to the children if `variant="outlined"`. */ + /** Styles applied to the children if `variant="outlined"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlined: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedHorizontal: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedVertical: string; - /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedPrimary: string; - /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedSecondary: string; - /** Styles applied to the children if `variant="contained"`. */ + /** Styles applied to the children if `variant="contained"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContained: string; - /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedHorizontal: string; - /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedVertical: string; - /** Styles applied to the children if `variant="contained"` and `color="primary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedPrimary: string; - /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; @@ -77,7 +117,10 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'disabled', 'firstButton', 'fullWidth', + 'horizontal', 'vertical', + 'colorPrimary', + 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical',