Update to MUI 7 #4139
Update to MUI 7 #4139
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4139 +/- ##
==========================================
- Coverage 94.91% 94.91% -0.01%
==========================================
Files 324 324
Lines 16147 16144 -3
Branches 2533 2532 -1
==========================================
- Hits 15326 15323 -3
Misses 816 816
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| @@ -20,7 +20,7 @@ export function SelectCollection({ | |||
| return ( | |||
| <Grid container justifyContent="center" alignItems="center"> | |||
| <Grid container direction="column" alignItems="center"> | |||
| <Typography variant="h4" paragraph> | |||
| <Typography variant="h4" component="p"> | |||
There was a problem hiding this comment.
The show collection button is no longer aligned in the center.
There was a problem hiding this comment.
The cause for that is not in the Typography change, of course. In the old version, the div for the row Grid (the component that is now GridLegacy) two lines above had a CSS width of 100% that is missing in the new version. Adding size="grow" to the row Grid would be one option to solve this.
There was a problem hiding this comment.
@lutzhelm thank you for finding this. But I am not seeing it? This looks centered to me.
There was a problem hiding this comment.
But I do see this!
There was a problem hiding this comment.
I checked out 9ada8ca just to double check, and this is what it looks like to me - centered as it should:
I'm a bit confused and wonder where those differences come from. I tested with Firefox 136, Chromium 136 and Chrome 135 on Ubuntu Linux, running Mirador with NodeJS 20.18.1 and npm 10.8.2.
There was a problem hiding this comment.
While the manifest list itself looks way better than before, ManifestListItemError looks a bit disordered now.
There was a problem hiding this comment.
Thanks for finding this. I actually started seeing even worse behavior where the stacking was overlapping. Which is odd that neither of us saw that before so I'm curious if you can reproduce prior to 07789cd . I added a separate commit 07789cd Rework the manifest list layout to this PR to address that -- please let me know what you see, but here's what I see now:
There was a problem hiding this comment.
This is what I see on commit 07789cd (your latest from yesterday):
These differences don't really inspire confidence. But if there aren't any functional problems, we could fix other surfacing related issues along the way.
This was mostly created using MUI's codemods.
The
Grid2component has moved back into theGridnamespace. That is the biggest change.(for testing purposes, also included is @lutzhelm's syntax for externalizing peer dependencies but I can slice this out into another PR.)
Visually, the changes seem to have no impact, but of course more eyes are better!
I am interested in this upgrade because of the solution for better ESM support: mui/material-ui#45495. This will fix some issues reported during plugin integration such as #4136
If this is approved and merged and we cut a new alpha release, I have PRs drafted locally for several plugins to support this change. And some like
image-toolsseem to require zero changes to support 7.