[material-ui] Deprecate composed CSS classes

[DiegoAndai]

Part of #40417

Description

Deprecate composed CSS classes, which are planned for removal in v7.

• These are deprecated in favor of using atomic classes and combining them in userland
• If the atomic classes do not exist, they must be implemented in the same PR in which the deprecation is added
• The PR introducing the deprecation must also add:
  • A section in the migration guide
  • A codemod

Example PR

• [material-ui][Chip] Deprecate composed classes #41235

Contributing

Feel free to take any components that still need to be done or in progress. Please mention this issue in your PR so we can link it in the description and keep it up to date.

Components to migrate

• AccordionSummary: #40418, #41006
• Alert: #40688
• Button: #40675
• ButtonGroup: #41259
• Chip: #41235
• CircularProgress: #42076
• Dialog
• Divider
• Drawer
• FilledInput
• ImageListItemBar: #42905
• Input
• InputBase
• LinearProgress
• LoadingButton
• NativeSelect
• OutlinedInput
• PaginationItem: #40673, #41145
• Select
• Slider
• SpeedDial
• SpeedDialAction
• SpeedDialIcon
• StepConnector: #41740
• SwipeableDrawer
• TableSortLabel: #42281
• TabList
• Tabs
• ToggleButtonGroup: #41288
• Tooltip

Search keywords: deprecation composed classes material-ui

Search keywords:

[harry-whorlow]

Hi @DiegoAndai,

I would like to help out with this task, I'm thinking of starting with tooltip, but I'm having a little difficulty discerning the composed classes from the atomic ones. I'm looking at the docs docs,
would I be correct in assuming that the merge request should look something along the lines of:

.MuiTooltip-arrow
.MuiTooltip-popper
.MuiTooltip-popperArrow [deprecated]
.MuiTooltip-popperClose [deprecated]
.MuiTooltip-popperInteractive [deprecated]
.MuiTooltip-tooltip
.MuiTooltip-tooltipArrow
.MuiTooltip-tooltipPlacementBottom [deprecated]
.MuiTooltip-tooltipPlacementLeft [deprecated]
.MuiTooltip-tooltipPlacementRight [deprecated]
.MuiTooltip-tooltipPlacementTop [deprecated]
.MuiTooltip-touch

Where the composed classes are the the joins of what would be individual css classes applied to the children.

[DiegoAndai]

Hi @harry-whorlow! The Tooltip components is a complex component, I'm not sure what the best class structure would be best 🤔

I would suggest starting with the SpeedDial component.

[harry-whorlow]

Copy that, I'll start with the old friend SpeedDial 🫡

[edit]: I've had a lot of things come up, if someone wants to take over go ahead. I'll update this comment if something changes in the future. Sorry

[alisasanib]

Hi @DiegoAndai

I would like to help out with this task. Is it still available for contribution from the community?

[yash49]

Hello @DiegoAndai, I would like to contribute as well.
Which of the remaining components would you recommend?