Baseline/mui v3 v4

js/package.json

@@ -32,10 +32,10 @@
     "eslint-plugin-react-hooks": "2.4.0"
   },
   "resolutions": {
-    "**/@material-ui/core": "3.9.3",
-    "**/@material-ui/styles": "3.0.0-alpha.10",
-    "**/@material-ui/lab": "3.0.0-alpha.30",
-    "**/@material-ui/icons": "3.0.2",
+    "**/@material-ui/core": "4.11.0",
+    "**/@material-ui/styles": "4.10.0",
+    "**/@material-ui/lab": "4.0.0-alpha.56",
+    "**/@material-ui/icons": "4.9.1",
     "**/react": "16.8.1",
     "**/react-dom": "16.8.1",
     "**/react-router": "5.1.2",

js/rex-action-application/src/index.js

@@ -6,9 +6,6 @@
 
 // END IMPORTS FOR STATIC ASSETS
 
-let { install } = require("@material-ui/styles");
-install();
-
 require("rex-widget").Transitionable.registerPackageResolver(function(pkgName) {
   switch (pkgName) {
     case "rex-about":
@@ -44,6 +41,6 @@ window.Rex = {
       return import("rex-form-previewer").then(m => {
         m.renderForm(options);
       });
-    }
-  }
+    },
+  },
 };

js/rex-ui/Autocomplete.js

