MUI Grid Cleanup #2567
MUI Grid Cleanup #2567
Conversation
cammiida
force-pushed
the
chore/mui-grid-cleanup
branch
2 times, most recently
from
8018960 to
38497c5
Compare
|
cammiida
added
kind/other
|
Har du tatt i bruk designsystemet sine tokens her? *Edit: Dette gjøres senere |
cammiida
force-pushed
the
chore/mui-grid-cleanup
branch
from
38497c5 to
38e755c
Compare
cammiida
force-pushed
the
chore/mui-grid-cleanup
branch
from
881d0bd to
e44e282
Compare
# Conflicts: # src/layout/GenericComponent.tsx
| /* Small (sm breakpoint) */ | ||
| @media (min-width: 600px) { |
There was a problem hiding this comment.
These breakpoints don't match what we've been using before (see the exported breakpoints from useDeviceWidths.ts). If you took the default values from MUI, remember that we're overriding the theme (see altinnApTheme.tsx, which also don't match the breakpoints in useDeviceWidths.ts 😕)
There was a problem hiding this comment.
I had the correct breakpoints at first, but i got a diff from percy, and i changed it all back. I will look deeper into it! :)
There was a problem hiding this comment.
I see now that we need the current breakpoints as it is, because this corresponds with the MUI Grid component. They are equal to the overriding theme values(altinnApTheme.tsx ). I think that we should consider the changing the values of the spacing/breakpoints/etc to correspond with the designsystemet as a next iteration on the Flex component. Now the focus is to get rid of MUI without breaking changes.
| size={{ | ||
| xs: displayGrid?.xs ?? 12, | ||
| sm: displayGrid?.sm, | ||
| md: displayGrid?.md, | ||
| lg: displayGrid?.lg, | ||
| xl: displayGrid?.xl, | ||
| }} |
There was a problem hiding this comment.
Doesn't these do the same thing? 🤔
| size={{ | |
| xs: displayGrid?.xs ?? 12, | |
| sm: displayGrid?.sm, | |
| md: displayGrid?.md, | |
| lg: displayGrid?.lg, | |
| xl: displayGrid?.xl, | |
| }} | |
| size={displayGrid} |
There was a problem hiding this comment.
No, the difference is that the fallback for xs on 12 is not applied.
There was a problem hiding this comment.
So if you don't specify a size for xs, what does it do when you shrink it down? 🤔 I would imagine 12 is a good default.
There was a problem hiding this comment.
If you dont specify size for xs you dont get fluid sizing. This is the default behavior of MUI. it would still be 12 as a default but not fluid sizing. We could rewrite this to be default fluid 12, but it would require a rewrite css of many of our components. The priority in this PR is just to replicate what we already had. Many possibilities to improve our grid system now that we own it ourselves.
Co-authored-by: Ole Martin Handeland <[email protected]>
Co-authored-by: Ole Martin Handeland <[email protected]>
…re/mui-grid-cleanup
|
Description
Remove use of MUI Grid component and replace it with our own Flex component, as a part of the way to get rid of the dependency to material-ui.
Related Issue(s)
Verification/QA
kind/*label to this PR for proper release notes grouping