refactor: [M3-6934] MUI v5 Migration - SRC > Features > Linodes pt 1#9445
refactor: [M3-6934] MUI v5 Migration - SRC > Features > Linodes pt 1#9445coliu-akamai merged 25 commits intolinode:developfrom
SRC > Features > Linodes pt 1#9445Conversation
| resetSelectedStackScript={resetStackScript} | ||
| selectedId={ss.id} | ||
| selectedUsername={ss.username} | ||
| updateFor={[classes, ss.id, errors]} |
There was a problem hiding this comment.
Since classes was just a Record<classes from the makeStyles, string> after the tss codemod (and just a ClassNameMap before), I think removing them from here should be ok? Seems like it was being checked in the renderGuard hoc
| data-qa-loading | ||
| key={id} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} |
There was a problem hiding this comment.
Just giving some context on why I made this change: Instead of having the parent component control the state of it's child using very specific css selectors (see LinodeRow.style.ts), I believe the component itself should be responsible for it's own state changes. By passing down an isHovered prop, the child component can toggle the copy icon itself.
| className={`${classes.row} ${showAll && classes.multipleAddresses}`} | ||
| key={key} | ||
| <StyledRenderIPDiv | ||
| {...handlers} |
There was a problem hiding this comment.
Same goes for this, see my comment here. In this case, we're conditionally applying the handlers since we only need them if showTooltipOnIpHover is true
| @@ -0,0 +1,14 @@ | |||
| import Grid from '@mui/material/Unstable_Grid2'; | |||
There was a problem hiding this comment.
saw that a lot of files had the same styling for a component, so I created a separate 'common' styling file for the package -- would this be fine? or is there another approach?
| sx={{ tooltip: { maxWidth: 300 } }} // ??? | ||
| // classes={{ tooltip: classes.maintenanceTooltip }} |
There was a problem hiding this comment.
is this feasible? unsure if this is the correct way to get the same behavior
| * or if it has a pending mutation available. Mutations take | ||
| * precedent over notifications | ||
| */ | ||
| const { classes, linodeNotifications, mutationAvailable } = props; |
There was a problem hiding this comment.
removed classes from the RenderFlag props, as it seemed it wasn't being used anyway (classes.flag was not a thing in the linode row styles anyway)
| }; | ||
|
|
||
| const renderIPRow = (ipDisplay: IPDisplay) => { | ||
| // TODO: in order to fully get rid of makeStyles for this file, may need to convert this to a functional component |
There was a problem hiding this comment.
Tried converting to styled componets/sx for components with classes.row and classes.copy, but this led to some styling behavior at first being lost. Possible solution to fully get rid of makestyles would likely be very similar to the stuff done in IPAddress.tsx/LinodeRow.tsx
jaalah-akamai
left a comment
jaalah-akamai
left a comment
There was a problem hiding this comment.
Nice improvements and updates
bnussman-akamai
left a comment
bnussman-akamai
left a comment
There was a problem hiding this comment.
Styles look good to me! 🎨
bnussman-akamai
added
Approved
#9445) * refactor [m3-6272] begin using codemod * refactor [m3-6272] continue switching to tss react * codemod to LinodesDetail * refactor [m3-6272] migrate linode create styles * IPAddress test difficulties * fix some styling * some more ip styling but some weird things going on * narrowing down a source of styling pain * need to look into this IP test * testing ip address * converting to styled components or sx * more style conversions * Improve linode ip address tooltip * Fix focus * rest of styling * it was not the rest of styling * cleanup of styling * fix up styling * Added changeset: MUI v5 Migration > SRC > Features > Linodes Pt 1 * all styles converted(except one file, see pr comment), for real this time --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
#9445) * refactor [m3-6272] begin using codemod * refactor [m3-6272] continue switching to tss react * codemod to LinodesDetail * refactor [m3-6272] migrate linode create styles * IPAddress test difficulties * fix some styling * some more ip styling but some weird things going on * narrowing down a source of styling pain * need to look into this IP test * testing ip address * converting to styled components or sx * more style conversions * Improve linode ip address tooltip * Fix focus * rest of styling * it was not the rest of styling * cleanup of styling * fix up styling * Added changeset: MUI v5 Migration > SRC > Features > Linodes Pt 1 * all styles converted(except one file, see pr comment), for real this time --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
4 participants
Description 📝
Part of migrating SRC > Features > Firewalls from MUI v4 to v5 -- breaking this PR up since there will be a lot of files. This specific pr is for styling changes: running the codemod, and then converting styles to styled components / sx if possible.
There will be a later PR for fixing up imports/exports, etc later
Major Changes 🔄
Preview 📷
How to test 🧪