chore(6936): migrate core UI components from MUI v4 → v5#41955
chore(6936): migrate core UI components from MUI v4 → v5#41955
Conversation
- Update TextField: replace @material-ui/core imports with @mui/material, migrate withStyles/classes to sx prop, update JSS $class refs to .Mui-* classes - Update Slider: replace @material-ui/core/Slider with @mui/material Slider, migrate withStyles to sx prop, update &$active to &.Mui-active, remove v4-specific thumb margin offsets - Update CancelButton: replace @material-ui/core/Tooltip with @mui/material/Tooltip, rename position prop to placement - Add @mui/material, @emotion/react, @emotion/styled as direct dependencies - Update test console baseline (eliminates 4 prior MUI JSS warnings) Agent-Logs-Url: https://github.com/MetaMask/metamask-extension/sessions/a8f2e4e8-7701-4c87-8974-60a38d7cc640 Co-authored-by: MajorLift <34228073+MajorLift@users.noreply.github.com>
|
@metamaskbot update-policies |
|
Policies updated. Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 👀 lavamoat/browserify/beta/policy.json changes differ from main/policy.json policy changes |
✨ Files requiring CODEOWNER review ✨📜 @MetaMask/policy-reviewers (12 files, +1840 -208)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. |
Builds ready [e029c63]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
DDDDDanica
changed the title
…ui-components-mui-v4-v5
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Builds ready [9ef13df]
⚡ Performance Benchmarks (Total: 🟢 0 pass · 🟡 0 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [df9d5dc]
⚡ Performance Benchmarks (Total: 🟢 0 pass · 🟡 0 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…ui-components-mui-v4-v5
Builds ready [e43c1b8]
⚡ Performance Benchmarks (Total: 🟢 0 pass · 🟡 0 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [ac2ee62]
⚡ Performance Benchmarks (Total: 🟢 0 pass · 🟡 0 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
DDDDDanica
added
team-extension-platform
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ac2ee62. Configure here.
|
Builds ready [54c748d]
⚡ Performance Benchmarks (Total: 🟢 0 pass · 🟡 0 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
| }, | ||
| "@emotion/react>@emotion/cache": { | ||
| "globals": { | ||
| "document": true |
There was a problem hiding this comment.
@naugtur webpack's policy build has narrowed the document usages here down to a reasonable subset, usual just one or two properties on document. With webpack aiming to be released in about 1-2 weeks, do you think we should still bother with locking this down in the browserify build today?
Migrates three legacy UI components off
@material-ui/core(MUI v4) to@mui/material(MUI v5), replacing the JSS-basedwithStylesHOC pattern with the emotion-basedsxprop.Components changed
CancelButton— swapTooltipimport; renameposition→placement(v5 API change)Slider— removewithStyles; move styles tosliderSxconstant passed viasx; update&$active→&.Mui-active; drop v4-specific thumbmarginTop/marginLeftoffsets (v5 usestransform); addborder: 'none'to track to match v4 appearance (v5 adds a default border)TextField— removewithStylesand the injectedclassesprop; refactor all three theme prop builders (material,material-white-padded,bordered) to returnsxonInputLabelProps/InputPropsinstead ofclasses; update JSS&$classNamestate selectors to MUI v5 globals (&.Mui-focused,&.Mui-error)Style migration pattern
Dependencies
Added
@mui/material ^5.14.0,@emotion/react ^11.11.1, and@emotion/styled ^11.11.0as direct dependencies (all three were already resolved transitively; this makes the relationship explicit).Note
Medium Risk
Touches shared UI components and updates LavaMoat allowlists for new MUI v5/emotion dependency graphs, which could cause UI regressions or bundling/runtime policy breakage if misconfigured.
Overview
Migrates three legacy UI components (
CancelButton,Slider,TextField) from@material-ui/core(MUI v4) to@mui/material(MUI v5), replacingwithStyles/JSS styling with emotionsxstyling and updating minor API differences (e.g., Tooltipposition→placement).Updates depcheck ignores and broadens LavaMoat Browserify/Webpack policies (mv2/mv3; beta/experimental/flask/main) to allow the new
@mui/materialand@emotion/*dependency trees and required globals, while removing the old@material-ui/core>popper.jspolicy entries. Jest console baseline is adjusted to drop prior MUI JSS warning expectations for the slider tests.Reviewed by Cursor Bugbot for commit 54c748d. Bugbot is set up for automated code reviews on this repo. Configure here.