[material-ui][ListItem] Removing deprecated props (#41566)

mui · Aug 8, 2024 · d3432b9 · d3432b9
1 parent 0080a5f
commit d3432b9
Show file tree

Hide file tree

Showing 21 changed files with 358 additions and 374 deletions.
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.js b/docs/data/material/getting-started/templates/blog/theme/customizations/menus.js
@@ -4,7 +4,7 @@ import { svgIconClasses } from '@mui/material/SvgIcon';
 import { typographyClasses } from '@mui/material/Typography';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
-import { listItemClasses } from '@mui/material/ListItem';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { selectClasses } from '@mui/material/Select';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
@@ -39,20 +39,20 @@ export const menuComponentsCustomizations = {
           padding: '2px 8px',
           borderRadius: theme.shape.borderRadius,
           opacity: 0.7,
-          [`&.${listItemClasses.selected}`]: {
+          [`&.${listItemButtonClasses.selected}`]: {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
-            [`&.${listItemClasses.focusVisible}`]: {
+            [`&.${listItemButtonClasses.focusVisible}`]: {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },
             '&:hover': {
               backgroundColor: alpha(theme.palette.action.selected, 0.5),
             },
           },
-          [`&.${listItemClasses.focusVisible}`]: {
+          [`&.${listItemButtonClasses.focusVisible}`]: {
             backgroundColor: 'transparent',
           },
         },

diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/menus.tsx
@@ -4,7 +4,7 @@ import { svgIconClasses, SvgIconProps } from '@mui/material/SvgIcon';
 import { typographyClasses } from '@mui/material/Typography';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
-import { listItemClasses } from '@mui/material/ListItem';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { selectClasses } from '@mui/material/Select';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
@@ -39,20 +39,20 @@ export const menuComponentsCustomizations: Components<Theme> = {
           padding: '2px 8px',
           borderRadius: theme.shape.borderRadius,
           opacity: 0.7,
-          [`&.${listItemClasses.selected}`]: {
+          [`&.${listItemButtonClasses.selected}`]: {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
-            [`&.${listItemClasses.focusVisible}`]: {
+            [`&.${listItemButtonClasses.focusVisible}`]: {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },
             '&:hover': {
               backgroundColor: alpha(theme.palette.action.selected, 0.5),
             },
           },
-          [`&.${listItemClasses.focusVisible}`]: {
+          [`&.${listItemButtonClasses.focusVisible}`]: {
             backgroundColor: 'transparent',
           },
         },

diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js
@@ -4,7 +4,7 @@ import { svgIconClasses } from '@mui/material/SvgIcon';
 import { typographyClasses } from '@mui/material/Typography';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
-import { listItemClasses } from '@mui/material/ListItem';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { selectClasses } from '@mui/material/Select';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
@@ -39,20 +39,20 @@ export const menuComponentsCustomizations = {
           padding: '2px 8px',
           borderRadius: theme.shape.borderRadius,
           opacity: 0.7,
-          [`&.${listItemClasses.selected}`]: {
+          [`&.${listItemButtonClasses.selected}`]: {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
-            [`&.${listItemClasses.focusVisible}`]: {
+            [`&.${listItemButtonClasses.focusVisible}`]: {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },
             '&:hover': {
               backgroundColor: alpha(theme.palette.action.selected, 0.5),
             },
           },
-          [`&.${listItemClasses.focusVisible}`]: {
+          [`&.${listItemButtonClasses.focusVisible}`]: {
             backgroundColor: 'transparent',
           },
         },

diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx
@@ -4,7 +4,7 @@ import { SvgIconProps, svgIconClasses } from '@mui/material/SvgIcon';
 import { typographyClasses } from '@mui/material/Typography';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
-import { listItemClasses } from '@mui/material/ListItem';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { selectClasses } from '@mui/material/Select';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
@@ -39,20 +39,20 @@ export const menuComponentsCustomizations: Components<Theme> = {
           padding: '2px 8px',
           borderRadius: theme.shape.borderRadius,
           opacity: 0.7,
-          [`&.${listItemClasses.selected}`]: {
+          [`&.${listItemButtonClasses.selected}`]: {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
-            [`&.${listItemClasses.focusVisible}`]: {
+            [`&.${listItemButtonClasses.focusVisible}`]: {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },
             '&:hover': {
               backgroundColor: alpha(theme.palette.action.selected, 0.5),
             },
           },
-          [`&.${listItemClasses.focusVisible}`]: {
+          [`&.${listItemButtonClasses.focusVisible}`]: {
             backgroundColor: 'transparent',
           },
         },

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -199,6 +199,40 @@ The `Grid2` was updated and stabilized:
 
 This brings some breaking changes described in the following sections.
 
+### ListItem
+
+`ListItem`'s props `autoFocus`, `button`, `disabled`, and `selected`, deprecated in v5, have been removed. To replace the `button` prop, use `ListItemButton` instead. The other removed props are available in the `ListItemButton` component as well.
+
+```diff
+-<ListItem button />
++<ListItemButton />
+```
+
+Use this codemod to migrate your project to the `ListItemButton` component:
+
+```bash
+npx @mui/codemod@next v6.0.0/list-item-button-prop <path/to/folder>
+```
+
+As the `ListItem` no longer supports these props, the class names related to these props were removed. You should use the `listItemButtonClasses` object instead.
+
+```diff
+-import { listItemClasses } from '@mui/material/ListItem';
++import { listItemButtonClasses } from '@mui/material/ListItemButton';
+
+- listItemClasses.button
++ listItemButtonClasses.root
+
+- listItemClasses.focusVisible
++ listItemButtonClasses.focusVisible
+
+- listItemClasses.disabled
++ listItemButtonClasses.disabled
+
+- listItemClasses.selected
++ listItemButtonClasses.selected
+```
+
 #### Stabilized API
 
 The `Grid2` component API was stabilized, so its import no longer contains the `Unstable_` prefix:

diff --git a/docs/pages/material-ui/api/list-item.json b/docs/pages/material-ui/api/list-item.json
@@ -4,18 +4,6 @@
       "type": { "name": "enum", "description": "'center'<br>&#124;&nbsp;'flex-start'" },
       "default": "'center'"
     },
-    "autoFocus": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
-    "button": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "children": { "type": { "name": "custom", "description": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
@@ -44,22 +32,10 @@
       "deprecationInfo": "Use the <code>slotProps.root</code> prop 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."
     },
     "dense": { "type": { "name": "bool" }, "default": "false" },
-    "disabled": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "disableGutters": { "type": { "name": "bool" }, "default": "false" },
     "disablePadding": { "type": { "name": "bool" }, "default": "false" },
     "divider": { "type": { "name": "bool" }, "default": "false" },
     "secondaryAction": { "type": { "name": "node" } },
-    "selected": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: object }" },
       "default": "{}"
@@ -88,12 +64,6 @@
       "description": "Styles applied to the component element if `alignItems=\"flex-start\"`.",
       "isGlobal": false
     },
-    {
-      "key": "button",
-      "className": "MuiListItem-button",
-      "description": "Styles applied to the inner `component` element if `button={true}`.",
-      "isGlobal": false
-    },
     {
       "key": "container",
       "className": "MuiListItem-container",
@@ -106,24 +76,12 @@
       "description": "Styles applied to the component element if dense.",
       "isGlobal": false
     },
-    {
-      "key": "disabled",
-      "className": "Mui-disabled",
-      "description": "State class applied to the inner `component` element if `disabled={true}`.",
-      "isGlobal": true
-    },
     {
       "key": "divider",
       "className": "MuiListItem-divider",
       "description": "Styles applied to the inner `component` element if `divider={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "focusVisible",
-      "className": "Mui-focusVisible",
-      "description": "State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`.",
-      "isGlobal": true
-    },
     {
       "key": "gutters",
       "className": "MuiListItem-gutters",
@@ -147,12 +105,6 @@
       "className": "MuiListItem-secondaryAction",
       "description": "Styles applied to the component element if `children` includes `ListItemSecondaryAction`.",
       "isGlobal": false
-    },
-    {
-      "key": "selected",
-      "className": "Mui-selected",
-      "description": "State class applied to the root element if `selected={true}`.",
-      "isGlobal": true
     }
   ],
   "spread": true,

diff --git a/docs/translations/api-docs/list-item/list-item.json b/docs/translations/api-docs/list-item/list-item.json
@@ -2,12 +2,6 @@
   "componentDescription": "Uses an additional container component if `ListItemSecondaryAction` is the last child.",
   "propDescriptions": {
     "alignItems": { "description": "Defines the <code>align-items</code> style property." },
-    "autoFocus": {
-      "description": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true."
-    },
-    "button": {
-      "description": "If <code>true</code>, the list item is a button (using <code>ButtonBase</code>). Props intended for <code>ButtonBase</code> can then be applied to <code>ListItem</code>."
-    },
     "children": {
       "description": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child."
     },
@@ -27,7 +21,6 @@
     "dense": {
       "description": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component."
     },
-    "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "disableGutters": {
       "description": "If <code>true</code>, the left and right padding is removed."
     },
@@ -36,7 +29,6 @@
       "description": "If <code>true</code>, a 1px light border is added to the bottom of the list item."
     },
     "secondaryAction": { "description": "The element to display at the end of ListItem." },
-    "selected": { "description": "Use to apply selected styling." },
     "slotProps": {
       "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
@@ -51,11 +43,6 @@
       "nodeName": "the component element",
       "conditions": "<code>alignItems=\"flex-start\"</code>"
     },
-    "button": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner <code>component</code> element",
-      "conditions": "<code>button={true}</code>"
-    },
     "container": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the container element",
@@ -66,21 +53,11 @@
       "nodeName": "the component element",
       "conditions": "dense"
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner <code>component</code> element",
-      "conditions": "<code>disabled={true}</code>"
-    },
     "divider": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the inner <code>component</code> element",
       "conditions": "<code>divider={true}</code>"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>component</code>&#39;s <code>focusVisibleClassName</code> prop",
-      "conditions": "<code>button={true}</code>"
-    },
     "gutters": {
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the inner <code>component</code> element",
@@ -99,11 +76,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the component element",
       "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
-    },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
     }
   }
 }
diff --git a/packages/mui-codemod/src/v6.0.0/all/v6-all.js b/packages/mui-codemod/src/v6.0.0/all/v6-all.js
@@ -1,11 +1,10 @@
+import transformerListItemButtonProps from '../list-item-button-prop/list-item-button-prop';
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function v6All(file) {
-  // Currently empty, when adding the first codemod:
-  //   - Read mui-codemod/CONTRIBUTING.md
-  //   - Follow mui-codemod/src/deprecations/all/deprecations-all.js as a guide
-  //   - Remove this comment
+export default function v6All(file, api, options) {
+  file.source = transformerListItemButtonProps(file, api, options);
+
   return file.source;
 }
diff --git a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/index.js b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/index.js
@@ -0,0 +1 @@
+export { default } from './list-item-button-prop';