From 4c50f803cb3508c8ca32b2c2b298c9453b471a9c Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 24 Feb 2024 10:43:18 +0530 Subject: [PATCH 01/18] set up --- docs/pages/material-ui/api/button-group.json | 48 ++++++++++++----- .../api-docs/button-group/button-group.json | 46 +++++++++++----- .../src/ButtonGroup/ButtonGroup.js | 1 + .../src/ButtonGroup/ButtonGroup.test.js | 20 +++++++ .../src/ButtonGroup/buttonGroupClasses.ts | 54 ++++++++++++++----- 5 files changed, 133 insertions(+), 36 deletions(-) diff --git a/docs/pages/material-ui/api/button-group.json b/docs/pages/material-ui/api/button-group.json index 16a90311dfbd13..4e7e737e94c281 100644 --- a/docs/pages/material-ui/api/button-group.json +++ b/docs/pages/material-ui/api/button-group.json @@ -83,6 +83,18 @@ "description": "Styles applied to the children.", "isGlobal": false }, + { + "key": "groupedColorPrimary", + "className": "MuiButtonGroup-groupedColorPrimary", + "description": "Styles applied to the children if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "groupedColorSecondary", + "className": "MuiButtonGroup-groupedColorSecondary", + "description": "Styles applied to the children if `color=\"secondary\"`.", + "isGlobal": false + }, { "key": "groupedContained", "className": "MuiButtonGroup-groupedContained", @@ -93,25 +105,29 @@ "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", @@ -129,25 +145,29 @@ "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", @@ -159,25 +179,29 @@ "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", diff --git a/docs/translations/api-docs/button-group/button-group.json b/docs/translations/api-docs/button-group/button-group.json index a4d761a2f23f79..7eb45f770a04f1 100644 --- a/docs/translations/api-docs/button-group/button-group.json +++ b/docs/translations/api-docs/button-group/button-group.json @@ -55,6 +55,16 @@ "conditions": "fullWidth={true}" }, "grouped": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the children" }, + "groupedColorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the children", + "conditions": "color=\"primary\"" + }, + "groupedColorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the children", + "conditions": "color=\"secondary\"" + }, "groupedContained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", @@ -63,22 +73,26 @@ "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-groupedHorizontal and .MuiButtonGroup-groupedContained 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-groupedContained and .MuiButtonGroup-groupedColorPrimary 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-grouped and .MuiButtonGroup-groupedColorSecondary 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-groupedVertical and .MuiButtonGroup-groupedContained classes instead. How to migrate" }, "groupedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -93,22 +107,26 @@ "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-groupedHorizontal and .MuiButtonGroup-groupedOutlined 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-groupedOutlined and .MuiButtonGroup-groupedColorPrimary 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-grouped and .MuiButtonGroup-groupedColorSecondary 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-groupedVertical and .MuiButtonGroup-groupedOutlined classes instead. How to migrate" }, "groupedText": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -118,22 +136,26 @@ "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-groupedHorizontal and .MuiButtonGroup-groupedText 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-groupedText and .MuiButtonGroup-groupedColorPrimary 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-grouped and .MuiButtonGroup-groupedColorSecondary 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-groupedVertical and .MuiButtonGroup-groupedText classes instead. How to migrate" }, "groupedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 8dc5c7aa6e1855..02e81cc0a90700 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -65,6 +65,7 @@ const useUtilityClasses = (ownerState) => { `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled', + ['primary', 'secondary'] && `grouped${capitalize(color)}`, ], firstButton: ['firstButton'], lastButton: ['lastButton'], diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index bfe0a0f0965543..25e043f92dc459 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -38,6 +38,26 @@ describe('', () => { expect(buttonGroup).not.to.have.class(classes.fullWidth); }); + it('should have groupedColorPrimary classe', () => { + const { getByRole } = render( + + + , + ); + const button = getByRole('button'); + expect(button).to.have.class(classes.groupedColorPrimary); + }); + + it('should have groupedSecondary classe', () => { + const { getByRole } = render( + + + , + ); + const button = getByRole('button'); + expect(button).to.have.class(classes.groupedColorSecondary); + }); + 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..41b9b68a3d675e 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -28,34 +28,62 @@ export interface ButtonGroupClasses { groupedVertical: string; /** Styles applied to the children if `variant="text"`. */ 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-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) 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-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) 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-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextSecondary: string; /** Styles applied to the children if `variant="outlined"`. */ 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-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) 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-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) 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-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedSecondary: string; /** Styles applied to the children if `variant="contained"`. */ 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-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) 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-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) 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-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedSecondary: string; + /** Styles applied to the children if `color="primary"`. */ + groupedColorPrimary: string; + /** Styles applied to the children if `color="secondary"`. */ + groupedColorSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; /** Styles applied to buttons in the middle of the button group. */ @@ -96,6 +124,8 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', + 'groupedColorPrimary', + 'groupedColorSecondary', 'lastButton', 'middleButton', ]); From 3ac21bc408cf99086dcf14e95e11729da4761ba8 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 24 Feb 2024 12:04:37 +0530 Subject: [PATCH 02/18] reset messages --- .../src/ButtonGroup/ButtonGroup.js | 2 +- .../src/ButtonGroup/buttonGroupClasses.ts | 51 ++++++------------- 2 files changed, 16 insertions(+), 37 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 02e81cc0a90700..a1851d21fd51a8 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -54,7 +54,7 @@ const useUtilityClasses = (ownerState) => { root: [ 'root', variant, - orientation === 'vertical' && 'vertical', + orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', ], diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index 41b9b68a3d675e..0730efb558d607 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -18,6 +18,8 @@ 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. */ @@ -28,57 +30,33 @@ export interface ButtonGroupClasses { groupedVertical: string; /** Styles applied to the children if `variant="text"`. */ groupedText: string; - /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. - * @deprecated Combine the [.MuiButtonGroup-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */ groupedTextHorizontal: string; - /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. - * @deprecated Combine the [.MuiButtonGroup-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */ groupedTextVertical: string; - /** Styles applied to the children if `variant="text"` and `color="primary"`. - * @deprecated Combine the [.MuiButtonGroup-groupedText](/material-ui/api/button-group/#button-group-classes-groupedText) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="text"` and `color="primary"`. */ groupedTextPrimary: string; - /** Styles applied to the children if `variant="text"` and `color="secondary"`. - * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ groupedTextSecondary: string; /** Styles applied to the children if `variant="outlined"`. */ groupedOutlined: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. - * @deprecated Combine the [.MuiButtonGroup-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ groupedOutlinedHorizontal: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. - * @deprecated Combine the [.MuiButtonGroup-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */ groupedOutlinedVertical: string; - /** Styles applied to the children if `variant="outlined"` and `color="primary"`. - * @deprecated Combine the [.MuiButtonGroup-groupedOutlined](/material-ui/api/button-group/#button-group-classes-groupedOutlined) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */ groupedOutlinedPrimary: string; - /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. - * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ groupedOutlinedSecondary: string; /** Styles applied to the children if `variant="contained"`. */ groupedContained: string; - /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. - * @deprecated Combine the [.MuiButtonGroup-groupedHorizontal](/material-ui/api/button-group/#button-group-classes-groupedHorizontal) and [.MuiButtonGroup-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ groupedContainedHorizontal: string; - /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. - * @deprecated Combine the [.MuiButtonGroup-groupedVertical](/material-ui/api/button-group/#button-group-classes-groupedVertical) and [.MuiButtonGroup-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */ groupedContainedVertical: string; - /** Styles applied to the children if `variant="contained"` and `color="primary"`. - * @deprecated Combine the [.MuiButtonGroup-groupedContained](/material-ui/api/button-group/#button-group-classes-groupedContained) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedColorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="contained"` and `color="primary"`. */ groupedContainedPrimary: string; - /** Styles applied to the children if `variant="contained"` and `color="secondary"`. - * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedColorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ + /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ groupedContainedSecondary: string; /** Styles applied to the children if `color="primary"`. */ groupedColorPrimary: string; @@ -105,6 +83,7 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'disabled', 'firstButton', 'fullWidth', + 'horizontal', 'vertical', 'grouped', 'groupedHorizontal', From 6b8c0371a27ad2d2ffb6d5020aa85b33cff022b0 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 24 Feb 2024 12:14:26 +0530 Subject: [PATCH 03/18] update deprecated messages --- .../src/ButtonGroup/buttonGroupClasses.ts | 76 ++++++++++++++----- 1 file changed, 57 insertions(+), 19 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index 0730efb558d607..0b925bef060ad9 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -24,43 +24,81 @@ export interface ButtonGroupClasses { vertical: 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 [.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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedSecondary: string; - /** Styles applied to the children if `color="primary"`. */ + /** Styles applied to the children if `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedColorPrimary: string; - /** Styles applied to the children if `color="secondary"`. */ + /** Styles applied to the children if `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedColorSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; From 76e024f6d9b5563cb2077616f5dbe69ce97c38fe Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 24 Feb 2024 12:27:32 +0530 Subject: [PATCH 04/18] rewrite messages --- .../src/ButtonGroup/ButtonGroup.js | 2 +- .../src/ButtonGroup/ButtonGroup.test.js | 15 +++++----- .../src/ButtonGroup/buttonGroupClasses.ts | 28 ++++++++----------- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index a1851d21fd51a8..56b859edcdcbd4 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -57,6 +57,7 @@ const useUtilityClasses = (ownerState) => { orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', + ['primary', 'secondary'] && `color${capitalize(color)}`, ], grouped: [ 'grouped', @@ -65,7 +66,6 @@ const useUtilityClasses = (ownerState) => { `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled', - ['primary', 'secondary'] && `grouped${capitalize(color)}`, ], firstButton: ['firstButton'], lastButton: ['lastButton'], diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index 25e043f92dc459..59660f507c6589 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -39,23 +39,24 @@ describe('', () => { }); it('should have groupedColorPrimary classe', () => { - const { getByRole } = render( + const { container } = render( , ); - const button = getByRole('button'); - expect(button).to.have.class(classes.groupedColorPrimary); + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorPrimary); }); it('should have groupedSecondary classe', () => { - const { getByRole } = render( - + const { container } = render( + , ); - const button = getByRole('button'); - expect(button).to.have.class(classes.groupedColorSecondary); + + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorSecondary); }); it('should render an outlined button', () => { diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index 0b925bef060ad9..89f93aaf8d8ad3 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -24,6 +24,10 @@ export interface ButtonGroupClasses { vertical: string; /** Styles applied to the children. */ grouped: string; + /** 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/) */ @@ -45,11 +49,11 @@ export interface ButtonGroupClasses { */ groupedTextVertical: string; /** 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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"`. - * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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"`. @@ -65,11 +69,11 @@ export interface ButtonGroupClasses { */ groupedOutlinedVertical: string; /** 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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"`. - * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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"`. @@ -85,21 +89,13 @@ export interface ButtonGroupClasses { */ groupedContainedVertical: string; /** 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-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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"`. - * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @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 children if `color="primary"`. - * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorPrimary](/material-ui/api/button-group/#button-group-classes-groupedcolorprimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ - groupedColorPrimary: string; - /** Styles applied to the children if `color="secondary"`. - * @deprecated Combine the [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) and [.MuiButtonGroup-groupedColorSecondary](/material-ui/api/button-group/#button-group-classes-groupedcolorsecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) - */ - groupedColorSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; /** Styles applied to buttons in the middle of the button group. */ @@ -123,6 +119,8 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'fullWidth', 'horizontal', 'vertical', + 'colorPrimary', + 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', @@ -141,8 +139,6 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', - 'groupedColorPrimary', - 'groupedColorSecondary', 'lastButton', 'middleButton', ]); From ece8bd3bbe46619c60eb66138e8cbea7e90d882f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 24 Feb 2024 12:30:37 +0530 Subject: [PATCH 05/18] docs:api --- docs/pages/material-ui/api/button-group.json | 43 ++++++++----- .../api-docs/button-group/button-group.json | 60 ++++++++++--------- 2 files changed, 60 insertions(+), 43 deletions(-) diff --git a/docs/pages/material-ui/api/button-group.json b/docs/pages/material-ui/api/button-group.json index 4e7e737e94c281..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", @@ -83,23 +95,12 @@ "description": "Styles applied to the children.", "isGlobal": false }, - { - "key": "groupedColorPrimary", - "className": "MuiButtonGroup-groupedColorPrimary", - "description": "Styles applied to the children if `color=\"primary\"`.", - "isGlobal": false - }, - { - "key": "groupedColorSecondary", - "className": "MuiButtonGroup-groupedColorSecondary", - "description": "Styles applied to the children if `color=\"secondary\"`.", - "isGlobal": false - }, { "key": "groupedContained", "className": "MuiButtonGroup-groupedContained", "description": "Styles applied to the children if `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedHorizontal", @@ -133,13 +134,15 @@ "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", @@ -173,7 +176,8 @@ "key": "groupedText", "className": "MuiButtonGroup-groupedText", "description": "Styles applied to the children if `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextHorizontal", @@ -207,6 +211,13 @@ "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 7eb45f770a04f1..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", @@ -55,112 +61,112 @@ "conditions": "fullWidth={true}" }, "grouped": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the children" }, - "groupedColorPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the children", - "conditions": "color=\"primary\"" - }, - "groupedColorSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the children", - "conditions": "color=\"secondary\"" - }, "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedHorizontal and .MuiButtonGroup-groupedContained classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedContained and .MuiButtonGroup-groupedColorPrimary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-grouped and .MuiButtonGroup-groupedColorSecondary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedVertical and .MuiButtonGroup-groupedContained classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedHorizontal and .MuiButtonGroup-groupedOutlined classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedOutlined and .MuiButtonGroup-groupedColorPrimary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-grouped and .MuiButtonGroup-groupedColorSecondary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedVertical and .MuiButtonGroup-groupedOutlined classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedHorizontal and .MuiButtonGroup-groupedText classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedText and .MuiButtonGroup-groupedColorPrimary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-grouped and .MuiButtonGroup-groupedColorSecondary classes instead. How to migrate" + "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\"", - "deprecationInfo": "Combine the .MuiButtonGroup-groupedVertical and .MuiButtonGroup-groupedText classes instead. How to migrate" + "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}}.", From 78ec1df5ef7b0154033ed70286215736ba5827eb Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 16:28:28 +0530 Subject: [PATCH 06/18] add new test --- .../mui-material/src/ButtonGroup/ButtonGroup.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index 59660f507c6589..2edd1453e07a14 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -59,6 +59,17 @@ describe('', () => { expect(buttonGroup).to.have.class(classes.colorSecondary); }); + it('should have horizontal classe', () => { + const { container } = render( + + + , + ); + + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.horizontal); + }); + it('should render an outlined button', () => { const { getByRole } = render( From 851ab1658cfaba066ce1b61955b99641bfd0065b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 16:29:13 +0530 Subject: [PATCH 07/18] update test --- .../mui-material/src/ButtonGroup/ButtonGroup.test.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index 2edd1453e07a14..327d5500f70685 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -46,6 +46,7 @@ describe('', () => { ); const buttonGroup = container.firstChild; expect(buttonGroup).to.have.class(classes.colorPrimary); + expect(buttonGroup).to.have.class(classes.horizontal); }); it('should have groupedSecondary classe', () => { @@ -59,17 +60,6 @@ describe('', () => { expect(buttonGroup).to.have.class(classes.colorSecondary); }); - it('should have horizontal classe', () => { - const { container } = render( - - - , - ); - - const buttonGroup = container.firstChild; - expect(buttonGroup).to.have.class(classes.horizontal); - }); - it('should render an outlined button', () => { const { getByRole } = render( From 0cddee61f6e616cc689299cc93f4f247f5a0c0eb Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 16:56:52 +0530 Subject: [PATCH 08/18] add codemods --- .../src/deprecations/all/deprecations-all.js | 3 + .../src/deprecations/all/postcss.config.js | 2 + .../button-group-classes.js | 127 ++++++++++++++++++ .../button-group-classes.test.js | 78 +++++++++++ .../button-group-classes/index.js | 1 + .../button-group-classes/postcss-plugin.js | 103 ++++++++++++++ .../button-group-classes/postcss.config.js | 5 + .../test-cases/actual.css | 67 +++++++++ .../button-group-classes/test-cases/actual.js | 36 +++++ .../test-cases/expected.css | 67 +++++++++ .../test-cases/expected.js | 36 +++++ 11 files changed, 525 insertions(+) create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index a360b241125539..d542e34a74d610 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -3,10 +3,12 @@ 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'; + /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api @@ -17,6 +19,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..5fd3b54f87a204 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..96fa3dd952e40a --- /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..7bdfdb0f090d0a --- /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..aa26037cba0ae7 --- /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-groupedHorizontal"); +("&.MuiButtonGroup-text > .MuiButtonGroup-groupedVertical"); +("&.MuiButtonGroup-text > .MuiButtonGroup-groupedPrimary"); +("&.MuiButtonGroup-text > .MuiButtonGroup-groupedSecondary"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedHorizontal"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedVertical"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedPrimary"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedSecondary"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedHorizontal"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedVertical"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedPrimary"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedSecondary"); +`&.${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}`; From 9aa9c3d29579599e98935426e7b4395f50aed959 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:03:24 +0530 Subject: [PATCH 09/18] prettier --- packages/mui-codemod/src/deprecations/all/deprecations-all.js | 1 - packages/mui-codemod/src/deprecations/all/postcss.config.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index d542e34a74d610..8d6f3aed3aa557 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -8,7 +8,6 @@ import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; - /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 5fd3b54f87a204..67d88d6ac1e777 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -3,7 +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: buttonGroupClassesPlugin } = require('../button-group-classes/postcss-plugin'); const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, From 09589f913a91d5fa0dddb340c4c217232b52d08f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:14:36 +0530 Subject: [PATCH 10/18] update migration guide --- .../migrating-from-deprecated-apis.md | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) 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..c9002394eb998b 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: From 62a87aead36744509b379228fe949a957ba8ad75 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:18:52 +0530 Subject: [PATCH 11/18] update readme --- .../migrating-from-deprecated-apis.md | 2 +- packages/mui-codemod/README.md | 126 ++++++++++++++++++ 2 files changed, 127 insertions(+), 1 deletion(-) 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 c9002394eb998b..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 @@ -478,7 +478,7 @@ npx @mui/codemod@latest deprecations/button-group-classes The CSS classes that composed the following props were deprecated: - `orientation` | `variant` and `grouped` -- `color` , `variant` and `grouped` +- `color`, `variant` and `grouped` Here's how to migrate: diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f527a92d273c2c..c80389f33b1d3e 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: From fe6196126100e0bef9224c306f0d062d29ff4f71 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:21:26 +0530 Subject: [PATCH 12/18] Update ButtonGroup test cases --- packages/mui-material/src/ButtonGroup/ButtonGroup.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index 327d5500f70685..65387b240d46ef 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -38,7 +38,7 @@ describe('', () => { expect(buttonGroup).not.to.have.class(classes.fullWidth); }); - it('should have groupedColorPrimary classe', () => { + it('should have colorPrimary, horizontal class', () => { const { container } = render( @@ -49,7 +49,7 @@ describe('', () => { expect(buttonGroup).to.have.class(classes.horizontal); }); - it('should have groupedSecondary classe', () => { + it('should have colorSecondary class', () => { const { container } = render( From 55c9e10e8a881be231420c47935f55cb9b64cc20 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:47:37 +0530 Subject: [PATCH 13/18] fix issue --- .../button-group-classes.js | 6 ++--- .../test-cases/expected.js | 24 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) 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 index 96fa3dd952e40a..60a07432c46ebc 100644 --- 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 @@ -106,17 +106,17 @@ export default function transformer(file, api, options) { }); }); - const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + const selector = `${replacementSelectorPrefix}${deprecatedClass}`; root .find( j.Literal, - (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + (literal) => typeof literal.value === 'string' && literal.value === selector, ) .forEach((path) => { path.replace( j.literal( path.value.value.replace( - selectorRegex, + selector, `${replacementSelectorPrefix}${replacementSelector}`, ), ), 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 index aa26037cba0ae7..809d1ecfba446b 100644 --- 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 @@ -3,20 +3,20 @@ import { buttonGroupClasses } from '@mui/material/ButtonGroup'; ("&.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); ("&.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); ("&.MuiButtonGroup-text > .MuiButtonGroup-grouped"); -("&.MuiButtonGroup-text > .MuiButtonGroup-groupedHorizontal"); -("&.MuiButtonGroup-text > .MuiButtonGroup-groupedVertical"); -("&.MuiButtonGroup-text > .MuiButtonGroup-groupedPrimary"); -("&.MuiButtonGroup-text > .MuiButtonGroup-groupedSecondary"); +("&.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-groupedHorizontal"); -("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedVertical"); -("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedPrimary"); -("&.MuiButtonGroup-outlined > .MuiButtonGroup-groupedSecondary"); +("&.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-groupedHorizontal"); -("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedVertical"); -("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedPrimary"); -("&.MuiButtonGroup-contained > .MuiButtonGroup-groupedSecondary"); +("&.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}`; From bbf77326f05c6a9e7039ad26e24c516e79905ddf Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 25 Feb 2024 17:59:11 +0530 Subject: [PATCH 14/18] prettier --- .../button-group-classes/button-group-classes.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 index 60a07432c46ebc..b64f856fdc07cb 100644 --- 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 @@ -108,10 +108,7 @@ export default function transformer(file, api, options) { const selector = `${replacementSelectorPrefix}${deprecatedClass}`; root - .find( - j.Literal, - (literal) => typeof literal.value === 'string' && literal.value === selector, - ) + .find(j.Literal, (literal) => typeof literal.value === 'string' && literal.value === selector) .forEach((path) => { path.replace( j.literal( From 0a6182b58fb2bb140f55b3b6369f6bf83414b2ab Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 29 Feb 2024 13:06:38 +0530 Subject: [PATCH 15/18] use regex --- .../button-group-classes.js | 9 +++-- .../button-group-classes.test.js | 2 +- .../test-cases/expected.js | 34 +++++++++---------- 3 files changed, 24 insertions(+), 21 deletions(-) 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 index b64f856fdc07cb..6438e578da576a 100644 --- 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 @@ -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}`, ), ), 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 index f01fec88ccb4a4..95bf4d84cf9839 100644 --- 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 @@ -20,7 +20,7 @@ describe('@mui/codemod', () => { const actual = jsTransform( { source: read('./test-cases/actual.js') }, { jscodeshift }, - { printOptions: { quote: 'double', trailingComma: true } }, + { printOptions: { quote: 'single', trailingComma: true } }, ); const expected = read('./test-cases/expected.js'); 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 index 809d1ecfba446b..06e104ac11e5f1 100644 --- 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 @@ -1,22 +1,22 @@ 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"); +('&.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}`; From 67e475f6b68ec100cafb1aebfff41e883a0c2b7f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 11 Mar 2024 11:29:21 +0530 Subject: [PATCH 16/18] fix --- .../button-group-classes.js | 2 +- .../button-group-classes.test.js | 2 +- .../test-cases/expected.js | 34 +++++++++---------- 3 files changed, 19 insertions(+), 19 deletions(-) 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 index 6438e578da576a..cffe90a28e2599 100644 --- 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 @@ -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, 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 index 95bf4d84cf9839..f01fec88ccb4a4 100644 --- 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 @@ -20,7 +20,7 @@ describe('@mui/codemod', () => { const actual = jsTransform( { source: read('./test-cases/actual.js') }, { jscodeshift }, - { printOptions: { quote: 'single', trailingComma: true } }, + { printOptions: { quote: 'double', trailingComma: true } }, ); const expected = read('./test-cases/expected.js'); 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 index 06e104ac11e5f1..809d1ecfba446b 100644 --- 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 @@ -1,22 +1,22 @@ 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'); +("&.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}`; From 70886d66d0b37bd7d482437e964597f3ef2d9856 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 13 Mar 2024 08:55:17 +0530 Subject: [PATCH 17/18] regex fix --- .../src/deprecations/button-group-classes/postcss-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 7bdfdb0f090d0a..1d3ebf4054fead 100644 --- a/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js @@ -86,7 +86,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); From 8816db3dddc8e337eba32448517d3c357dfc8394 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 13 Mar 2024 08:56:47 +0530 Subject: [PATCH 18/18] color fix --- packages/mui-material/src/ButtonGroup/ButtonGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 56b859edcdcbd4..7153a43d09ded9 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -57,7 +57,7 @@ const useUtilityClasses = (ownerState) => { orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', - ['primary', 'secondary'] && `color${capitalize(color)}`, + `color${capitalize(color)}`, ], grouped: [ 'grouped',