[material-ui][Drawer] Deprecate composed classes

[yash49]

part of #41282

migration guide preview - https://deploy-preview-44870--material-ui.netlify.app/material-ui/migration/migrating-from-deprecated-apis/#drawer

docs preview - https://deploy-preview-44870--material-ui.netlify.app/material-ui/api/drawer/#classes

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against e9ffc9b

[yash49]

I observed that SwipeableDrawer uses .MuiDrawer-<...> classes
instead of .MuiSwipeableDrawer-<...> classes

but the docs mention that it uses .MuiSwipeableDrawer-<...> classes

Question to maintainers -

1. SwipeableDrawer was affected by this PR
   Do I have to make any other changes for SwipeableDrawer

2. Also is there a way to fix this ?
   
   SwipeableDrawer class is deprecated but combined Drawer classes should be used instead?

[yash49]

3. Do we need any tests for new MuiDrawer-anchor<Direction> classes ?

[DiegoAndai]

Thanks for working on this @yash49, great work! Sorry for the delay.

About 1. and 2. about the classes, they were incorrectly documented. You're correct, the documentation should mention MuiDrawer, not MuiSwipeableDrawer. I pushed a commit to fix this.

3. Do we need any tests for new MuiDrawer-anchor<Direction> classes?

Yes, please! 😊

May I also ask you to prepare a sandbox (You can use this one which uses this PR builds) testing that the deprecated classes are correctly replaced by the suggested compositions? For example:

In the sandbox, have two drawers, one with:

<Drawer
    sx={[`&.${drawerClasses.paperAnchorBottom}`]: {
        backgroundColor: 'red',
    }
/>

and another with:

<Drawer
    sx={[`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
        backgroundColor: 'red',
    }
/>

And the result should be the same.

No need to do it with all the combinations, these should be enough:

• paperAnchorBottom
• paperAnchorDockedBottom

[yash49]

@DiegoAndai
here is the sandbox-> https://codesandbox.io/p/sandbox/material-ui-cra-ts-forked-qf7pwg?file=%2Fsrc%2FApp.tsx%3A17%2C27

[yash49]

@DiegoAndai I've also added the test
please review the PR

[DiegoAndai]

I think this is the last thing to fix:

[yash49]

I think this is the last thing to fix:

Good catch
Thanks
I've updated the PR

[DiegoAndai]

Thanks @yash49!