diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index e05e1b56ee9715..76857a1dc20b4e 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -1104,6 +1104,85 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an /> ``` +## Drawer + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/drawer-classes +``` + +### Composed CSS classes + +The CSS classes that composed the following props were deprecated: + +- `paper` and `anchor` +- `paper`, `anchor` and `docked` + +Here's how to migrate: + +```diff +-.MuiDrawer-paperAnchorBottom ++.MuiDrawer-anchorBottom > .MuiDrawer-paper +-.MuiDrawer-paperAnchorLeft ++.MuiDrawer-anchorLeft > .MuiDrawer-paper +-.MuiDrawer-paperAnchorRight ++.MuiDrawer-anchorRight > .MuiDrawer-paper +-.MuiDrawer-paperAnchorTop ++.MuiDrawer-anchorTop > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedBottom ++.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedLeft ++.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedRight ++.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedTop ++.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper +``` + +```diff + import { drawerClasses } from '@mui/material/Drawer'; + + MuiDrawer: { + styleOverrides: { + root: { +- [`&.${drawerClasses.paperAnchorBottom}`]: { ++ [`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorLeft}`]: { ++ [`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorRight}`]: { ++ [`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorTop}`]: { ++ [`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedBottom}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedLeft}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedRight}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedTop}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: { + color: 'red', + }, + }, + }, + }, +``` + ## FilledInput Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#filled-input-props) below to migrate the code as described in the following sections: diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json index ecf652082a5d01..579de12405fdc3 100644 --- a/docs/pages/material-ui/api/drawer.json +++ b/docs/pages/material-ui/api/drawer.json @@ -50,6 +50,30 @@ "import { Drawer } from '@mui/material';" ], "classes": [ + { + "key": "anchorBottom", + "className": "MuiDrawer-anchorBottom", + "description": "Styles applied to the root element if `anchor=\"bottom\"`.", + "isGlobal": false + }, + { + "key": "anchorLeft", + "className": "MuiDrawer-anchorLeft", + "description": "Styles applied to the root element if `anchor=\"left\"`.", + "isGlobal": false + }, + { + "key": "anchorRight", + "className": "MuiDrawer-anchorRight", + "description": "Styles applied to the root element if `anchor=\"right\"`.", + "isGlobal": false + }, + { + "key": "anchorTop", + "className": "MuiDrawer-anchorTop", + "description": "Styles applied to the root element if `anchor=\"top\"`.", + "isGlobal": false + }, { "key": "docked", "className": "MuiDrawer-docked", @@ -72,49 +96,57 @@ "key": "paperAnchorBottom", "className": "MuiDrawer-paperAnchorBottom", "description": "Styles applied to the Paper component if `anchor=\"bottom\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedBottom", "className": "MuiDrawer-paperAnchorDockedBottom", "description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedLeft", "className": "MuiDrawer-paperAnchorDockedLeft", "description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedRight", "className": "MuiDrawer-paperAnchorDockedRight", "description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedTop", "className": "MuiDrawer-paperAnchorDockedTop", "description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorLeft", "className": "MuiDrawer-paperAnchorLeft", "description": "Styles applied to the Paper component if `anchor=\"left\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorRight", "className": "MuiDrawer-paperAnchorRight", "description": "Styles applied to the Paper component if `anchor=\"right\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorTop", "className": "MuiDrawer-paperAnchorTop", "description": "Styles applied to the Paper component if `anchor=\"top\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json index 88c0e20c8303a7..3dc4f8ba069fe2 100644 --- a/docs/pages/material-ui/api/swipeable-drawer.json +++ b/docs/pages/material-ui/api/swipeable-drawer.json @@ -46,6 +46,30 @@ "import { SwipeableDrawer } from '@mui/material';" ], "classes": [ + { + "key": "anchorBottom", + "className": "MuiSwipeableDrawer-anchorBottom", + "description": "Styles applied to the root element if `anchor=\"bottom\"`.", + "isGlobal": false + }, + { + "key": "anchorLeft", + "className": "MuiSwipeableDrawer-anchorLeft", + "description": "Styles applied to the root element if `anchor=\"left\"`.", + "isGlobal": false + }, + { + "key": "anchorRight", + "className": "MuiSwipeableDrawer-anchorRight", + "description": "Styles applied to the root element if `anchor=\"right\"`.", + "isGlobal": false + }, + { + "key": "anchorTop", + "className": "MuiSwipeableDrawer-anchorTop", + "description": "Styles applied to the root element if `anchor=\"top\"`.", + "isGlobal": false + }, { "key": "docked", "className": "MuiSwipeableDrawer-docked", @@ -68,49 +92,57 @@ "key": "paperAnchorBottom", "className": "MuiSwipeableDrawer-paperAnchorBottom", "description": "Styles applied to the Paper component if `anchor=\"bottom\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedBottom", "className": "MuiSwipeableDrawer-paperAnchorDockedBottom", "description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedLeft", "className": "MuiSwipeableDrawer-paperAnchorDockedLeft", "description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedRight", "className": "MuiSwipeableDrawer-paperAnchorDockedRight", "description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorDockedTop", "className": "MuiSwipeableDrawer-paperAnchorDockedTop", "description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorLeft", "className": "MuiSwipeableDrawer-paperAnchorLeft", "description": "Styles applied to the Paper component if `anchor=\"left\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorRight", "className": "MuiSwipeableDrawer-paperAnchorRight", "description": "Styles applied to the Paper component if `anchor=\"right\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "paperAnchorTop", "className": "MuiSwipeableDrawer-paperAnchorTop", "description": "Styles applied to the Paper component if `anchor=\"top\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json index 95074be42ae6d0..05658dfbc0688b 100644 --- a/docs/translations/api-docs/drawer/drawer.json +++ b/docs/translations/api-docs/drawer/drawer.json @@ -32,6 +32,26 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "anchorBottom": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"bottom\"" + }, + "anchorLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"left\"" + }, + "anchorRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"right\"" + }, + "anchorTop": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"top\"" + }, "docked": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -48,42 +68,50 @@ "paperAnchorBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"bottom\"" + "conditions": "anchor=\"bottom\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorBottom and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"bottom\" and variant is not "temporary"" + "conditions": "anchor=\"bottom\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorBottom, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"left\" and variant is not "temporary"" + "conditions": "anchor=\"left\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorLeft, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"right\" and variant is not "temporary"" + "conditions": "anchor=\"right\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorTop, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"top\" and variant is not "temporary"" + "conditions": "anchor=\"top\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorRight, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"left\"" + "conditions": "anchor=\"left\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorLeft and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"right\"" + "conditions": "anchor=\"right\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorRight and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"top\"" + "conditions": "anchor=\"top\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorTop and .MuiDrawer-paper classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." } } diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 475d1a03b207eb..1b42f85160684d 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -40,6 +40,26 @@ } }, "classDescriptions": { + "anchorBottom": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"bottom\"" + }, + "anchorLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"left\"" + }, + "anchorRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"right\"" + }, + "anchorTop": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchor=\"top\"" + }, "docked": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -56,42 +76,50 @@ "paperAnchorBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"bottom\"" + "conditions": "anchor=\"bottom\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorBottom and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"bottom\" and variant is not "temporary"" + "conditions": "anchor=\"bottom\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorBottom, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"left\" and variant is not "temporary"" + "conditions": "anchor=\"left\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorLeft, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"right\" and variant is not "temporary"" + "conditions": "anchor=\"right\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorTop, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorDockedTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"top\" and variant is not "temporary"" + "conditions": "anchor=\"top\" and variant is not "temporary"", + "deprecationInfo": "Combine the .MuiDrawer-anchorRight, .MuiDrawer-docked and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"left\"" + "conditions": "anchor=\"left\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorLeft and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"right\"" + "conditions": "anchor=\"right\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorRight and .MuiDrawer-paper classes instead. How to migrate" }, "paperAnchorTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the Paper component", - "conditions": "anchor=\"top\"" + "conditions": "anchor=\"top\"", + "deprecationInfo": "Combine the .MuiDrawer-anchorTop and .MuiDrawer-paper classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." } } diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 92fb762bf05f5d..9005788323d005 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1032,6 +1032,78 @@ npx @mui/codemod@latest deprecations/circular-progress-classes npx @mui/codemod@latest deprecations/divider-props ``` +#### `drawer-classes` + +JS transforms: + +```diff + import { drawerClasses } from '@mui/material/Drawer'; + + MuiDrawer: { + styleOverrides: { + root: { +- [`&.${drawerClasses.paperAnchorBottom}`]: { ++ [`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorLeft}`]: { ++ [`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorRight}`]: { ++ [`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorTop}`]: { ++ [`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedBottom}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedLeft}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedRight}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: { + color: 'red', + }, +- [`&.${drawerClasses.paperAnchorDockedTop}`]: { ++ [`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiDrawer-paperAnchorBottom ++.MuiDrawer-anchorBottom > .MuiDrawer-paper +-.MuiDrawer-paperAnchorLeft ++.MuiDrawer-anchorLeft > .MuiDrawer-paper +-.MuiDrawer-paperAnchorRight ++.MuiDrawer-anchorRight > .MuiDrawer-paper +-.MuiDrawer-paperAnchorTop ++.MuiDrawer-anchorTop > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedBottom ++.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedLeft ++.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedRight ++.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper +-.MuiDrawer-paperAnchorDockedTop ++.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper +``` + +```bash +npx @mui/codemod@latest deprecations/drawer-classes +``` + #### `filled-input-props` ```diff diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index c6a16ef48d29ba..ed9f8b861d36d8 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -10,6 +10,7 @@ import transformButtonGroupClasses from '../button-group-classes'; import transformChipClasses from '../chip-classes'; import transformCircularProgressClasses from '../circular-progress-classes'; import transformDividerProps from '../divider-props'; +import transformDrawerClasses from '../drawer-classes'; import transformFilledInputProps from '../filled-input-props'; import transformFormControlLabelProps from '../form-control-label-props'; import transformImageListItemBarClasses from '../image-list-item-bar-classes'; @@ -47,6 +48,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformChipClasses(file, api, options); file.source = transformCircularProgressClasses(file, api, options); file.source = transformDividerProps(file, api, options); + file.source = transformDrawerClasses(file, api, options); file.source = transformFilledInputProps(file, api, options); file.source = transformFormControlLabelProps(file, api, options); file.source = transformImageListItemBarClasses(file, api, options); diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index a37e524e2072dc..f80ca2dde2122d 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -5,6 +5,7 @@ const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin' const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); const { plugin: buttonGroupClassesPlugin } = require('../button-group-classes/postcss-plugin'); const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); +const { plugin: drawerClassesPlugin } = require('../drawer-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); @@ -28,6 +29,7 @@ module.exports = { buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, + drawerClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js new file mode 100644 index 00000000000000..5a774cd82a8888 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js @@ -0,0 +1,124 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Drawer$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'drawerClasses') { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiDrawer-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js new file mode 100644 index 00000000000000..0672afc882f901 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-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 './drawer-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('drawer-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/drawer-classes/index.js b/packages/mui-codemod/src/deprecations/drawer-classes/index.js new file mode 100644 index 00000000000000..e99d40ff5703d8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/index.js @@ -0,0 +1 @@ +export { default } from './drawer-classes'; diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/drawer-classes/postcss-plugin.js new file mode 100644 index 00000000000000..98d77a9da4b4bd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/postcss-plugin.js @@ -0,0 +1,58 @@ +const classes = [ + { + deprecatedClass: ' .MuiDrawer-paperAnchorBottom', + replacementSelector: '.MuiDrawer-anchorBottom > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorLeft', + replacementSelector: '.MuiDrawer-anchorLeft > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorRight', + replacementSelector: '.MuiDrawer-anchorRight > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorTop', + replacementSelector: '.MuiDrawer-anchorTop > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorDockedBottom', + replacementSelector: '.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorDockedLeft', + replacementSelector: '.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorDockedRight', + replacementSelector: '.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper', + }, + { + deprecatedClass: ' .MuiDrawer-paperAnchorDockedTop', + replacementSelector: '.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper', + }, +]; + +// todo: fix `deperecated` -> `deprecated` +const plugin = () => { + return { + postcssPlugin: `Replace deprecated Drawer 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/drawer-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/drawer-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-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/drawer-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/actual.css new file mode 100644 index 00000000000000..15b56c91928b69 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/actual.css @@ -0,0 +1,31 @@ +.MuiDrawer-root .MuiDrawer-paperAnchorBottom { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorLeft { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorRight { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorTop { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorDockedBottom { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorDockedLeft { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorDockedRight { + color: red; +} + +.MuiDrawer-root .MuiDrawer-paperAnchorDockedTop { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/actual.js new file mode 100644 index 00000000000000..e244b69961d99a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/actual.js @@ -0,0 +1,18 @@ +import { drawerClasses } from '@mui/material/Drawer'; + +("& .MuiDrawer-paperAnchorBottom"); +("& .MuiDrawer-paperAnchorLeft"); +("& .MuiDrawer-paperAnchorRight"); +("& .MuiDrawer-paperAnchorTop"); +("& .MuiDrawer-paperAnchorDockedBottom"); +("& .MuiDrawer-paperAnchorDockedLeft"); +("& .MuiDrawer-paperAnchorDockedRight"); +("& .MuiDrawer-paperAnchorDockedTop"); +`& .${drawerClasses.paperAnchorBottom}`; +`& .${drawerClasses.paperAnchorLeft}`; +`& .${drawerClasses.paperAnchorRight}`; +`& .${drawerClasses.paperAnchorTop}`; +`& .${drawerClasses.paperAnchorDockedBottom}`; +`& .${drawerClasses.paperAnchorDockedLeft}`; +`& .${drawerClasses.paperAnchorDockedRight}`; +`& .${drawerClasses.paperAnchorDockedTop}`; diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.css new file mode 100644 index 00000000000000..06ac6372292858 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.css @@ -0,0 +1,31 @@ +.MuiDrawer-root.MuiDrawer-anchorBottom > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-anchorLeft > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-anchorRight > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-anchorTop > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper { + color: red; +} + +.MuiDrawer-root.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.js new file mode 100644 index 00000000000000..8df90731aeeec0 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/expected.js @@ -0,0 +1,18 @@ +import { drawerClasses } from '@mui/material/Drawer'; + +("&.MuiDrawer-anchorBottom > .MuiDrawer-paper"); +("&.MuiDrawer-anchorLeft > .MuiDrawer-paper"); +("&.MuiDrawer-anchorRight > .MuiDrawer-paper"); +("&.MuiDrawer-anchorTop > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper"); +`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`; diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js index e7d2e159357815..99822d95498628 100644 --- a/packages/mui-material/src/Drawer/Drawer.js +++ b/packages/mui-material/src/Drawer/Drawer.js @@ -29,7 +29,7 @@ const useUtilityClasses = (ownerState) => { const { classes, anchor, variant } = ownerState; const slots = { - root: ['root'], + root: ['root', `anchor${capitalize(anchor)}`], docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'], modal: ['modal'], paper: [ diff --git a/packages/mui-material/src/Drawer/drawerClasses.ts b/packages/mui-material/src/Drawer/drawerClasses.ts index abbf0df5121dbc..c97818272f846d 100644 --- a/packages/mui-material/src/Drawer/drawerClasses.ts +++ b/packages/mui-material/src/Drawer/drawerClasses.ts @@ -8,21 +8,45 @@ export interface DrawerClasses { docked: string; /** Styles applied to the Paper component. */ paper: string; - /** Styles applied to the Paper component if `anchor="left"`. */ + /** Styles applied to the root element if `anchor="left"`. */ + anchorLeft: string; + /** Styles applied to the root element if `anchor="right"`. */ + anchorRight: string; + /** Styles applied to the root element if `anchor="top"`. */ + anchorTop: string; + /** Styles applied to the root element if `anchor="bottom"`. */ + anchorBottom: string; + /** Styles applied to the Paper component if `anchor="left"`. + * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorLeft: string; - /** Styles applied to the Paper component if `anchor="right"`. */ + /** Styles applied to the Paper component if `anchor="right"`. + * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorRight: string; - /** Styles applied to the Paper component if `anchor="top"`. */ + /** Styles applied to the Paper component if `anchor="top"`. + * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorTop: string; - /** Styles applied to the Paper component if `anchor="bottom"`. */ + /** Styles applied to the Paper component if `anchor="bottom"`. + * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorBottom: string; - /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary". */ + /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary". + * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorDockedLeft: string; - /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary". */ + /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary". + * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorDockedTop: string; - /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary". */ + /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary". + * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorDockedRight: string; - /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary". */ + /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary". + * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ paperAnchorDockedBottom: string; /** Styles applied to the Modal component. */ modal: string; @@ -38,6 +62,10 @@ const drawerClasses: DrawerClasses = generateUtilityClasses('MuiDrawer', [ 'root', 'docked', 'paper', + 'anchorLeft', + 'anchorRight', + 'anchorTop', + 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop',