[theme] Fix Hidden breakpoints issues and updates the migration guide

[mnajdova]

This PR addresses #22695 (comment) and updates the adaptV4Theme utility to support the type palette prop. In addition the migration-v4.md theme breaking changes is updated.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 7c5c413

[oliviertassinari]

1. So If I understand correctly, the only way to bring the v4 breakpoint behavior would be to have all internal usages flag that they are using the new variant. This might be overkill.
2. I don't understand why adaptV4Theme isn't enough to handle the theme.palette.type vs theme.palette.mode problem.

[mnajdova]

1. So If I understand correctly, the only way to bring the v4 breakpoint behavior would be to have all internal usages flag that they are using the new variant. This might be overkill.

Correct, I think we should just document this as a breaking change that we cannot backport..

2. I don't understand why adaptV4Theme isn't enough to handle the theme.palette.type vs theme.palette.mode problem.

For the input we are good, people can specify it as adaptV4Theme({ palette: { type: 'dark } }) but then in the styles, it is available trough theme.palette.mode, not theme.palette.type anymore - we could add both in the palette and it won't require any changes on client's side...

[oliviertassinari]

Correct, I think we should just document this as a breaking change that we cannot backport..

Happy to do that.

but then in the styles, it is available trough theme.palette.mode, not theme.palette.type anymore

Ok I see. What about we have adaptV4Theme() always return type and mode and force the default value? Would it solve the problem?

diff --git a/packages/material-ui/src/styles/adaptV4Theme.js b/packages/material-ui/src/styles/adaptV4Theme.js
index bc0adac56e..c67386fcbc 100644
--- a/packages/material-ui/src/styles/adaptV4Theme.js
+++ b/packages/material-ui/src/styles/adaptV4Theme.js
@@ -74,17 +74,20 @@ export default function adaptV4Theme(inputTheme) {
     ...mixins,
   };

-  const { type: mode, ...paletteRest } = palette;
+  const { type, mode, ...paletteRest } = palette;
+
+  const finalMode = mode || type || 'light';

   // theme.palette.text.hint
   theme.palette = {
     text: {
       hint:
-        palette.mode === 'dark' || palette.type === 'dark'
+        finalMode === 'dark'
           ? 'rgba(255, 255, 255, 0.5)'
           : 'rgba(0, 0, 0, 0.38)',
     },
-    mode,
+    mode: finalMode,
+    type: finalMode,
     ...paletteRest,
   };

[oliviertassinari]

I guess we could also handle #22695 (comment) here too O:).

[mnajdova]

Agree, let me do the updates and fix the Hidden component 👍

[mnajdova]

@oliviertassinari changes are implemented, please take another look :)