Skip to content

Commit 50aac3d

Browse files
anirudhpvanirudhpv
committed
fix: restore styles lost in the makeStyles to styled() migration
The MUI v5 codemod (#1667) converted makeStyles rules into descendant selectors on styled() wrappers, which broke rules meant for the root element, dropped prop-dependent rules, and attached styles to wrappers that never render the targeted elements. - Event Builder: restore the validation heading colors and the spacer between add/remove buttons. - Query Explorer: restore filter, date range and response spacing, the case-sensitive checkbox styles, and the dimension/metric option layout. - Campaign URL Builder, Dimensions & Metrics Explorer, Enhanced Ecommerce, PrettyJson: re-attach styles to elements that render them. - Layout: restore the full-height layout, the mobile drawer styles (rendered in a portal) and the disableNav behavior. - Select / SelectMultiple: restore the minimum width. - Drop the unused @mui/styles dependency.
1 parent fcd5f8b commit 50aac3d

19 files changed

Lines changed: 404 additions & 354 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"@emotion/styled": "^11.11.0",
1212
"@mui/icons-material": "^5.11.16",
1313
"@mui/material": "^5.13.0",
14-
"@mui/styles": "^5.14.15",
1514
"@mui/x-data-grid": "^6.4.0",
1615
"@mui/x-date-pickers": "^8.11.2",
1716
"@typescript-eslint/eslint-plugin": "^4.0.0",

‎src/components/CampaignURLBuilder/Play/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const Root = styled('section')((
9494
},
9595
},
9696

97-
[`& .${classes.form}`]: {
97+
[`&.${classes.form}`]: {
9898
maxWidth: "80ch",
9999
}
100100
}));

‎src/components/CampaignURLBuilder/Web/GeneratedURL/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const StyledPaper = styled(Paper)((
3535
wordBreak: "break-all",
3636
},
3737

38-
[`& .${classes.form}`]: {
38+
[`&.${classes.form}`]: {
3939
maxWidth: "80ch",
4040
},
4141

‎src/components/GA4Pickers/index.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ const classes = {
3232
left: `${PREFIX}-left`
3333
};
3434

35-
const StyledTextField
36-
= styled(TextField
37-
)(() => ({
38-
[`& .${classes.option}`]: {
35+
// Styled on the option element itself, since options render inside the
36+
// Autocomplete popper (outside of the TextField).
37+
const ColumnRoot = styled("div")({
38+
[`&.${classes.option}`]: {
3939
display: "flex",
4040
width: "100%",
4141
},
@@ -44,8 +44,8 @@ const StyledTextField
4444
flexGrow: 1,
4545
display: "flex",
4646
flexDirection: "column",
47-
}
48-
}));
47+
},
48+
})
4949

5050
export type GA4Dimension = gapi.client.analyticsdata.DimensionMetadata
5151
export type GA4Dimensions = GA4Dimension[] | undefined
@@ -55,7 +55,7 @@ type GA4Column = GA4Dimension | GA4Metric
5555

5656
const Column: React.FC<{ column: GA4Column }> = ({ column }) => {
5757
return (
58-
<div className={classes.option}>
58+
<ColumnRoot className={classes.option}>
5959
<div className={classes.left}>
6060
<Typography variant="body1" component="div">
6161
{column.uiName}
@@ -65,7 +65,7 @@ const Column: React.FC<{ column: GA4Column }> = ({ column }) => {
6565
</Typography>
6666
</div>
6767
<Typography variant="subtitle1" color="textSecondary"></Typography>
68-
</div>
68+
</ColumnRoot>
6969
)
7070
}
7171

@@ -126,7 +126,7 @@ export const DimensionsPicker: React.FC<{
126126
</li>
127127
)}
128128
renderInput={params => (
129-
<StyledTextField
129+
<TextField
130130
{...params}
131131
required={required}
132132
label={label}
@@ -198,7 +198,7 @@ export const MetricsPicker: React.FC<{
198198
</li>
199199
)}
200200
renderInput={params => (
201-
<StyledTextField
201+
<TextField
202202
{...params}
203203
required={required}
204204
label={label}
@@ -292,7 +292,7 @@ export const DimensionPicker: React.FC<{
292292
</li>
293293
)}
294294
renderInput={params => (
295-
<StyledTextField
295+
<TextField
296296
{...params}
297297
required={required}
298298
label={label}
@@ -383,7 +383,7 @@ export const MetricPicker: React.FC<{
383383
</li>
384384
)}
385385
renderInput={params => (
386-
<StyledTextField
386+
<TextField
387387
{...params}
388388
required={required}
389389
label={label}

‎src/components/Layout/index.tsx‎

Lines changed: 84 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@ const classes = {
9696
subHeading: `${PREFIX}-subHeading`,
9797
homeIcon: `${PREFIX}-homeIcon`,
9898
mobileHeading: `${PREFIX}-mobileHeading`,
99-
mobileMenu: `${PREFIX}-mobileMenu`
99+
mobileMenu: `${PREFIX}-mobileMenu`,
100+
disableNav: `${PREFIX}-disableNav`,
100101
};
101102

102103

@@ -152,7 +153,7 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
152153
}, [])
153154

154155
return (
155-
<div className={classes.root}>
156+
<StyledTemplate className={classes.root}>
156157
<Helmet
157158
htmlAttributes={{
158159
lang: "en",
@@ -163,7 +164,12 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
163164
<link rel="canonical" href="https://ga-dev-tools.google/" />
164165
<title>{title}</title>
165166
</Helmet>
166-
<AppBar position="static" className={classes.appBarNav}>
167+
<AppBar
168+
position="static"
169+
className={clsx(classes.appBarNav, {
170+
[classes.disableNav]: disableNav,
171+
})}
172+
>
167173
<IconButton
168174
edge="start"
169175
onClick={() => setOpen(true)}
@@ -183,7 +189,7 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
183189
userStatus={userStatus!}
184190
/>
185191
)}
186-
<Drawer open={open} onClose={() => setOpen(false)}>
192+
<StyledDrawer open={open} onClose={() => setOpen(false)}>
187193
<List className={classes.mobileNav}>
188194
<Link
189195
to={gaVersion === GAVersion.UniversalAnalytics ? "/" : "/ga4/"}
@@ -223,7 +229,7 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
223229
)
224230
})}
225231
</List>
226-
</Drawer>
232+
</StyledDrawer>
227233
</AppBar>
228234
<nav className={classes.nav}>
229235
<ol>
@@ -326,10 +332,74 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
326332
<BugReport />
327333
</footer>
328334
</main>
329-
</div>
335+
</StyledTemplate>
330336
)
331337
}
332338

