Breaking: Migrate to material-ui v4

package.json

@@ -25,26 +25,26 @@
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-decorators": "^7.4.0",
-    "@material-ui/core": "^3.3.0",
+    "@material-ui/core": "^4.5.1",
     "@mozilla-frontend-infra/react-lint": "^1.1.0",
     "@neutrinojs/jest": "^9.0.0-rc.0",
     "@neutrinojs/react-components": "^9.0.0-rc.0",
     "@semantic-release/changelog": "^3.0.0",
     "@semantic-release/git": "^7.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-eslint": "^3.0.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
-    "enzyme-to-json": "^3.3.5",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
     "eslint": "^5.8.0",
     "gh-pages": "^2.0.1",
-    "jest": "^24.7.0",
+    "jest": "^24.9.0",
     "jest-prop-type-error": "^1.1.0",
     "neutrino": "^9.0.0-rc.0",
     "prettier": "^1.14.3",
-    "react": "^16.6.1",
+    "react": "^16.10.2",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.6.1",
+    "react-dom": "^16.10.2",
     "react-styleguidist": "^7.3.11",
     "semantic-release": "^15.9.16",
     "verdaccio": "^3.13.0",
@@ -53,9 +53,9 @@
     "webpack-dev-server": "^3.2.1"
   },
   "peerDependencies": {
-    "@material-ui/core": "^3.0.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "@material-ui/core": "^4.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",

src/components/ErrorPanel/index.jsx

@@ -20,10 +20,10 @@ import palette from '../../utils/palette';
 
     return {
       panel: {
-        marginBottom: 3 * theme.spacing.unit,
+        marginBottom: 3 * theme.spacing(1),
       },
       paper: {
-        padding: `0 ${2 * theme.spacing.unit}px`,
+        padding: `0 ${2 * theme.spacing(1)}px`,
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'flex-start',

src/components/Markdown/index.jsx

@@ -25,11 +25,11 @@ markdown.use(linkAttributes, {
       margin: 0,
     },
     '& .anchor-link': {
-      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      marginTop: -theme.spacing(1) * 12, // Offset for the anchor.
       position: 'absolute',
     },
     '& pre, & pre[class*="language-"]': {
-      margin: `${3 * theme.spacing.unit}px 0`,
+      margin: `${3 * theme.spacing(1)}px 0`,
       padding: '12px 18px',
       borderRadius: 3,
       overflow: 'auto',
@@ -46,22 +46,22 @@ markdown.use(linkAttributes, {
       lineHeight: 1.6,
     },
     '& h1': {
-      ...theme.typography.display2,
+      ...theme.typography.h3,
       color: theme.palette.text.secondary,
       margin: '0.7em 0',
     },
     '& h2': {
-      ...theme.typography.display1,
+      ...theme.typography.h4,
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
     },
     '& h3': {
-      ...theme.typography.headline,
+      ...theme.typography.h5,
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
     },
     '& h4': {
-      ...theme.typography.title,
+      ...theme.typography.h6,
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
     },
@@ -83,7 +83,7 @@ markdown.use(linkAttributes, {
       '&:hover .anchor-link-style': {
         display: 'inline-block',
         opacity: 1,
-        padding: `0 ${theme.spacing.unit}px`,
+        padding: `0 ${theme.spacing(1)}px`,
         color: theme.palette.text.hint,
         '&:hover': {
           color: theme.palette.text.secondary,
@@ -132,16 +132,16 @@ markdown.use(linkAttributes, {
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacing.unit}px ${2 * theme.spacing.unit}px ${
-        theme.spacing.unit
-      }px ${theme.spacing.unit}px`,
+      padding: `${theme.spacing(1)}px ${2 * theme.spacing(1)}px ${theme.spacing(
+        1
+      )}px ${theme.spacing(1)}px`,
       textAlign: 'left',
     },
     '& td:last-child': {
-      paddingRight: 3 * theme.spacing.unit,
+      paddingRight: 3 * theme.spacing(1),
     },
     '& td compact': {
-      paddingRight: 3 * theme.spacing.unit,
+      paddingRight: 3 * theme.spacing(1),
     },
     '& td code': {
       fontSize: 13,
@@ -151,11 +151,11 @@ markdown.use(linkAttributes, {
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.divider}`,
       fontWeight: theme.typography.fontWeightMedium,
-      padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
+      padding: `0 ${theme.spacing(1) * 2}px 0 ${theme.spacing(1)}px`,
       textAlign: 'left',
     },
     '& th:last-child': {
-      paddingRight: 3 * theme.spacing.unit,
+      paddingRight: 3 * theme.spacing(1),
     },
     '& tr': {
       height: 48,
@@ -168,8 +168,8 @@ markdown.use(linkAttributes, {
     },
     '& blockquote': {
       borderLeft: `5px solid ${theme.palette.text.hint}`,
-      padding: `${theme.spacing.unit / 2}px ${3 * theme.spacing.unit}px`,
-      margin: `${3 * theme.spacing.unit}px 0`,
+      padding: `${theme.spacing(1) / 2}px ${3 * theme.spacing(1)}px`,
+      margin: `${3 * theme.spacing(1)}px 0`,
     },
     '& img': {
       maxWidth: '100%',

src/components/MarkdownTextArea/index.jsx

@@ -21,8 +21,8 @@ import pickClassName from '../../utils/pickClassName';
       color: theme.palette.text.primary,
     },
     tabContent: {
-      marginTop: theme.spacing.unit,
-      padding: theme.spacing.unit,
+      marginTop: theme.spacing(1),
+      padding: theme.spacing(1),
     },
     markdownContainer: {
       borderColor,

src/theme.js

@@ -18,17 +18,16 @@ const theme = createMuiTheme({
     },
   },
   typography: {
-    useNextVariants: true,
     ...Roboto400,
-    display4: Roboto300,
-    display3: Roboto400,
-    display2: Roboto400,
-    display1: Roboto400,
-    headline: Roboto400,
-    title: Roboto500,
-    subheading: Roboto400,
-    body2: Roboto500,
-    body1: Roboto400,
+    h1: Roboto300,
+    h2: Roboto400,
+    h3: Roboto400,
+    h4: Roboto400,
+    h5: Roboto400,
+    h6: Roboto500,
+    subtitle1: Roboto400,
+    body1: Roboto500,
+    body2: Roboto400,
     caption: Roboto400,
     button: Roboto500,
   },
@@ -48,7 +47,6 @@ module.exports = {
         fontFamily: 'sans-serif',
         fontWeight: 400,
         WebkitFontSmoothing: 'antialiased',
-        color: 'rgba(255, 255, 255, 0.7)',
       },
     },
     fontFamily: {