Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: upgrade material-ui to 4.9.2 #1101

Merged
merged 11 commits into from
Feb 13, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/contribution/css-naming.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To maintain consistency within `Picasso` repository we try to follow some conven
```jsx
import React from 'react'
import cx from 'classnames'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
Copy link
Contributor

Choose a reason for hiding this comment

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

did they remove export of this helper from utils?

Copy link
Contributor Author

Choose a reason for hiding this comment

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


import styles from './styles'

Expand Down
4 changes: 2 additions & 2 deletions packages/picasso-lab/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
"react-dom": "^16.12.0"
},
"dependencies": {
"@material-ui/core": "4.5.0",
"@material-ui/icons": "4.5.1",
"@material-ui/core": "4.9.2",
"@material-ui/icons": "4.9.1",
"classnames": "^2.2.6",
"date-fns": "^2.3.0",
"simple-react-calendar": "^1.9.2"
Expand Down
4 changes: 2 additions & 2 deletions packages/picasso/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"react-dom": "^16.12.0"
},
"dependencies": {
"@material-ui/core": "4.5.0",
"@material-ui/icons": "4.5.1",
"@material-ui/core": "4.9.2",
"@material-ui/icons": "4.9.1",
"@toptal/picasso-shared": "^1.6.1",
"classnames": "^2.2.6",
"notistack": "^0.9.7",
Expand Down
8 changes: 4 additions & 4 deletions packages/picasso/src/Accordion/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`controlled version should render collapsed version 1`] = `
class="Picasso-root"
>
<div
class="MuiPaper-root MuiPaper-elevation0 MuiExpansionPanel-root makeStyles-root makeStyles-bordered MuiExpansionPanel-rounded MuiPaper-rounded"
class="MuiPaper-root MuiExpansionPanel-root makeStyles-root makeStyles-bordered MuiExpansionPanel-rounded MuiPaper-elevation0 MuiPaper-rounded"
>
<div
aria-disabled="false"
Expand Down Expand Up @@ -71,7 +71,7 @@ exports[`controlled version should render expanded version 1`] = `
class="Picasso-root"
>
<div
class="MuiPaper-root MuiPaper-elevation0 MuiExpansionPanel-root makeStyles-root makeStyles-bordered Mui-expanded MuiExpansionPanel-rounded MuiPaper-rounded"
class="MuiPaper-root MuiExpansionPanel-root makeStyles-root makeStyles-bordered Mui-expanded MuiExpansionPanel-rounded MuiPaper-elevation0 MuiPaper-rounded"
>
<div
aria-disabled="false"
Expand Down Expand Up @@ -136,7 +136,7 @@ exports[`default version for sections should render default version 1`] = `
class="Picasso-root"
>
<div
class="MuiPaper-root MuiPaper-elevation0 MuiExpansionPanel-root makeStyles-root makeStyles-bordered MuiExpansionPanel-rounded MuiPaper-rounded"
class="MuiPaper-root MuiExpansionPanel-root makeStyles-root makeStyles-bordered MuiExpansionPanel-rounded MuiPaper-elevation0 MuiPaper-rounded"
>
<div
aria-disabled="false"
Expand Down Expand Up @@ -201,7 +201,7 @@ exports[`default version for sections should render expanded version after click
class="Picasso-root"
>
<div
class="MuiPaper-root MuiPaper-elevation0 MuiExpansionPanel-root makeStyles-root makeStyles-bordered Mui-expanded MuiExpansionPanel-rounded MuiPaper-rounded"
class="MuiPaper-root MuiExpansionPanel-root makeStyles-root makeStyles-bordered Mui-expanded MuiExpansionPanel-rounded MuiPaper-elevation0 MuiPaper-rounded"
>
<div
aria-disabled="false"
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Autocomplete/Autocomplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React, {
useRef
} from 'react'
import { withStyles } from '@material-ui/core/styles'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import cx from 'classnames'
import { StandardProps } from '@toptal/picasso-shared'

Expand Down
5 changes: 5 additions & 0 deletions packages/picasso/src/Checkbox/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ exports[`checkbox interaction should render checked checkbox 1`] = `
/>
<div
class="Checkbox-checkedIcon"
font-size="default"
/>
</span>
</span>
Expand Down Expand Up @@ -64,6 +65,7 @@ exports[`renders default checkbox without label 1`] = `
/>
<div
class="Checkbox-uncheckedIcon"
font-size="default"
/>
</span>
</span>
Expand Down Expand Up @@ -93,6 +95,7 @@ exports[`renders disabled state 1`] = `
/>
<div
class="Checkbox-uncheckedIcon"
font-size="default"
/>
</span>
</span>
Expand Down Expand Up @@ -120,6 +123,7 @@ exports[`renders indeterminate state 1`] = `
/>
<div
class="Checkbox-indeterminateIcon"
font-size="default"
/>
</span>
</span>
Expand Down Expand Up @@ -150,6 +154,7 @@ exports[`should render default checkbox with label 1`] = `
/>
<div
class="Checkbox-uncheckedIcon"
font-size="default"
Copy link
Contributor

Choose a reason for hiding this comment

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

hmm, font-size? I've never seen something like this

Copy link
Collaborator

Choose a reason for hiding this comment

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

yeah, interesting how they use it

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's part of MUI upgrade, do you think I should re-check impact on Picasso?

Copy link
Collaborator

Choose a reason for hiding this comment

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

no, don't think so, just interesting 😃

/>
</span>
</span>
Expand Down
6 changes: 4 additions & 2 deletions packages/picasso/src/Chip/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { PicassoProvider } from '@toptal/picasso-shared'
PicassoProvider.override(({ palette, sizes }: Theme) => ({
MuiChip: {
root: {
fontSize: '1em',
fontSize: '1rem',
color: palette.grey.dark,
backgroundColor: palette.common.white,
borderRadius: '6.25em',
Expand All @@ -13,7 +13,9 @@ PicassoProvider.override(({ palette, sizes }: Theme) => ({
},
label: {
paddingLeft: '0.75em',
paddingRight: '0.75em'
paddingRight: '0.75em',
display: 'flex',
alignItems: 'center'
},
icon: {
marginLeft: '0.75em',
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Container/styles.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import { Theme, createStyles } from '@material-ui/core/styles'
import { Color } from '@material-ui/core'
import { SimplePaletteColorOptions } from '@material-ui/core/styles/createPalette'
Expand Down
4 changes: 2 additions & 2 deletions packages/picasso/src/Dropdown/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ exports[`Dropdown should render menu 1`] = `
x-placement="bottom-end"
>
<div
class="MuiPaper-root MuiPaper-elevation2 Dropdown-content"
class="MuiPaper-root Dropdown-content MuiPaper-elevation2"
style="opacity: 1; transform: scale(1, 1); transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
<ul
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`Dropdown should render menu with focus 1`] = `
x-placement="bottom-end"
>
<div
class="MuiPaper-root MuiPaper-elevation2 Dropdown-content"
class="MuiPaper-root Dropdown-content MuiPaper-elevation2"
style="opacity: 1; transform: none; transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
<ul
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/InputLabel/InputLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type VariantType = 'standard' | 'outlined' | 'filled'

export interface Props
extends StandardProps,
LabelHTMLAttributes<HTMLLabelElement> {
Omit<LabelHTMLAttributes<HTMLLabelElement>, 'color'> {
variant?: VariantType
htmlFor?: string
/** Label content */
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Label/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default ({ palette }: Theme) =>
borderColor: palette.red.main
},
innerLabel: {
fontSize: '0.75em',
fontSize: '0.75rem',
fontWeight: 600
},
deleteIcon: {
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Loader/Loader.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ReactNode, forwardRef, HTMLAttributes } from 'react'
import { withStyles } from '@material-ui/core/styles'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import cx from 'classnames'
import { StandardProps, SizeType } from '@toptal/picasso-shared'

Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/MenuItem/MenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, {
} from 'react'
import cx from 'classnames'
import { withStyles } from '@material-ui/core/styles'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import MUIMenuItem from '@material-ui/core/MenuItem'
import {
StandardProps,
Expand Down
16 changes: 8 additions & 8 deletions packages/picasso/src/Modal/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ exports[`renders Modal 1`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
Copy link
Collaborator

Choose a reason for hiding this comment

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

I like to don't care about such things 👍 thank you MUI 😄

style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<div
Expand Down Expand Up @@ -118,12 +118,12 @@ exports[`useModals opens and closes modal 1`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<p>
Expand Down Expand Up @@ -223,12 +223,12 @@ exports[`useModals shows multiple modals at the same time 1`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<p>
Expand Down Expand Up @@ -257,12 +257,12 @@ exports[`useModals shows multiple modals at the same time 1`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<p>
Expand Down
3 changes: 3 additions & 0 deletions packages/picasso/src/Modal/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ export default ({ palette, screens }: Theme) =>
},
container: {},
paper: {
maxHeight: 'calc(100% - 6rem)',
Copy link
Contributor

Choose a reason for hiding this comment

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

😱

Copy link
Collaborator

Choose a reason for hiding this comment

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

this change is the scariest for me 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why? It was like that before and they decreased it to 'calc(100% - 64px)', so I defined it as 96px as it was.
mui/material-ui#17867

Copy link
Collaborator

Choose a reason for hiding this comment

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

ah, ok 😄 it was just missing for me from the style and "bam!" it's here 😁

maxWidth: 'calc(100% - 6rem)',

[screens('small')]: {
width: '100vw',
height: '100vh',
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Notification/Notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React, {
import { withStyles } from '@material-ui/core/styles'
import SnackbarContent from '@material-ui/core/SnackbarContent'
import cx from 'classnames'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import {
StandardProps,
PicassoComponentWithRef,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ exports[`Notification default render 1`] = `
class="Picasso-root"
>
<div
class="MuiTypography-root MuiPaper-root MuiPaper-elevation6 MuiSnackbarContent-root Notification-notificationWhite Notification-notification MuiTypography-body2"
role="alertdialog"
class="MuiPaper-root MuiSnackbarContent-root Notification-notificationWhite Notification-notification MuiPaper-elevation6"
role="alert"
>
<div
class="MuiSnackbarContent-message"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ exports[`NotificationActions default render 1`] = `
class="Picasso-root"
>
<div
class="MuiTypography-root MuiPaper-root MuiPaper-elevation6 MuiSnackbarContent-root Notification-notificationGreen Notification-notification MuiTypography-body2"
role="alertdialog"
class="MuiPaper-root MuiSnackbarContent-root Notification-notificationGreen Notification-notification MuiPaper-elevation6"
role="alert"
>
<div
class="MuiSnackbarContent-message"
Expand Down
4 changes: 2 additions & 2 deletions packages/picasso/src/OutlinedInput/OutlinedInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import cx from 'classnames'
import { withStyles } from '@material-ui/core/styles'
import MUIOutlinedInput from '@material-ui/core/OutlinedInput'
import { InputBaseComponentProps } from '@material-ui/core/InputBase'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import { StandardProps, SizeType, Classes } from '@toptal/picasso-shared'

import InputAdornment from '../InputAdornment'
Expand All @@ -29,7 +29,7 @@ export interface Props
extends StandardProps,
Omit<
InputHTMLAttributes<HTMLInputElement>,
'value' | 'defaultValue' | 'size'
'value' | 'defaultValue' | 'size' | 'color'
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reason for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

MUI introduced primary and secondary color that are not compatible with HTML Input Element props and as we don't support color for our components in this case I omit color from our Props.

image

image

> {
/** Width of the component */
width?: 'full' | 'shrink' | 'auto'
Expand Down
10 changes: 5 additions & 5 deletions packages/picasso/src/PromptModal/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`renders PromptModal 1`] = `
<body
style="overflow: hidden; padding-right: 0px;"
style="padding-right: 0px; overflow: hidden;"
>
<div
aria-hidden="true"
Expand All @@ -27,12 +27,12 @@ exports[`renders PromptModal 1`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<div
Expand Down Expand Up @@ -150,12 +150,12 @@ exports[`showPrompt opens and closes modal on Submit action 2`] = `
/>
<div
class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
role="document"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
class="MuiPaper-root MuiPaper-elevation2 MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse"
class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
role="dialog"
>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ const allOptions = [
{ text: 'Ukraine', value: 'UA' }
]

interface ContentProps {
setResult: (value: unknown) => void
}

const EMPTY_INPUT_VALUE = ''
const getDisplayValue = (item: Item | null) =>
item ? (item.text as string) : EMPTY_INPUT_VALUE
Expand All @@ -23,7 +27,7 @@ const PromptModalDefaultExample = () => {
const { showPrompt } = useModals()
const { showInfo } = useNotifications()

const Content = ({ setResult }) => {
const Content = ({ setResult }: ContentProps) => {
const [value, setValue] = useState(EMPTY_INPUT_VALUE)
const [options, setOptions] = useState(allOptions)

Expand Down
4 changes: 2 additions & 2 deletions packages/picasso/src/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import React, {
import cx from 'classnames'
import NativeSelect from '@material-ui/core/NativeSelect'
import { withStyles } from '@material-ui/core/styles'
import { capitalize } from '@material-ui/core/utils/helpers'
import capitalize from '@material-ui/core/utils/capitalize'
import { StandardProps, SizeType } from '@toptal/picasso-shared'

import OutlinedInput from '../OutlinedInput'
Expand All @@ -37,7 +37,7 @@ const getOptionText = (option: Option | null) =>

export interface Props
extends StandardProps,
Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'color'> {
/** If true, the 'Select' will be disabled */
disabled?: boolean
/** Indicate whether `Select` is in error state */
Expand Down
2 changes: 1 addition & 1 deletion packages/picasso/src/Select/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`renders native select 1`] = `
<select
aria-invalid="false"
autocomplete="none"
class="MuiNativeSelect-root Select-select MuiNativeSelect-select MuiInputBase-input MuiOutlinedInput-input OutlinedInput-input OutlinedInput-inputMedium MuiInputBase-inputSelect MuiOutlinedInput-inputSelect"
class="MuiNativeSelect-root Select-select MuiNativeSelect-select MuiInputBase-input MuiOutlinedInput-input OutlinedInput-input OutlinedInput-inputMedium"
>
<option
disabled=""
Expand Down
Loading