[CardHeader] Deprecate *TypographyProps and complete slots, slotProps

docs/pages/material-ui/api/card-header.json

@@ -5,8 +5,26 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
     "disableTypography": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ action?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, avatar?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, content?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, root?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, subheader?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, title?: func<br>&#124;&nbsp;{ component?: elementType, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object } }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ action?: elementType, avatar?: elementType, content?: elementType, root?: elementType, subheader?: elementType, title?: elementType }"
+      },
+      "default": "{}"
+    },
     "subheader": { "type": { "name": "node" } },
-    "subheaderTypographyProps": { "type": { "name": "object" } },
+    "subheaderTypographyProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.subheader</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -15,51 +33,56 @@
       "additionalInfo": { "sx": true }
     },
     "title": { "type": { "name": "node" } },
-    "titleTypographyProps": { "type": { "name": "object" } }
+    "titleTypographyProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.title</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "CardHeader",
   "imports": [
     "import CardHeader from '@mui/material/CardHeader';",
     "import { CardHeader } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "action",
-      "className": "MuiCardHeader-action",
-      "description": "Styles applied to the action element.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "'div'",
+      "class": "MuiCardHeader-root"
     },
     {
-      "key": "avatar",
-      "className": "MuiCardHeader-avatar",
-      "description": "Styles applied to the avatar element.",
-      "isGlobal": false
+      "name": "avatar",
+      "description": "The component that renders the avatar slot.",
+      "default": "'div'",
+      "class": "MuiCardHeader-avatar"
     },
     {
-      "key": "content",
-      "className": "MuiCardHeader-content",
-      "description": "Styles applied to the content wrapper element.",
-      "isGlobal": false
+      "name": "action",
+      "description": "The component that renders the action slot.",
+      "default": "'div'",
+      "class": "MuiCardHeader-action"
     },
     {
-      "key": "root",
-      "className": "MuiCardHeader-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
+      "name": "content",
+      "description": "The component that renders the content slot.",
+      "default": "'div'",
+      "class": "MuiCardHeader-content"
     },
     {
-      "key": "subheader",
-      "className": "MuiCardHeader-subheader",
-      "description": "Styles applied to the subheader Typography element.",
-      "isGlobal": false
+      "name": "title",
+      "description": "The component that renders the title slot (as long as disableTypography is not `true`).\n[Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.",
+      "default": "Typography",
+      "class": "MuiCardHeader-title"
     },
     {
-      "key": "title",
-      "className": "MuiCardHeader-title",
-      "description": "Styles applied to the title Typography element.",
-      "isGlobal": false
+      "name": "subheader",
+      "description": "The component that renders the subheader slot (as long as disableTypography is not `true`).\n[Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.",
+      "default": "Typography",
+      "class": "MuiCardHeader-subheader"
     }
   ],
+  "classes": [],
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiCardHeader",

docs/translations/api-docs/card-header/card-header.json

@@ -10,6 +10,8 @@
     "disableTypography": {
       "description": "If <code>true</code>, <code>subheader</code> and <code>title</code> won&#39;t be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the <code>title</code> text, and optional <code>subheader</code> text with the Typography component."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "subheader": { "description": "The content of the component." },
     "subheaderTypographyProps": {
       "description": "These props will be forwarded to the subheader (as long as disableTypography is not <code>true</code>)."
@@ -22,27 +24,13 @@
       "description": "These props will be forwarded to the title (as long as disableTypography is not <code>true</code>)."
     }
   },
-  "classDescriptions": {
-    "action": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the action element"
-    },
-    "avatar": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the avatar element"
-    },
-    "content": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the content wrapper element"
-    },
-    "root": { "description": "Styles applied to the root element." },
-    "subheader": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the subheader Typography element"
-    },
-    "title": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the title Typography element"
-    }
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "action": "The component that renders the action slot.",
+    "avatar": "The component that renders the avatar slot.",
+    "content": "The component that renders the content slot.",
+    "root": "The component that renders the root slot.",
+    "subheader": "The component that renders the subheader slot (as long as disableTypography is not <code>true</code>). <a href=\"https://mui.com/material-ui/api/typography/#props\">Follow this guide</a> to learn more about the requirements for this component.",
+    "title": "The component that renders the title slot (as long as disableTypography is not <code>true</code>). <a href=\"https://mui.com/material-ui/api/typography/#props\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

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

@@ -27,6 +27,7 @@ import transformTextFieldProps from '../text-field-props';
 import transformTabClasses from '../tab-classes';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
+import transformCardHeaderProps from '../card-header-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -62,6 +63,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTabClasses(file, api, options);
   file.source = transformToggleButtonGroupClasses(file, api, options);
   file.source = transformTooltipProps(file, api, options);
+  file.source = transformCardHeaderProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/card-header-props/card-header-props.js

@@ -0,0 +1,27 @@
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @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;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'CardHeader',
+    propName: 'titleTypographyProps',
+    slotName: 'title',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'CardHeader',
+    propName: 'subheaderTypographyProps',
+    slotName: 'subheader',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/card-header-props/card-header-props.test.js

@@ -0,0 +1,13 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './card-header-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'tooltip-props',
+      dirname: __dirname,
+      testCases: [{ actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/card-header-props/index.js

@@ -0,0 +1 @@
+export { default } from './card-header-props';

packages/mui-codemod/src/deprecations/card-header-props/test-cases/actual.js

@@ -0,0 +1,26 @@
+import CardHeader from '@mui/material/CardHeader';
+import { CardHeader as MyCardHeader } from '@mui/material';
+
+<CardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+/>;
+<CardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+  slotProps={{ title: { variant: 'h1' }, subheader: { variant: 'h2' } }}
+/>;
+<CardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+  slotProps={{ title: { sx: { color: 'red' } }, subheader: { sx: { color: 'red' } } }}
+/>;
+<MyCardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+/>;
+
+<CustomCardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+/>;

packages/mui-codemod/src/deprecations/card-header-props/test-cases/expected.js

@@ -0,0 +1,34 @@
+import CardHeader from '@mui/material/CardHeader';
+import { CardHeader as MyCardHeader } from '@mui/material';
+
+<CardHeader
+  slotProps={{
+    title: { variant: 'h6' },
+    subheader: { variant: 'body2' }
+  }} />;
+<CardHeader
+  slotProps={{ title: {
+    ...{ variant: 'h6' },
+    ...{ variant: 'h1' }
+  }, subheader: {
+    ...{ variant: 'body2' },
+    ...{ variant: 'h2' }
+  } }} />;
+<CardHeader
+  slotProps={{ title: {
+    ...{ variant: 'h6' },
+    ...{ sx: { color: 'red' } }
+  }, subheader: {
+    ...{ variant: 'body2' },
+    ...{ sx: { color: 'red' } }
+  } }} />;
+<MyCardHeader
+  slotProps={{
+    title: { variant: 'h6' },
+    subheader: { variant: 'body2' }
+  }} />;
+
+<CustomCardHeader
+  titleTypographyProps={{ variant: 'h6' }}
+  subheaderTypographyProps={{ variant: 'body2' }}
+/>;