Skip to content

Commit ee00a1d

Browse files
jsjoeiojsjoeio
authored
chore(site): fix material ui warning (coder#4161)
* chore(deps): upgrade @material-ui/core to 4.12.4 This is the latest version which includes a fix for the warning we were seeing while running our tests about `css` function being deprecated. * refactor: use alpha() instead of fade `fade()` was deprecated in favor of `alpha()` in a previous version of `@material-ui/core/styles`. * refactor: rows -> minRows This was deprecated in a previous version of `@material-ui/core`. * refactor: overlap circle -> circular overlap="circle" was deprecated in favor of overlap="circular". * refactor: createMuiTheme -> createTheme This was deprecated and changed to `createTheme`. * fixup!: chore(deps): upgrade @material-ui/core to 4.12.4 * fixup!: refactor: createMuiTheme -> createTheme * fix: add SvgIconProps on icons I couldn't find any release notes or breaking changes related to this but it seems `props` can no longer be inferred on `SvgIcon`s so I had to manually add the type. * Revert "refactor: rows -> minRows" This reverts commit 94dae6f. * chore(deps): downgrade @material-ui/core to 4.12.0 * fixup!: fix: add SvgIconProps on icons * fix: pass {} to useStyles Looks like we may need to pass an empty object if some components in a file use `props` in styles and some don't. * fix: update types in Pill.tsx We need to use generics so that `makeStyles` correctly infers the types for the `Pill.tsx` styles. I also updated the types to use `PillProps` directly to make sure they stay in sync.
1 parent 99013b3 commit ee00a1d

File tree

18 files changed

+77
-78
lines changed

18 files changed

+77
-78
lines changed

‎site/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@emoji-mart/react": "^1.0.1",
3131
"@fontsource/ibm-plex-mono": "4.5.10",
3232
"@fontsource/inter": "4.5.11",
33-
"@material-ui/core": "4.9.4",
33+
"@material-ui/core": "4.12.1",
3434
"@material-ui/icons": "4.5.1",
3535
"@material-ui/lab": "4.0.0-alpha.42",
3636
"@testing-library/react-hooks": "8.0.1",

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import DialogActions from "@material-ui/core/DialogActions"
2-
import { fade, makeStyles } from "@material-ui/core/styles"
2+
import { alpha, makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
44
import React, { ReactNode } from "react"
55
import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
@@ -65,11 +65,11 @@ const useStyles = makeStyles((theme) => ({
6565
marginBottom: theme.spacing(3),
6666
},
6767
description: {
68-
color: fade(theme.palette.text.secondary, 0.75),
68+
color: alpha(theme.palette.text.secondary, 0.75),
6969
lineHeight: "160%",
7070

7171
"& strong": {
72-
color: fade(theme.palette.text.secondary, 0.95),
72+
color: alpha(theme.palette.text.secondary, 0.95),
7373
},
7474
},
7575
}))

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
22
import MuiDialogTitle from "@material-ui/core/DialogTitle"
3-
import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
3+
import { alpha, darken, lighten, makeStyles } from "@material-ui/core/styles"
44
import SvgIcon from "@material-ui/core/SvgIcon"
55
import * as React from "react"
66
import { combineClasses } from "../../util/combineClasses"
@@ -57,7 +57,7 @@ const useTitleStyles = makeStyles(
5757
icon: {
5858
height: 84,
5959
width: 84,
60-
color: fade(theme.palette.action.disabled, 0.4),
60+
color: alpha(theme.palette.action.disabled, 0.4),
6161
},
6262
}),
6363
{ name: "CdrDialogTitle" },
@@ -155,27 +155,27 @@ const useButtonStyles = makeStyles((theme) => ({
155155
boxShadow: "none",
156156
},
157157
cancelButton: {
158-
background: fade(theme.palette.primary.main, 0.1),
158+
background: alpha(theme.palette.primary.main, 0.1),
159159
color: theme.palette.primary.main,
160160

161161
"&:hover": {
162-
background: fade(theme.palette.primary.main, 0.3),
162+
background: alpha(theme.palette.primary.main, 0.3),
163163
},
164164
},
165165
confirmDialogCancelButton: (props: StyleProps) => {
166166
const color =
167167
props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
168168
return {
169-
background: fade(color, 0.15),
169+
background: alpha(color, 0.15),
170170
color,
171171

172172
"&:hover": {
173-
background: fade(color, 0.3),
173+
background: alpha(color, 0.3),
174174
},
175175

176176
"&.Mui-disabled": {
177-
background: fade(color, 0.15),
178-
color: fade(color, 0.5),
177+
background: alpha(color, 0.15),
178+
color: alpha(color, 0.5),
179179
},
180180
}
181181
},
@@ -214,15 +214,15 @@ const useButtonStyles = makeStyles((theme) => ({
214214
},
215215
"&.Mui-disabled": {
216216
backgroundColor: theme.palette.action.disabledBackground,
217-
color: fade(theme.palette.text.disabled, 0.5),
217+
color: alpha(theme.palette.text.disabled, 0.5),
218218
},
219219
},
220220

221221
"&.MuiButton-outlined": {
222222
color: theme.palette.error.main,
223223
borderColor: theme.palette.error.main,
224224
"&:hover": {
225-
backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
225+
backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
226226
"@media (hover: none)": {
227227
backgroundColor: "transparent",
228228
},
@@ -231,21 +231,21 @@ const useButtonStyles = makeStyles((theme) => ({
231231
},
232232
},
233233
"&.Mui-disabled": {
234-
color: fade(theme.palette.text.disabled, 0.5),
234+
color: alpha(theme.palette.text.disabled, 0.5),
235235
borderColor: theme.palette.action.disabled,
236236
},
237237
},
238238

239239
"&.MuiButton-text": {
240240
color: theme.palette.error.main,
241241
"&:hover": {
242-
backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
242+
backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
243243
"@media (hover: none)": {
244244
backgroundColor: "transparent",
245245
},
246246
},
247247
"&.Mui-disabled": {
248-
color: fade(theme.palette.text.disabled, 0.5),
248+
color: alpha(theme.palette.text.disabled, 0.5),
249249
},
250250
},
251251
},
@@ -264,15 +264,15 @@ const useButtonStyles = makeStyles((theme) => ({
264264
},
265265
"&.Mui-disabled": {
266266
backgroundColor: theme.palette.action.disabledBackground,
267-
color: fade(theme.palette.text.disabled, 0.5),
267+
color: alpha(theme.palette.text.disabled, 0.5),
268268
},
269269
},
270270

271271
"&.MuiButton-outlined": {
272272
color: theme.palette.success.main,
273273
borderColor: theme.palette.success.main,
274274
"&:hover": {
275-
backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
275+
backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
276276
"@media (hover: none)": {
277277
backgroundColor: "transparent",
278278
},
@@ -281,21 +281,21 @@ const useButtonStyles = makeStyles((theme) => ({
281281
},
282282
},
283283
"&.Mui-disabled": {
284-
color: fade(theme.palette.text.disabled, 0.5),
284+
color: alpha(theme.palette.text.disabled, 0.5),
285285
borderColor: theme.palette.action.disabled,
286286
},
287287
},
288288

289289
"&.MuiButton-text": {
290290
color: theme.palette.success.main,
291291
"&:hover": {
292-
backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
292+
backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
293293
"@media (hover: none)": {
294294
backgroundColor: "transparent",
295295
},
296296
},
297297
"&.Mui-disabled": {
298-
color: fade(theme.palette.text.disabled, 0.5),
298+
color: alpha(theme.palette.text.disabled, 0.5),
299299
},
300300
},
301301
},

‎site/src/components/Icons/CloseIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SvgIcon from "@material-ui/core/SvgIcon"
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
22

3-
export const CloseIcon: typeof SvgIcon = (props) => (
3+
export const CloseIcon: typeof SvgIcon = (props: SvgIconProps) => (
44
<SvgIcon {...props} viewBox="0 0 31 31">
55
<path
66
d="M29.5 1.5l-28 28M29.5 29.5l-28-28"

‎site/src/components/Icons/FileCopyIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SvgIcon from "@material-ui/core/SvgIcon"
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
22

3-
export const FileCopyIcon: typeof SvgIcon = (props) => (
3+
export const FileCopyIcon: typeof SvgIcon = (props: SvgIconProps) => (
44
<SvgIcon {...props} viewBox="0 0 20 20">
55
<path
66
d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"

‎site/src/components/Icons/SearchIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SvgIcon from "@material-ui/core/SvgIcon"
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
22

3-
export const SearchIcon: typeof SvgIcon = (props) => (
3+
export const SearchIcon: typeof SvgIcon = (props: SvgIconProps) => (
44
<SvgIcon {...props} viewBox="0 0 16 16">
55
<path d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z" />
66
</SvgIcon>

‎site/src/components/Icons/UsersOutlinedIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SvgIcon from "@material-ui/core/SvgIcon"
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
22

3-
export const UsersOutlinedIcon: typeof SvgIcon = (props) => (
3+
export const UsersOutlinedIcon: typeof SvgIcon = (props: SvgIconProps) => (
44
<SvgIcon {...props} viewBox="0 0 20 20">
55
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
66
<path

‎site/src/components/Icons/WorkspacesIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SvgIcon from "@material-ui/core/SvgIcon"
1+
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
22

3-
export const WorkspacesIcon: typeof SvgIcon = (props) => (
3+
export const WorkspacesIcon: typeof SvgIcon = (props: SvgIconProps) => (
44
<SvgIcon {...props} viewBox="0 0 16 16">
55
<path d="M6 14H2V2H12V5.5L14 7V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1L0 15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16H6V14Z" />
66
<path d="M12 8L8 11V16H11V13H13.035V16H16V11L12 8Z" />

‎site/src/components/LoadingButton/LoadingButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Button, { ButtonProps } from "@material-ui/core/Button"
22
import CircularProgress from "@material-ui/core/CircularProgress"
33
import { makeStyles } from "@material-ui/core/styles"
4-
import { Theme } from "@material-ui/core/styles/createMuiTheme"
4+
import { Theme } from "@material-ui/core/styles/createTheme"
55
import { FC } from "react"
66

77
export interface LoadingButtonProps extends ButtonProps {

‎site/src/components/PageHeader/PageHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const PageHeader: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
1212
actions,
1313
className,
1414
}) => {
15-
const styles = useStyles()
15+
const styles = useStyles({})
1616

1717
return (
1818
<div className={combineClasses([styles.root, className])}>
@@ -27,7 +27,7 @@ export const PageHeader: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
2727
}
2828

2929
export const PageHeaderTitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
30-
const styles = useStyles()
30+
const styles = useStyles({})
3131

3232
return <h1 className={styles.title}>{children}</h1>
3333
}

‎site/src/components/Pill/Pill.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { makeStyles } from "@material-ui/core/styles"
1+
import { makeStyles, Theme } from "@material-ui/core/styles"
22
import { FC } from "react"
33
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
44
import { PaletteIndex } from "theme/palettes"
@@ -12,8 +12,9 @@ export interface PillProps {
1212
lightBorder?: boolean
1313
}
1414

15-
export const Pill: FC<PillProps> = ({ className, icon, text, type, lightBorder = false }) => {
16-
const styles = useStyles({ icon, type, lightBorder })
15+
export const Pill: FC<PillProps> = (props) => {
16+
const { className, icon, text = false } = props
17+
const styles = useStyles(props)
1718
return (
1819
<div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
1920
{icon && <div className={styles.iconWrapper}>{icon}</div>}
@@ -22,7 +23,7 @@ export const Pill: FC<PillProps> = ({ className, icon, text, type, lightBorder =
2223
)
2324
}
2425

25-
const useStyles = makeStyles((theme) => ({
26+
const useStyles = makeStyles<Theme, PillProps>((theme) => ({
2627
wrapper: {
2728
fontFamily: MONOSPACE_FONT_FAMILY,
2829
display: "inline-flex",
@@ -34,16 +35,14 @@ const useStyles = makeStyles((theme) => ({
3435
fontWeight: 500,
3536
color: "#FFF",
3637
height: theme.spacing(3),
37-
paddingLeft: ({ icon }: { icon?: React.ReactNode }) =>
38-
icon ? theme.spacing(0.75) : theme.spacing(1.5),
38+
paddingLeft: ({ icon }) => (icon ? theme.spacing(0.75) : theme.spacing(1.5)),
3939
paddingRight: theme.spacing(1.5),
4040
whiteSpace: "nowrap",
4141
},
4242

4343
pillColor: {
44-
backgroundColor: ({ type }: { type?: PaletteIndex }) =>
45-
type ? theme.palette[type].dark : theme.palette.text.secondary,
46-
borderColor: ({ type, lightBorder }: { type?: PaletteIndex; lightBorder?: boolean }) =>
44+
backgroundColor: ({ type }) => (type ? theme.palette[type].dark : theme.palette.text.secondary),
45+
borderColor: ({ type, lightBorder }) =>
4746
type
4847
? lightBorder
4948
? theme.palette[type].light

‎site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Menu from "@material-ui/core/Menu"
55
import MenuItem from "@material-ui/core/MenuItem"
66
import OutlinedInput from "@material-ui/core/OutlinedInput"
77
import { makeStyles } from "@material-ui/core/styles"
8-
import { Theme } from "@material-ui/core/styles/createMuiTheme"
8+
import { Theme } from "@material-ui/core/styles/createTheme"
99
import SearchIcon from "@material-ui/icons/Search"
1010
import debounce from "just-debounce-it"
1111
import { useCallback, useRef, useState } from "react"

‎site/src/components/TabPanel/TabPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import { fade } from "@material-ui/core/styles/colorManipulator"
2+
import { alpha } from "@material-ui/core/styles/colorManipulator"
33
import { FC } from "react"
44
import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
55

@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
5353
position: "absolute",
5454
left: -50,
5555
top: 31,
56-
color: fade(theme.palette.common.black, 0.1),
56+
color: alpha(theme.palette.common.black, 0.1),
5757
transition: "transform 0.3s ease",
5858
zIndex: -1,
5959
},

‎site/src/components/TableCellData/TableCellData.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const TableCellDataPrimary: React.FC<React.PropsWithChildren<{ highlight?
2222
export const TableCellDataSecondary: React.FC<React.PropsWithChildren<unknown>> = ({
2323
children,
2424
}) => {
25-
const styles = useStyles()
25+
const styles = useStyles({})
2626

2727
return <span className={styles.secondary}>{children}</span>
2828
}

‎site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ export const HelpTooltip: React.FC<React.PropsWithChildren<HelpTooltipProps>> =
9797
}
9898

9999
export const HelpTooltipTitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
100-
const styles = useStyles()
100+
const styles = useStyles({})
101101

102102
return <h4 className={styles.title}>{children}</h4>
103103
}
104104

105105
export const HelpTooltipText: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
106-
const styles = useStyles()
106+
const styles = useStyles({})
107107

108108
return <p className={styles.text}>{children}</p>
109109
}
@@ -112,7 +112,7 @@ export const HelpTooltipLink: React.FC<React.PropsWithChildren<{ href: string }>
112112
children,
113113
href,
114114
}) => {
115-
const styles = useStyles()
115+
const styles = useStyles({})
116116

117117
return (
118118
<Link href={href} target="_blank" rel="noreferrer" className={styles.link}>
@@ -129,7 +129,7 @@ export const HelpTooltipAction: React.FC<
129129
ariaLabel?: string
130130
}>
131131
> = ({ children, icon: Icon, onClick, ariaLabel }) => {
132-
const styles = useStyles()
132+
const styles = useStyles({})
133133
const tooltip = useHelpTooltip()
134134

135135
return (
@@ -149,7 +149,7 @@ export const HelpTooltipAction: React.FC<
149149
}
150150

151151
export const HelpTooltipLinksGroup: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
152-
const styles = useStyles()
152+
const styles = useStyles({})
153153

154154
return (
155155
<Stack spacing={1} className={styles.linksGroup}>

‎site/src/components/UserDropdown/UsersDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const UserDropdown: React.FC<React.PropsWithChildren<UserDropdownProps>>
3737
data-testid="user-dropdown-trigger"
3838
>
3939
<div className={styles.inner}>
40-
<Badge overlap="circle">
40+
<Badge overlap="circular">
4141
<UserAvatar username={user.username} avatarURL={user.avatar_url} />
4242
</Badge>
4343
{anchorEl ? (

‎site/src/theme/theme.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createMuiTheme } from "@material-ui/core/styles"
1+
import { createTheme } from "@material-ui/core/styles"
22
import { PaletteOptions } from "@material-ui/core/styles/createPalette"
33
import { borderRadius } from "./constants"
44
import { getOverrides } from "./overrides"
@@ -7,7 +7,7 @@ import { props } from "./props"
77
import { typography } from "./typography"
88

99
const makeTheme = (palette: PaletteOptions) => {
10-
const theme = createMuiTheme({
10+
const theme = createTheme({
1111
palette,
1212
typography,
1313
shape: {

0 commit comments

Comments
 (0)