@@ -114,15 +114,15 @@ let useStyles = styles.makeStyles((theme: Theme) => ({
   error: {
     fontSize: "10pt",
     color: theme.palette.error.main,
-    padding: theme.spacing.unit,
+    padding: theme.spacing(),
   },
   container: {
     position: "relative",
   },
   suggestionsContainerOpen: {
     position: "absolute",
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(),
     left: 0,
     right: 0,
   },
@@ -135,7 +135,7 @@ let useStyles = styles.makeStyles((theme: Theme) => ({
     listStyleType: "none",
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 }));
 

js/rex-ui/Button.js

@@ -38,13 +38,13 @@ export let ButtonIcon = ({
       if (size === "small") {
         paddingRight = 0;
       } else {
-        paddingRight = theme.spacing.unit;
+        paddingRight = theme.spacing();
       }
     }
     let iconStyle = {
       paddingRight,
       height: "1em",
-      marginLeft: -theme.spacing.unit / 4,
+      marginLeft: theme.spacing(-0.25),
       transform: size === "small" ? "scale(0.75)" : null,
     };
     iconElement = <div style={iconStyle}>{icon}</div>;

js/rex-ui/Layout.js

@@ -8,7 +8,7 @@ import ResizeObserver from "resize-observer-polyfill";
 import * as React from "react";
 import * as ReactUtil from "./ReactUtil.js";
 import { useTheme } from "./Theme.js";
-import { unstable_useMediaQuery as useMediaQuery } from "@material-ui/core/useMediaQuery";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
 
 export type LayoutMode = "desktop" | "tablet" | "phone";
 

js/rex-ui/Theme.js

@@ -14,18 +14,8 @@ import * as styles from "@material-ui/styles";
 
 export type Theme = styles.Theme;
 
-let defaultTheme: Theme = mui.createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
-});
-
 export let theme: Theme = mui.createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
   palette: {
-    ...defaultTheme.palette,
     success: {
       main: mui.colors.green["600"],
       light: mui.colors.green["200"],
@@ -41,10 +31,6 @@ export let theme: Theme = mui.createMuiTheme({
       xl: 1920,
     },
   },
-  definitonList: {
-    verticalSpacing: 8,
-    horizontalSpacing: 8,
-  },
 });
 
 export let useTheme: void => Theme = () => {

js/rex-ui/app/AppDrawer.js

@@ -23,7 +23,7 @@ let useAppDrawerStyles = Theme.makeStyles(theme => {
       display: "flex",
       flexDirection: "row",
       justifyContent: "flex-end",
-      padding: theme.spacing.unit,
+      padding: theme.spacing(),
       ...theme.mixins.toolbar,
     },
     buttonClose: {

js/rex-ui/app/Breadcrumbs.js

@@ -11,7 +11,7 @@ let useStyles = makeStyles(theme => {
   return {
     root: {
       backgroundColor: "#FFFFFF",
-      padding: theme.spacing.unit,
+      padding: theme.spacing(),
     },
     ol: {
       display: "flex",

js/rex-ui/datepicker/Common.js

@@ -36,7 +36,7 @@ export let BackButtonWithTitle = ({
       <mui.IconButton style={buttonStyle} onClick={onClose}>
         <icons.Close />
       </mui.IconButton>
-      <div style={{ paddingLeft: theme.spacing.unit }}>
+      <div style={{ paddingLeft: theme.spacing() }}>
         <mui.Typography
           style={{ color: theme.palette.text.secondary }}
           variant="h6"

js/rex-ui/forms/FileUploadField.js

@@ -77,6 +77,6 @@ export function FileUploadField<V: { [name: string]: any }>({
 
 let useStyles = makeStyles(theme => ({
   control: {
-    paddingTop: theme.spacing.unit * 3,
+    paddingTop: theme.spacing(3),
   },
 }));

js/rex-ui/forms/FormSection.js

@@ -33,13 +33,13 @@ export function FormSection({
 
 let useStyles = Rapid.makeStyles(theme => ({
   root: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(),
     display: "flex",
     flexDirection: "column",
   },
   header: {
-    padding: theme.spacing.unit,
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    padding: theme.spacing(),
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
 }));

js/rex-ui/forms/ListField.js

@@ -117,6 +117,6 @@ export function ListField<V: { [name: string]: any }, I: { id?: any }>({
 
 let useStyles = makeStyles(theme => ({
   addItemButtonContainer: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(),
   },
 }));

js/rex-ui/rapid/Autocomplete.js

@@ -79,7 +79,7 @@ let useStyles = makeStyles(theme => ({
   suggestionsContainerOpen: {
     position: "absolute",
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(),
     left: 0,
     right: 0,
   },
@@ -92,7 +92,7 @@ let useStyles = makeStyles(theme => ({
     listStyleType: "none",
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 }));
 

js/rex-ui/rapid/List.js

@@ -213,6 +213,6 @@ export function ListItem({ primary, secondary, icon, status }: ListItemProps) {
 let useStyles = makeStyles(theme => ({
   actionbar: {
     display: "inline-flex",
-    paddingBottom: theme.spacing.unit,
+    paddingBottom: theme.spacing(),
   },
 }));

js/rex-ui/rapid/LoadingCard.js

@@ -53,7 +53,7 @@ let useStyles = makeStyles(theme => ({
   },
   title: {
     textAlign: "center",
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
     fontSize: 16,
   },
 }));

js/rex-ui/rapid/NotFoundCard.js

@@ -51,7 +51,7 @@ let useStyles = makeStyles(theme => ({
   },
   title: {
     textAlign: "center",
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
     fontSize: 16,
   },
 }));

js/rex-ui/rapid/Pick/PickCardListView.js

@@ -134,8 +134,8 @@ let useStyles = makeStyles(theme => ({
   },
   checkboxContainer: {
     position: "absolute",
-    top: theme.spacing.unit / 2,
-    right: theme.spacing.unit / 2,
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
   },
   buttonBase: {
     width: "100%",

js/rex-ui/rapid/Pick/PickFilterToolbar.js

@@ -22,7 +22,7 @@ import { DateInput } from "../../DateInput2.js";
 
 export const useFilterToolbarStyles = makeStyles((theme: Theme) => {
   return {
-    tableControl: { padding: theme.spacing.unit },
+    tableControl: { padding: theme.spacing() },
     formContainer: {
       display: "flex",
       width: "100%",
@@ -45,7 +45,7 @@ export const useFilterToolbarStyles = makeStyles((theme: Theme) => {
       flexWrap: "nowrap",
     },
     formControl: {
-      marginLeft: theme.spacing.unit,
+      marginLeft: theme.spacing(),
       flex: 1,
     },
     toggleButton: {

js/rex-ui/rapid/Pick/PickHeader.js

@@ -69,7 +69,7 @@ export const PickHeader = ({
 
 let useStyles = makeStyles((theme: Theme) => ({
   PickHeader__root: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
   PickHeader__top: {
     display: "flex",
@@ -79,7 +79,7 @@ let useStyles = makeStyles((theme: Theme) => ({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingTop: theme.spacing.unit,
+    paddingTop: theme.spacing(),
   },
   PickHeader__title: {
     marginBottom: 8,

js/rex-ui/rapid/Pick/PickPagination.js

@@ -41,7 +41,7 @@ export const PickPagination = ({
       direction="row"
       justify="flex-end"
       alignItems="center"
-      spacing={8}
+      spacing={1}
       className={classes.paginationWrapper}
     >
       <Grid item>

js/rex-ui/rapid/ShowRenderer.js

@@ -279,8 +279,8 @@ let useStyles = makeStyles(theme => ({
     },
   },
   header: {
-    padding: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    padding: theme.spacing(),
+    marginBottom: theme.spacing(),
   },
   titleSmall: {
     fontSize: 16,
@@ -303,19 +303,19 @@ let useStyles = makeStyles(theme => ({
   contentWrapper: {
     maxWidth: 640,
     wordBreak: "break-word",
-    padding: theme.spacing.unit,
+    padding: theme.spacing(),
   },
   fieldContainer: {
     flex: 1,
   },
   toolbar: {
-    padding: theme.spacing.unit * 1,
+    padding: theme.spacing(),
   },
   editToolbar: {
     alignSelf: "flex-end",
   },
   toolbarButton: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(),
     wordBread: "keep-all",
   },
 }));

js/rex-ui/rapid/Status.js

@@ -144,7 +144,7 @@ export function StatusMessage({
   });
   return (
     <div className={rootClassName}>
-      <Grid item container spacing={16} wrap="nowrap" style={style}>
+      <Grid item container spacing={2} wrap="nowrap" style={style}>
         <Grid item className={classes.StatusMessage__icon}>
           <StatusIcon status={status} />
         </Grid>
@@ -219,9 +219,9 @@ let useStyles = makeStyles(theme => ({
   },
 
   StatusMessage__root: {
-    padding: theme.spacing.unit,
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    padding: theme.spacing(),
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
     borderRadius: theme.shape.borderRadius,
   },
   StatusMessage__root_success: {