From b5286bb261cf173bfd623d36a23a2a5896658da6 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 18 Jan 2024 18:22:47 +0530 Subject: [PATCH 01/25] deprecate classes for v6 --- docs/pages/material-ui/api/button.json | 141 +++++++++---- .../pages/material-ui/api/loading-button.json | 141 +++++++++---- docs/translations/api-docs/button/button.json | 130 ++++++++---- .../loading-button/loading-button.json | 130 ++++++++---- packages/mui-material/src/Button/Button.js | 7 +- .../mui-material/src/Button/Button.test.js | 49 +++++ .../mui-material/src/Button/buttonClasses.ts | 186 ++++++++++++++---- 7 files changed, 616 insertions(+), 168 deletions(-) diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json index 24f3c460048143..04a03e76d983d5 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -46,12 +46,48 @@ "import { Button } from '@mui/material';" ], "classes": [ + { + "key": "colorError", + "className": "MuiButton-colorError", + "description": "Styles applied to the root element if `color=\"error\"`.", + "isGlobal": false + }, + { + "key": "colorInfo", + "className": "MuiButton-colorInfo", + "description": "Styles applied to the root element if `color=\"info\"`.", + "isGlobal": false + }, { "key": "colorInherit", "className": "MuiButton-colorInherit", "description": "Styles applied to the root element if `color=\"inherit\"`.", "isGlobal": false }, + { + "key": "colorPrimary", + "className": "MuiButton-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiButton-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`.", + "isGlobal": false + }, + { + "key": "colorSuccess", + "className": "MuiButton-colorSuccess", + "description": "Styles applied to the root element if `color=\"success\"`.", + "isGlobal": false + }, + { + "key": "colorWarning", + "className": "MuiButton-colorWarning", + "description": "Styles applied to the root element if `color=\"warning\"`.", + "isGlobal": false + }, { "key": "contained", "className": "MuiButton-contained", @@ -62,61 +98,71 @@ "key": "containedError", "className": "MuiButton-containedError", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInfo", "className": "MuiButton-containedInfo", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInherit", "className": "MuiButton-containedInherit", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedPrimary", "className": "MuiButton-containedPrimary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSecondary", "className": "MuiButton-containedSecondary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeLarge", "className": "MuiButton-containedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeMedium", "className": "MuiButton-containedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeSmall", "className": "MuiButton-containedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSuccess", "className": "MuiButton-containedSuccess", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedWarning", "className": "MuiButton-containedWarning", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -148,23 +194,32 @@ "description": "Styles applied to the root element if `fullWidth={true}`.", "isGlobal": false }, + { + "key": "icon", + "className": "MuiButton-icon", + "description": "Styles applied to the icon element if supplied", + "isGlobal": false + }, { "key": "iconSizeLarge", "className": "MuiButton-iconSizeLarge", "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeMedium", "className": "MuiButton-iconSizeMedium", "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeSmall", "className": "MuiButton-iconSizeSmall", "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlined", @@ -176,61 +231,71 @@ "key": "outlinedError", "className": "MuiButton-outlinedError", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInfo", "className": "MuiButton-outlinedInfo", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInherit", "className": "MuiButton-outlinedInherit", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedPrimary", "className": "MuiButton-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiButton-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeLarge", "className": "MuiButton-outlinedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeMedium", "className": "MuiButton-outlinedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeSmall", "className": "MuiButton-outlinedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSuccess", "className": "MuiButton-outlinedSuccess", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedWarning", "className": "MuiButton-outlinedWarning", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", @@ -272,61 +337,71 @@ "key": "textError", "className": "MuiButton-textError", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInfo", "className": "MuiButton-textInfo", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInherit", "className": "MuiButton-textInherit", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textPrimary", "className": "MuiButton-textPrimary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSecondary", "className": "MuiButton-textSecondary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeLarge", "className": "MuiButton-textSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeMedium", "className": "MuiButton-textSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeSmall", "className": "MuiButton-textSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSuccess", "className": "MuiButton-textSuccess", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textWarning", "className": "MuiButton-textWarning", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/pages/material-ui/api/loading-button.json b/docs/pages/material-ui/api/loading-button.json index cd04eeaa8bd641..555074c1ad71b8 100644 --- a/docs/pages/material-ui/api/loading-button.json +++ b/docs/pages/material-ui/api/loading-button.json @@ -36,12 +36,48 @@ "import { LoadingButton } from '@mui/lab';" ], "classes": [ + { + "key": "colorError", + "className": "MuiLoadingButton-colorError", + "description": "Styles applied to the root element if `color=\"error\"`.", + "isGlobal": false + }, + { + "key": "colorInfo", + "className": "MuiLoadingButton-colorInfo", + "description": "Styles applied to the root element if `color=\"info\"`.", + "isGlobal": false + }, { "key": "colorInherit", "className": "MuiLoadingButton-colorInherit", "description": "Styles applied to the root element if `color=\"inherit\"`.", "isGlobal": false }, + { + "key": "colorPrimary", + "className": "MuiLoadingButton-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiLoadingButton-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`.", + "isGlobal": false + }, + { + "key": "colorSuccess", + "className": "MuiLoadingButton-colorSuccess", + "description": "Styles applied to the root element if `color=\"success\"`.", + "isGlobal": false + }, + { + "key": "colorWarning", + "className": "MuiLoadingButton-colorWarning", + "description": "Styles applied to the root element if `color=\"warning\"`.", + "isGlobal": false + }, { "key": "contained", "className": "MuiLoadingButton-contained", @@ -52,61 +88,71 @@ "key": "containedError", "className": "MuiLoadingButton-containedError", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInfo", "className": "MuiLoadingButton-containedInfo", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInherit", "className": "MuiLoadingButton-containedInherit", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedPrimary", "className": "MuiLoadingButton-containedPrimary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSecondary", "className": "MuiLoadingButton-containedSecondary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeLarge", "className": "MuiLoadingButton-containedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeMedium", "className": "MuiLoadingButton-containedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeSmall", "className": "MuiLoadingButton-containedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSuccess", "className": "MuiLoadingButton-containedSuccess", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedWarning", "className": "MuiLoadingButton-containedWarning", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -144,23 +190,32 @@ "description": "Styles applied to the root element if `fullWidth={true}`.", "isGlobal": false }, + { + "key": "icon", + "className": "MuiLoadingButton-icon", + "description": "Styles applied to the icon element if supplied", + "isGlobal": false + }, { "key": "iconSizeLarge", "className": "MuiLoadingButton-iconSizeLarge", "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeMedium", "className": "MuiLoadingButton-iconSizeMedium", "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeSmall", "className": "MuiLoadingButton-iconSizeSmall", "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "loading", @@ -202,61 +257,71 @@ "key": "outlinedError", "className": "MuiLoadingButton-outlinedError", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInfo", "className": "MuiLoadingButton-outlinedInfo", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInherit", "className": "MuiLoadingButton-outlinedInherit", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedPrimary", "className": "MuiLoadingButton-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiLoadingButton-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeLarge", "className": "MuiLoadingButton-outlinedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeMedium", "className": "MuiLoadingButton-outlinedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeSmall", "className": "MuiLoadingButton-outlinedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSuccess", "className": "MuiLoadingButton-outlinedSuccess", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedWarning", "className": "MuiLoadingButton-outlinedWarning", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", @@ -304,61 +369,71 @@ "key": "textError", "className": "MuiLoadingButton-textError", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInfo", "className": "MuiLoadingButton-textInfo", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInherit", "className": "MuiLoadingButton-textInherit", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textPrimary", "className": "MuiLoadingButton-textPrimary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSecondary", "className": "MuiLoadingButton-textSecondary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeLarge", "className": "MuiLoadingButton-textSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeMedium", "className": "MuiLoadingButton-textSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeSmall", "className": "MuiLoadingButton-textSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSuccess", "className": "MuiLoadingButton-textSuccess", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textWarning", "className": "MuiLoadingButton-textWarning", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 9f40cac1d4db52..73ad9ab37554c9 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -34,11 +34,41 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "color=\"inherit\"" }, + "colorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"secondary\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -47,52 +77,62 @@ "containedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" + "conditions": "variant=\"contained\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead." }, "containedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" + "conditions": "variant=\"contained\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead." }, "containedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"" + "conditions": "variant=\"contained\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead." }, "containedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead." }, "containedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead." }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"" + "conditions": "size=\"large\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead." }, "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead." }, "containedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"small\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead." }, "containedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" + "conditions": "variant=\"contained\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead." }, "containedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" + "conditions": "variant=\"contained\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead." }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -119,20 +159,24 @@ "nodeName": "the root element", "conditions": "fullWidth={true}" }, + "icon": { "description": "Styles applied to the icon element if supplied" }, "iconSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"" + "conditions": "supplied and size=\"large\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead." }, "iconSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"" + "conditions": "supplied and size=\"medium\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead." }, "iconSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"" + "conditions": "supplied and size=\"small\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead." }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -142,52 +186,62 @@ "outlinedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" + "conditions": "variant=\"outlined\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead." }, "outlinedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" + "conditions": "variant=\"outlined\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead." }, "outlinedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"" + "conditions": "variant=\"outlined\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead." }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead." }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead." }, "outlinedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"" + "conditions": "size=\"large\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead." }, "outlinedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"" + "conditions": "size=\"medium\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead." }, "outlinedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"" + "conditions": "size=\"small\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead." }, "outlinedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" + "conditions": "variant=\"outlined\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead." }, "outlinedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" + "conditions": "variant=\"outlined\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead." }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { @@ -218,52 +272,62 @@ "textError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" + "conditions": "variant=\"text\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead." }, "textInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" + "conditions": "variant=\"text\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead." }, "textInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"" + "conditions": "variant=\"text\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead." }, "textPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead." }, "textSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"" + "conditions": "size=\"large\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead." }, "textSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"" + "conditions": "size=\"medium\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead." }, "textSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"" + "conditions": "size=\"small\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead." }, "textSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" + "conditions": "variant=\"text\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead." }, "textWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" + "conditions": "variant=\"text\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead." } } } diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 754eada8502299..9b270bf6ef3c01 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -19,11 +19,41 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "color=\"inherit\"" }, + "colorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"secondary\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -32,52 +62,62 @@ "containedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" + "conditions": "variant=\"contained\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead." }, "containedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" + "conditions": "variant=\"contained\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead." }, "containedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"" + "conditions": "variant=\"contained\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead." }, "containedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead." }, "containedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead." }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"" + "conditions": "size=\"large\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead." }, "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead." }, "containedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"small\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead." }, "containedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" + "conditions": "variant=\"contained\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead." }, "containedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" + "conditions": "variant=\"contained\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead." }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -109,20 +149,24 @@ "nodeName": "the root element", "conditions": "fullWidth={true}" }, + "icon": { "description": "Styles applied to the icon element if supplied" }, "iconSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"" + "conditions": "supplied and size=\"large\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead." }, "iconSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"" + "conditions": "supplied and size=\"medium\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead." }, "iconSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"" + "conditions": "supplied and size=\"small\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead." }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -156,52 +200,62 @@ "outlinedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" + "conditions": "variant=\"outlined\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead." }, "outlinedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" + "conditions": "variant=\"outlined\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead." }, "outlinedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"" + "conditions": "variant=\"outlined\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead." }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead." }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead." }, "outlinedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"" + "conditions": "size=\"large\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead." }, "outlinedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"" + "conditions": "size=\"medium\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead." }, "outlinedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"" + "conditions": "size=\"small\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead." }, "outlinedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" + "conditions": "variant=\"outlined\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead." }, "outlinedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" + "conditions": "variant=\"outlined\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead." }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { @@ -237,52 +291,62 @@ "textError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" + "conditions": "variant=\"text\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead." }, "textInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" + "conditions": "variant=\"text\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead." }, "textInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"" + "conditions": "variant=\"text\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead." }, "textPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead." }, "textSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"" + "conditions": "size=\"large\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead." }, "textSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"" + "conditions": "size=\"medium\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead." }, "textSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"" + "conditions": "size=\"small\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead." }, "textSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" + "conditions": "variant=\"text\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead." }, "textWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" + "conditions": "variant=\"text\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead." } } } diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index d924ad68d38966..8b1dd891548c5d 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -23,13 +23,14 @@ const useUtilityClasses = (ownerState) => { `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, - color === 'inherit' && 'colorInherit', + ['primary', 'secondary', 'error', 'info', 'success', 'warning', 'inherit'].includes(color) && + `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', ], label: ['label'], - startIcon: ['startIcon', `iconSize${capitalize(size)}`], - endIcon: ['endIcon', `iconSize${capitalize(size)}`], + startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`], + endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`], }; const composedClasses = composeClasses(slots, getButtonUtilityClass, classes); diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index 76381c29cec6f8..34d2d303b548ae 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -49,6 +49,55 @@ describe(', + ); + const button = getByRole('button'); + const startIcon = button.querySelector(`.${classes.startIcon}`); + const endIcon = button.querySelector(`.${classes.endIcon}`); + expect(startIcon).to.have.class(classes.icon); + expect(endIcon).to.have.class(classes.icon); + }); + + it('should add the appropriate color class to root element based on color prop', () => { + const { getByTestId } = render( + + + + + + + + + , + ); + + expect(getByTestId('color-inherit')).to.have.class(classes.colorInherit); + expect(getByTestId('color-primary')).to.have.class(classes.colorPrimary); + expect(getByTestId('color-secondary')).to.have.class(classes.colorSecondary); + expect(getByTestId('color-success')).to.have.class(classes.colorSuccess); + expect(getByTestId('color-error')).to.have.class(classes.colorError); + expect(getByTestId('color-info')).to.have.class(classes.colorInfo); + expect(getByTestId('color-warning')).to.have.class(classes.colorWarning); + }); + it('can render a text primary button', () => { const { getByRole } = render(); const button = getByRole('button'); diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts index 5348573ee78d0d..fe45364ee650b9 100644 --- a/packages/mui-material/src/Button/buttonClasses.ts +++ b/packages/mui-material/src/Button/buttonClasses.ts @@ -6,51 +6,114 @@ export interface ButtonClasses { root: string; /** Styles applied to the root element if `variant="text"`. */ text: string; - /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="text"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. + */ textInherit: string; - /** Styles applied to the root element if `variant="text"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. + */ textPrimary: string; - /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. + */ textSecondary: string; - /** Styles applied to the root element if `variant="text"` and `color="success"`. */ + /** Styles applied to the root element if `variant="text"` and `color="success"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. + */ textSuccess: string; - /** Styles applied to the root element if `variant="text"` and `color="error"`. */ + /** Styles applied to the root element if `variant="text"` and `color="error"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. + */ textError: string; - /** Styles applied to the root element if `variant="text"` and `color="info"`. */ + /** Styles applied to the root element if `variant="text"` and `color="info"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. + */ textInfo: string; - /** Styles applied to the root element if `variant="text"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="text"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) + * and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. + */ textWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; - /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. + */ outlinedInherit: string; - /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. + */ outlinedPrimary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. + */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="success"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. + */ outlinedSuccess: string; - /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="error"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. + */ outlinedError: string; - /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="info"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. + */ outlinedInfo: string; - /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) + * and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. + */ outlinedWarning: string; /** Styles applied to the root element if `variant="contained"`. */ contained: string; - /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. + */ containedInherit: string; - /** Styles applied to the root element if `variant="contained"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. + */ containedPrimary: string; - /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. + */ containedSecondary: string; - /** Styles applied to the root element if `variant="contained"` and `color="success"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="success"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. + */ containedSuccess: string; - /** Styles applied to the root element if `variant="contained"` and `color="info"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="info"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. + */ containedInfo: string; - /** Styles applied to the root element if `variant="contained"` and `color="error"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="error"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. + */ containedError: string; - /** Styles applied to the root element if `variant="contained"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) + * and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. + */ containedWarning: string; /** Styles applied to the root element if `disableElevation={true}`. */ disableElevation: string; @@ -60,23 +123,50 @@ export interface ButtonClasses { disabled: string; /** Styles applied to the root element if `color="inherit"`. */ colorInherit: string; - /** Styles applied to the root element if `size="small"` and `variant="text"`. */ + /** Styles applied to the root element if `size="small"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) + * and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. + */ textSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="text"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) + * and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. + */ textSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="text"`. */ + /** Styles applied to the root element if `size="large"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) + * and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. + */ textSizeLarge: string; - /** Styles applied to the root element if `size="small"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="small"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) + * and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. + */ outlinedSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) + * and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. + */ outlinedSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="large"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) + * and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. + */ outlinedSizeLarge: string; - /** Styles applied to the root element if `size="small"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="small"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) + * and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. + */ containedSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) + * and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. + */ containedSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="large"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) + * and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. + */ containedSizeLarge: string; /** Styles applied to the root element if `size="small"`. */ sizeSmall: string; @@ -86,16 +176,39 @@ export interface ButtonClasses { sizeLarge: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; + /** Styles applied to the icon element if supplied */ + icon: string; /** Styles applied to the startIcon element if supplied. */ startIcon: string; /** Styles applied to the endIcon element if supplied. */ endIcon: string; - /** Styles applied to the icon element if supplied and `size="small"`. */ + /** Styles applied to the icon element if supplied and `size="small"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) + * and [.MuiButtonSizeSmall](/material-ui/api/button/#button-classes-sizeSmall) classes instead. + */ iconSizeSmall: string; - /** Styles applied to the icon element if supplied and `size="medium"`. */ + /** Styles applied to the icon element if supplied and `size="medium"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) + * and [.MuiButtonSizeMedium](/material-ui/api/button/#button-classes-sizeMedium) classes instead. + */ iconSizeMedium: string; - /** Styles applied to the icon element if supplied and `size="large"`. */ + /** Styles applied to the icon element if supplied and `size="large"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) + * and [.MuiButtonSizeLarge](/material-ui/api/button/#button-classes-sizeLarge) classes instead. + */ iconSizeLarge: 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 root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; } export type ButtonClassKey = keyof ButtonClasses; @@ -134,6 +247,12 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'focusVisible', 'disabled', 'colorInherit', + 'colorPrimary', + 'colorSecondary', + 'colorSuccess', + 'colorError', + 'colorInfo', + 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', @@ -149,6 +268,7 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'fullWidth', 'startIcon', 'endIcon', + 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', From 9a2193c92e60d0d373b4c67eaafd479e600c6d42 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 18 Jan 2024 18:50:32 +0530 Subject: [PATCH 02/25] Refactor Button.js to remove unnecessary conditional statement --- packages/mui-material/src/Button/Button.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 8b1dd891548c5d..3a0a9d4f433088 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -23,8 +23,7 @@ const useUtilityClasses = (ownerState) => { `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, - ['primary', 'secondary', 'error', 'info', 'success', 'warning', 'inherit'].includes(color) && - `color${capitalize(color)}`, + `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', ], From aa620ea8232ccdb80ce03d4fcd889d5422ab4b3a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 18 Feb 2024 09:39:06 +0530 Subject: [PATCH 03/25] add codemod --- .../src/deprecations/all/deprecations-all.js | 2 + .../src/deprecations/all/postcss.config.js | 3 +- .../button-classes/button-classes.js | 84 ++++ .../button-classes/button-classes.test.js | 78 +++ .../src/deprecations/button-classes/index.js | 1 + .../button-classes/postcss-plugin.js | 109 +++++ .../button-classes/postcss.config.js | 5 + .../button-classes/test-cases/actual.css | 85 ++++ .../button-classes/test-cases/actual.js | 457 ++++++++++++++++++ .../button-classes/test-cases/expected.css | 85 ++++ .../button-classes/test-cases/expected.js | 457 ++++++++++++++++++ 11 files changed, 1365 insertions(+), 1 deletion(-) create mode 100644 packages/mui-codemod/src/deprecations/button-classes/button-classes.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/button-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 2ea28ab2ed544a..c9c1a45ba48ff1 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -2,6 +2,7 @@ import transformAccordionProps from '../accordion-props'; import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; +import transformButtonClasses from '../button-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -12,6 +13,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformAvatarProps(file, api, options); file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); + file.source = transformButtonClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index ee2e3316deba79..e705118708b130 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -1,7 +1,8 @@ const { plugin: accordionSummaryClassesPlugin, } = require('../accordion-summary-classes/postcss-plugin'); +const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); module.exports = { - plugins: [accordionSummaryClassesPlugin], + plugins: [accordionSummaryClassesPlugin, buttonClassesPlugin], }; diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js new file mode 100644 index 00000000000000..d10c0c88cdeccd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js @@ -0,0 +1,84 @@ +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 }) => { + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Button$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'buttonClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace('.MuiButton-', ''); + 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('MuiButton-', '') + .split('.') + .filter(Boolean); + + if (precedingTemplateElement.value.raw.endsWith(' .')) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + 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(`^& ${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, `& ${replacementSelector}`)), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js new file mode 100644 index 00000000000000..3ad6b897697d56 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/button-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-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-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-classes/index.js b/packages/mui-codemod/src/deprecations/button-classes/index.js new file mode 100644 index 00000000000000..a4879ceaf231a7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/index.js @@ -0,0 +1 @@ +export { default } from './button-classes'; diff --git a/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js new file mode 100644 index 00000000000000..91923c0a1a093a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js @@ -0,0 +1,109 @@ +const classes = [ + { + deprecatedClass: '.MuiButton-textInherit', + replacementSelector: '.MuiButton-text.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-textPrimary', + replacementSelector: '.MuiButton-text.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-textSecondary', + replacementSelector: '.MuiButton-text.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-textSuccess', + replacementSelector: '.MuiButton-text.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-textError', + replacementSelector: '.MuiButton-text.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-textInfo', + replacementSelector: '.MuiButton-text.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-textWarning', + replacementSelector: '.MuiButton-text.MuiButton-colorWarning', + }, + { + deprecatedClass: '.MuiButton-outlinedInherit', + replacementSelector: '.MuiButton-outlined.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-outlinedPrimary', + replacementSelector: '.MuiButton-outlined.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-outlinedSecondary', + replacementSelector: '.MuiButton-outlined.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-outlinedSuccess', + replacementSelector: '.MuiButton-outlined.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-outlinedError', + replacementSelector: '.MuiButton-outlined.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-outlinedInfo', + replacementSelector: '.MuiButton-outlined.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-outlinedWarning', + replacementSelector: '.MuiButton-outlined.MuiButton-colorWarning', + }, + { + deprecatedClass: '.MuiButton-containedInherit', + replacementSelector: '.MuiButton-contained.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-containedPrimary', + replacementSelector: '.MuiButton-contained.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-containedSecondary', + replacementSelector: '.MuiButton-contained.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-containedSuccess', + replacementSelector: '.MuiButton-contained.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-containedError', + replacementSelector: '.MuiButton-contained.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-containedInfo', + replacementSelector: '.MuiButton-contained.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-containedWarning', + replacementSelector: '.MuiButton-contained.MuiButton-colorWarning', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated Button 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-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-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-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css new file mode 100644 index 00000000000000..3436738f27bdee --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css @@ -0,0 +1,85 @@ +.MuiButton-textInherit { + color: red; +} + +.MuiButton-textPrimary { + color: red; +} + +.MuiButton-textSecondary { + color: red; +} + +.MuiButton-textSuccess { + color: red; +} + +.MuiButton-textError { + color: red; +} + +.MuiButton-textInfo { + color: red; +} + +.MuiButton-textWarning { + color: red; +} + +.MuiButton-outlinedInherit { + color: red; +} + +.MuiButton-outlinedPrimary { + color: red; +} + +.MuiButton-outlinedSecondary { + color: red; +} + +.MuiButton-outlinedSuccess { + color: red; +} + +.MuiButton-outlinedError { + color: red; +} + +.MuiButton-outlinedInfo { + color: red; +} + +.MuiButton-outlinedWarning { + color: red; +} + +.MuiButton-containedInherit { + color: red; +} + +.MuiButton-containedPrimary { + color: red; +} + +.MuiButton-containedSecondary { + color: red; +} + +.MuiButton-containedSuccess { + color: red; +} + +.MuiButton-containedError { + color: red; +} + +.MuiButton-containedInfo { + color: red; +} + +.MuiButton-containedWarning { + color: red; +} + + diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js new file mode 100644 index 00000000000000..467b0676643165 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js @@ -0,0 +1,457 @@ +import { buttonClasses } from '@mui/material/Button'; + +fn({ + MuiButton: { + styleOverrides: { + root: { + "& .MuiButton-text.MuiButton-colorInherit": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorPrimary": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorSecondary": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorSuccess": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorError": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorInfo": { + color: 'red', + }, + + "& .MuiButton-text.MuiButton-colorWarning": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorInherit": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorPrimary": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorSecondary": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorSuccess": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorError": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorInfo": { + color: 'red', + }, + + "& .MuiButton-outlined.MuiButton-colorWarning": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorInherit": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorPrimary": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorSecondary": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorSuccess": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorError": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorInfo": { + color: 'red', + }, + + "& .MuiButton-contained.MuiButton-colorWarning": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiButton: { + styleOverrides: { + root: { + [`& .${buttonClasses.text}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorError}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + + [`& .${buttonClasses.text}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorError}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + + [`& .${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorError}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + + [`& .${buttonClasses.contained}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "& .MuiButton-text.MuiButton-colorInherit": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorPrimary": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorSecondary": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorSuccess": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorError": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorInfo": { + color: 'red', + }, + "& .MuiButton-text.MuiButton-colorWarning": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorInherit": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorPrimary": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorSecondary": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorSuccess": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorError": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorInfo": { + color: 'red', + }, + "& .MuiButton-outlined.MuiButton-colorWarning": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorInherit": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorPrimary": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorSecondary": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorSuccess": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorError": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorInfo": { + color: 'red', + }, + "& .MuiButton-contained.MuiButton-colorWarning": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${buttonClasses.text}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorError}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + [`& .${buttonClasses.text}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorError}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + [`& .${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorError}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, + [`& .${buttonClasses.contained}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, + }; +}); + +