-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VE-221 Migrate deprecated APIs #989
Conversation
The app layout changes looks good @m4manjesh |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The changes are mostly good, with only a few minor adjustments needed.
/> | ||
</Grid> | ||
</Grid> | ||
)} | ||
{status === "success" && ( | ||
<Alert severity="success" style={{ marginBottom: 16 }}> | ||
<Alert severity="success" sx={{ marginBottom: 1 }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is marginBottom: 1 intentional?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the MUI spacing convention 1 unit is 8px, so the correct replacement would be sx={{ mb: 2 }}
src/Sidebar/Sidebar.tsx
Outdated
alignItems: "center", | ||
display: "flex", | ||
justifyContent: "space-between", | ||
p: theme => theme.spacing(2) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p:2
@@ -159,7 +185,7 @@ function VirtoAppHeader({ | |||
onClose={() => setAppOpen(false)} | |||
sx={theme => ({ | |||
"& .MuiDrawer-paper": { | |||
height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`, | |||
height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px) `, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove space
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me. Tested the AppLayout changes and works well. Reran the mui deprecation codemod and picked up no other changes. Just Nikithas feedback to address.
Good catch. Seems like this is working fine with |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please change mb in passwordChangeDialog otherwise everything lgtm.
/> | ||
</Grid> | ||
</Grid> | ||
)} | ||
{status === "success" && ( | ||
<Alert severity="success" style={{ marginBottom: 16 }}> | ||
<Alert severity="success" sx={{ mb: 1 }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be mb:2 to match the marginBottom: 16, as mb:1 equals 8px.
Closes VE-221
Changes
During the RUI migration to MUI v6 here, we noticed it is good to handle deprecations now before they become breaking changes. This PR focuses on migrating recently deprecated APIs to stay up-to-date and improve the developer experience.
A brief description of what this pull request solves / introduces.
Many system props such as
mt
,bgColor
and more are deprecated in Box, Typography, Link, Grid, and Stack components. So here we are moving the most of the of the system props tosx
props. See below exampleHidden
component was already deprecated. Remove it and useuseMediaQuery
to achieve the same behaviour as followsIn ThemeProvider.tsx i have added
mixins.toolbar.minHeight to 64
to fixAppLauncherover
overlapping issue withAppHeader
in VIRTO apps. Also changed using custom64px
inVirtoAppLayout
andAppLayout
to calculateheight
andtop
, instead of usingtheme.mixins.toolbar.minHeight
.Before
After
components
andcomponentProps
are deprecated and eventually removed. Using standardizedslots
andslotProps
insteadDependencies
This needs to wait to merge until this PR gets merged
UI/UX
There are some small UI changes related to
AppLauncher
top spacing as mentioned above. It would be good to get reviewed by you @Sowbhagya-ipg.Testing notes
Most of the components touched and most of the changes are identical in this PR. But still, make sure all stories are still working the same as before. Check that the changes i made in
VirtoAppLayout
andAppLayout
didn't break the behaviour we have.Author checklist
Before I request a review:
I have included appropriate tests.I have populated the deploy-preview with relevant test data.