339+
const navItemStyles = (theme: Theme) => ({
340+
[`& .${classes.noColor}`]: {
341+
color: "unset",
342+
},
343+
344+
[`& .${classes.innerNav}`]: {
345+
padding: theme.spacing(1),
346+
paddingLeft: theme.spacing(4),
347+
[mobile(theme)]: {
348+
paddingLeft: theme.spacing(2),
349+
paddingRight: theme.spacing(2),
350+
},
351+
},
352+
353+
[`& .${classes.navLinkBackgroundHover}`]: {
354+
"&:hover": {
355+
backgroundColor: theme.palette.grey[100],
356+
color: theme.palette.getContrastText(theme.palette.grey[100]),
357+
},
358+
},
359+
360+
[`& .${classes.home}`]: {
361+
margin: "unset",
362+
color: "unset",
363+
display: "flex",
364+
alignItems: "center",
365+
paddingLeft: theme.spacing(2),
366+
[notMobile(theme)]: {
367+
"&:hover": {
368+
color: theme.palette.primary.main,
369+
},
370+
},
371+
},
372+
373+
[`& .${classes.subHeading}`]: {
374+
width: "100%",
375+
borderTop: `1px solid ${theme.palette.grey[600]}`,
376+
marginTop: theme.spacing(2),
377+
paddingTop: theme.spacing(2),
378+
marginBottom: theme.spacing(1),
379+
paddingLeft: theme.spacing(4),
380+
[mobile(theme)]: {
381+
paddingLeft: theme.spacing(2),
382+
},
383+
},
384+
385+
[`& .${classes.homeIcon}`]: {
386+
marginLeft: theme.spacing(-0.5),
387+
paddingRight: theme.spacing(1),
388+
fontSize: "1.5em",
389+
},
390+
})
391+
392+
// The Drawer renders in a portal outside of StyledTemplate, so it needs its own
393+
// styles.
394+
const StyledDrawer = styled(Drawer)(({ theme }) => ({
395+
[`& .${classes.mobileNav}`]: {
396+
color: theme.palette.getContrastText(theme.palette.grey[800]),
397+
backgroundColor: theme.palette.grey[800],
398+
minHeight: "100%",
399+
},
400+
...navItemStyles(theme),
401+
}))
402+
333403
const StyledTemplate = styled('div')((
334404
{
335405
theme
@@ -357,7 +427,7 @@ const StyledTemplate = styled('div')((
357427
alignItems: "center",
358428
},
359429

360-
[`& .${classes.root}`]: {
430+
[`&.${classes.root}`]: {
361431
display: "flex",
362432
minHeight: "100%",
363433
[notMobile(theme)]: {
@@ -421,7 +491,7 @@ const StyledTemplate = styled('div')((
421491

422492
[`& .${classes.appBarNav}`]: {
423493

424-
[theme.breakpoints.up("md")]:
494+
[notMobile(theme)]:
425495
{
426496
display: "none",
427497
},
@@ -430,10 +500,8 @@ const StyledTemplate = styled('div')((
430500
paddingLeft: theme.spacing(1),
431501
},
432502

433-
[`& .${classes.mobileNav}`]: {
434-
color: theme.palette.getContrastText(theme.palette.grey[800]),
435-
backgroundColor: theme.palette.grey[800],
436-
minHeight: "100%",
503+
[`& .${classes.appBarNav}.${classes.disableNav}`]: {
504+
display: "none",
437505
},
438506

439507
[`& .${classes.nav}`]: {
@@ -462,56 +530,7 @@ const StyledTemplate = styled('div')((
462530
},
463531
},
464532

465-
[`& .${classes.noColor}`]: {
466-
color: "unset",
467-
},
468-
469-
[`& .${classes.innerNav}`]: {
470-
padding: theme.spacing(1),
471-
paddingLeft: theme.spacing(4),
472-
[mobile(theme)]: {
473-
paddingLeft: theme.spacing(2),
474-
paddingRight: theme.spacing(2),
475-
},
476-
},
477-
478-
[`& .${classes.navLinkBackgroundHover}`]: {
479-
"&:hover": {
480-
backgroundColor: theme.palette.grey[100],
481-
color: theme.palette.getContrastText(theme.palette.grey[100]),
482-
},
483-
},
484-
485-
[`& .${classes.home}`]: {
486-
margin: "unset",
487-
color: "unset",
488-
display: "flex",
489-
alignItems: "center",
490-
paddingLeft: theme.spacing(2),
491-
[notMobile(theme)]: {
492-
"&:hover": {
493-
color: theme.palette.primary.main,
494-
},
495-
},
496-
},
497-
498-
[`& .${classes.subHeading}`]: {
499-
width: "100%",
500-
borderTop: `1px solid ${theme.palette.grey[600]}`,
501-
marginTop: theme.spacing(2),
502-
paddingTop: theme.spacing(2),
503-
marginBottom: theme.spacing(1),
504-
paddingLeft: theme.spacing(4),
505-
[mobile(theme)]: {
506-
paddingLeft: theme.spacing(2),
507-
},
508-
},
509-
510-
[`& .${classes.homeIcon}`]: {
511-
marginLeft: theme.spacing(-0.5),
512-
paddingRight: theme.spacing(1),
513-
fontSize: "1.5em",
514-
},
533+
...navItemStyles(theme),
515534

516535
[`& .${classes.mobileHeading}`]: {
517536
color: theme.palette.getContrastText(theme.palette.primary.main),
@@ -530,10 +549,10 @@ const Layout2: React.FC<PropsWithChildren<LayoutProps>> = props => {
530549
return (
531550
<Loadable
532551
request={request}
533-
renderNotStarted={() => <StyledTemplate><Template {...props} notStarted /></StyledTemplate>}
534-
renderInProgress={() => <StyledTemplate><Template {...props} inProgress /></StyledTemplate>}
552+
renderNotStarted={() => <Template {...props} notStarted />}
553+
renderInProgress={() => <Template {...props} inProgress />}
535554
renderSuccessful={successProps => (
536-
<StyledTemplate><Template {...props} {...successProps} successful /></StyledTemplate>
555+
<Template {...props} {...successProps} successful />
537556
)}
538557
renderFailed={() => <Template {...props} failed />}
539558
/>

‎src/components/PrettyJson.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,28 @@ const classes = {
1414
json: `${PREFIX}-json`
1515
};
1616

17-
const StyledPaper = styled(Paper)((
18-
{
19-
theme
20-
}
21-
) => ({
22-
[`& .${classes.jsonWrapper}`]: {
17+
const jsonStyles = {
18+
[`& .${classes.json}`]: {
19+
flexGrow: 1,
20+
},
21+
}
22+
23+
const StyledDiv = styled("div")({
24+
[`&.${classes.jsonWrapper}`]: {
2325
display: "flex",
2426
alignItems: "flex-start",
2527
},
28+
...jsonStyles,
29+
})
2630

31+
const StyledPaper = styled(Paper)(({ theme }) => ({
2732
[`&.${classes.jsonPaper}`]: {
2833
padding: theme.spacing(2),
2934
display: "flex",
3035
alignItems: "flex-start",
3136
},
32-
33-
[`& .${classes.json}`]: {
34-
"flex-grow": "1",
35-
}
36-
}));
37+
...jsonStyles,
38+
}))
3739

3840
interface PrettyJsonProps {
3941
object: object | undefined
@@ -125,7 +127,11 @@ const PrettyJson: React.FC<PrettyJsonProps> = ({
125127
}
126128

127129
if (noPaper) {
128-
return <div className={clsx(classes.jsonWrapper, className)}>{inner}</div>
130+
return (
131+
<StyledDiv className={clsx(classes.jsonWrapper, className)}>
132+
{inner}
133+
</StyledDiv>
134+
)
129135
} else {
130136
return <StyledPaper className={clsx(classes.jsonPaper, className)}>{inner}</StyledPaper>;
131137
}

‎src/components/Select.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const Select: React.FC<SelectProps> = ({
3737
<Autocomplete<SelectOption, false, true, false>
3838
disableClearable
3939
className={className}
40+
sx={{ minWidth: "15ch" }}
4041
autoHighlight
4142
autoSelect
4243
options={options}

0 commit comments

Comments
 (0)