[material-ui][Alert] Deprecate composed classes (mui#40688)

andriy-shymkiv · Feb 23, 2024 · 1542d1d · 1542d1d
1 parent be1b296
commit 1542d1d
Show file tree

Hide file tree

Showing 18 changed files with 731 additions and 41 deletions.
diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -92,10 +92,11 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
 
 ## Alert
 
-Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections:
+Use the [alert-props](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) and [alert-classes](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-classes) codemods below to migrate the code as described in the following sections:
 
 ```bash
 npx @mui/codemod@latest deprecations/alert-props <path>
+npx @mui/codemod@latest deprecations/alert-classes <path>
 ```
 
 ### components
@@ -120,6 +121,98 @@ The Alert's `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+### Composed CSS classes
+
+The CSS classes that composed the `severity` (or `variant`) and `color` prop values were removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiAlert-standardSuccess
++.MuiAlert-standard.MuiAlert-colorSuccess
+-.MuiAlert-standardInfo
++.MuiAlert-standard.MuiAlert-colorInfo
+-.MuiAlert-standardWarning
++.MuiAlert-standard.MuiAlert-colorWarning
+-.MuiAlert-standardError
++.MuiAlert-standard.MuiAlert-colorError
+-.MuiAlert-outlinedSuccess
++.MuiAlert-outlined.MuiAlert-colorSuccess
+-.MuiAlert-outlinedInfo
++.MuiAlert-outlined.MuiAlert-colorInfo
+-.MuiAlert-outlinedWarning
++.MuiAlert-outlined.MuiAlert-colorWarning
+-.MuiAlert-outlinedError
++.MuiAlert-outlined.MuiAlert-colorError
+-.MuiAlert-filledSuccess
++.MuiAlert-filled.MuiAlert-colorSuccess
+-.MuiAlert-filledInfo
++.MuiAlert-filled.MuiAlert-colorInfo
+-.MuiAlert-filledWarning
++.MuiAlert-filled.MuiAlert-colorWarning
+-.MuiAlert-filledError
++.MuiAlert-filled.MuiAlert-colorError
+```
+
+```diff
+ import { alertClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+   styleOverrides: {
+     root: {
+-      [`&.${alertClasses.standardSuccess}`]: {
++      [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.standardInfo}`]: {
++      [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.standardWarning}`]: {
++      [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.standardError}`]: {
++      [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.outlinedSuccess}`]: {
++      [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.outlinedInfo}`]: {
++      [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.outlinedWarning}`]: {
++      [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.outlinedError}`]: {
++      [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.filledSuccess}`]: {
++      [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.filledInfo}`]: {
++      [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.filledWarning}`]: {
++      [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
+         color: 'red',
+        },
+-      [`&.${alertClasses.filledError}`]: {
++      [`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
 ## Avatar
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:

diff --git a/docs/pages/material-ui/api/alert.json b/docs/pages/material-ui/api/alert.json
@@ -99,6 +99,30 @@
       "description": "Styles applied to the action wrapper element if `action` is provided.",
       "isGlobal": false
     },
+    {
+      "key": "colorError",
+      "className": "MuiAlert-colorError",
+      "description": "Styles applied to the root element if `color=\"error\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorInfo",
+      "className": "MuiAlert-colorInfo",
+      "description": "Styles applied to the root element if `color=\"info\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorSuccess",
+      "className": "MuiAlert-colorSuccess",
+      "description": "Styles applied to the root element if `color=\"success\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorWarning",
+      "className": "MuiAlert-colorWarning",
+      "description": "Styles applied to the root element if `color=\"warning\"`.",
+      "isGlobal": false
+    },
     {
       "key": "filled",
       "className": "MuiAlert-filled",
@@ -109,25 +133,29 @@
       "key": "filledError",
       "className": "MuiAlert-filledError",
       "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"error\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "filledInfo",
       "className": "MuiAlert-filledInfo",
       "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"info\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "filledSuccess",
       "className": "MuiAlert-filledSuccess",
       "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"success\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "filledWarning",
       "className": "MuiAlert-filledWarning",
-      "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"warning\"`.",
-      "isGlobal": false
+      "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"warning\"`",
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "icon",
@@ -151,25 +179,29 @@
       "key": "outlinedError",
       "className": "MuiAlert-outlinedError",
       "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "outlinedInfo",
       "className": "MuiAlert-outlinedInfo",
       "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "outlinedSuccess",
       "className": "MuiAlert-outlinedSuccess",
       "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "outlinedWarning",
       "className": "MuiAlert-outlinedWarning",
       "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "root",
@@ -187,25 +219,29 @@
       "key": "standardError",
       "className": "MuiAlert-standardError",
       "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"error\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "standardInfo",
       "className": "MuiAlert-standardInfo",
       "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"info\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "standardSuccess",
       "className": "MuiAlert-standardSuccess",
       "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"success\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "standardWarning",
       "className": "MuiAlert-standardWarning",
       "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"warning\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     }
   ],
   "spread": true,

diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json
@@ -43,6 +43,26 @@
       "nodeName": "the action wrapper element",
       "conditions": "<code>action</code> is provided"
     },
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
     "filled": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -51,22 +71,24 @@
     "filledError": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-filled\">.MuiAlert-filled</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorError\">.MuiAlert-colorError</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "filledInfo": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-filled\">.MuiAlert-filled</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorInfo\">.MuiAlert-colorInfo</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "filledSuccess": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"success\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-filled\">.MuiAlert-filled</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorSuccess\">.MuiAlert-colorSuccess</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "filledWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"warning\"</code>"
+      "description": "Styles applied to the root element if <code>variant=&quot;filled&quot;</code> and <code>color=&quot;warning&quot;</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-filled\">.MuiAlert-filled</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorWarning\">.MuiAlert-colorWarning</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "icon": {
       "description": "Styles applied to {{nodeName}}.",
@@ -84,22 +106,26 @@
     "outlinedError": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-outlined\">.MuiAlert-outlined</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorError\">.MuiAlert-colorError</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "outlinedInfo": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-outlined\">.MuiAlert-outlined</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorInfo\">.MuiAlert-colorInfo</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "outlinedSuccess": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-outlined\">.MuiAlert-outlined</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorSuccess\">.MuiAlert-colorSuccess</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "outlinedWarning": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-outlined\">.MuiAlert-outlined</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorWarning\">.MuiAlert-colorWarning</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "root": { "description": "Styles applied to the root element." },
     "standard": {
@@ -110,22 +136,26 @@
     "standardError": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-standard\">.MuiAlert-standard</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorError\">.MuiAlert-colorError</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "standardInfo": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-standard\">.MuiAlert-standard</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorInfo\">.MuiAlert-colorInfo</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "standardSuccess": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"success\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-standard\">.MuiAlert-standard</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorSuccess\">.MuiAlert-colorSuccess</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "standardWarning": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/alert/#alert-classes-standard\">.MuiAlert-standard</a> and <a href=\"/material-ui/api/alert/#alert-classes-colorWarning\">.MuiAlert-colorWarning</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     }
   },
   "slotDescriptions": {