Skip to content

chore(site): fix material ui warning#4161

Merged
jsjoeio merged 14 commits into
mainfrom
jsjoeio/fix-material-ui-warning
Sep 23, 2022
Merged

chore(site): fix material ui warning#4161
jsjoeio merged 14 commits into
mainfrom
jsjoeio/fix-material-ui-warning

Conversation

@jsjoeio

@jsjoeio jsjoeio commented Sep 22, 2022

Copy link
Copy Markdown
Contributor

I was annoyed by the Material UI warning I kept seeing in the console when running yarn test so I decided to fix it based on this StackOverflow answer.

Changes

See commits for descriptions

  • chore(deps): upgrade @material-ui/core to 4.12.4
  • refactor: use alpha() instead of fade
  • refactor: rows -> minRows
  • refactor: overlap circle -> circular
  • refactor: createMuiTheme -> createTheme

This is the latest version which includes a fix for the warning we were
seeing while running our tests about `css` function being deprecated.
`fade()` was deprecated in favor of `alpha()` in a previous version of
`@material-ui/core/styles`.
This was deprecated in a previous version of `@material-ui/core`.
overlap="circle" was deprecated in favor of overlap="circular".
This was deprecated and changed to `createTheme`.
@jsjoeio jsjoeio changed the title jsjoeio/fix material ui warning chore(site): fix material ui warning Sep 22, 2022
@jsjoeio jsjoeio self-assigned this Sep 22, 2022
@jsjoeio jsjoeio marked this pull request as ready for review September 22, 2022 20:21
@jsjoeio jsjoeio requested a review from a team as a code owner September 22, 2022 20:21
@jsjoeio jsjoeio requested review from Kira-Pilot and removed request for a team September 22, 2022 20:21

@Kira-Pilot Kira-Pilot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing this! That was bugging me, too.

@jsjoeio jsjoeio enabled auto-merge (squash) September 22, 2022 20:36
@jsjoeio

jsjoeio commented Sep 22, 2022

Copy link
Copy Markdown
Contributor Author

Looks like there are some other changes I missed. Adding those now.

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.
@jsjoeio jsjoeio marked this pull request as draft September 22, 2022 23:00
auto-merge was automatically disabled September 22, 2022 23:00

Pull request was converted to draft

@jsjoeio

jsjoeio commented Sep 22, 2022

Copy link
Copy Markdown
Contributor Author

I'm not seeing these same errors locally when I run yarn test:coverage 🤔 I'll fix them first thing tomorrow: https://github.com/coder/coder/actions/runs/3109252710/jobs/5039309180#step:6:1088

@jsjoeio

jsjoeio commented Sep 23, 2022

Copy link
Copy Markdown
Contributor Author

Hmm possibly a showstopper if this is true: mui/material-ui#33216 (comment)

@BrunoQuaresma

Copy link
Copy Markdown
Contributor

Hmm possibly a showstopper if this is true: mui/material-ui#33216 (comment)

Unfortunately it looks stale.

@jsjoeio

jsjoeio commented Sep 23, 2022

Copy link
Copy Markdown
Contributor Author

Nevermind, I figured it out. Had to use generics in Pill.tsx
image

Looks like we may need to pass an empty object if some components in a
file use `props` in styles and some don't.
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.
@jsjoeio jsjoeio requested a review from Kira-Pilot September 23, 2022 17:26
@jsjoeio jsjoeio marked this pull request as ready for review September 23, 2022 17:26
@jsjoeio jsjoeio enabled auto-merge (squash) September 23, 2022 18:06
@jsjoeio jsjoeio merged commit ee00a1d into main Sep 23, 2022
@jsjoeio jsjoeio deleted the jsjoeio/fix-material-ui-warning branch September 23, 2022 18:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants