Update material-ui to version 4 (#1394)

* Update material-ui to version 4 * Fix test for Material array layout, ExpansionPanelSummary is wrapped in a higher order component for styling so instead we find an ancestor
eclipsesource · Jun 6, 2019 · 7d5b69a · 7d5b69a
1 parent 9cfdab7
commit 7d5b69a
Show file tree

Hide file tree

Showing 7 changed files with 734 additions and 575 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/material/package.json b/packages/material/package.json
@@ -56,9 +56,9 @@
   },
   "dependencies": {
     "@date-io/moment": "1.1.0",
-    "@material-ui/core": "^3.3.1",
-    "@material-ui/icons": "^3.0.1",
-    "@material-ui/lab": "^3.0.0-alpha.21",
+    "@material-ui/core": "^4.0.1",
+    "@material-ui/icons": "^4.0.1",
+    "@material-ui/lab": "^4.0.0-alpha.15",
     "material-ui-pickers": "^2.2.4",
     "moment": "^2.20.1"
   },

diff --git a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material/src/additional/MaterialListWithDetailRenderer.tsx
@@ -79,7 +79,7 @@ export const MaterialListWithDetailRenderer =
           addItem={addItem}
           createDefault={handleCreateDefaultValue}
         />
-        <Grid container direction='row' spacing={16}>
+        <Grid container direction='row' spacing={2}>
           <Grid item xs={3}>
             <List>
               {data > 0 ?

diff --git a/packages/material/src/complex/TableToolbar.tsx b/packages/material/src/complex/TableToolbar.tsx
@@ -52,7 +52,7 @@ const TableToolbar = React.memo((
                 container
                 justify={'flex-start'}
                 alignItems={'center'}
-                spacing={16}
+                spacing={2}
             >
                 <Grid item>
                   <Typography variant={'h6'}>{label}</Typography>

diff --git a/packages/material/src/controls/MaterialSliderControl.tsx b/packages/material/src/controls/MaterialSliderControl.tsx
@@ -99,7 +99,7 @@ export class MaterialSliderControl extends Control<ControlProps, ControlState> {
             min={schema.minimum}
             max={schema.maximum}
             value={Number(data || schema.default)}
-            onChange={(_ev, value) => {
+            onChange={(_ev: any, value: any) => {
               handleChange(path, Number(value));
             }
             }

diff --git a/packages/material/src/util/layout.tsx b/packages/material/src/util/layout.tsx
@@ -72,7 +72,7 @@ export const MaterialLayoutRenderer = ({
         <Grid
           container
           direction={direction}
-          spacing={direction === 'row' ? 16 : 0}
+          spacing={direction === 'row' ? 2 : 0}
         >
           {renderLayoutElements(elements, schema, path, renderers)}
         </Grid>

diff --git a/packages/material/test/renderers/MaterialArrayLayout.test.tsx b/packages/material/test/renderers/MaterialArrayLayout.test.tsx
@@ -320,15 +320,15 @@ describe('Material array layout', () => {
     // up button
     expect(
       wrapper
-        .find('ExpansionPanelSummary')
+        .find('ExpandPanelRenderer')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move up' }).length
     ).toBe(1);
     // down button
     expect(
       wrapper
-        .find('ExpansionPanelSummary')
+        .find('ExpandPanelRenderer')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move down' }).length
@@ -349,7 +349,7 @@ describe('Material array layout', () => {
     );
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpansionPanelSummary')
+      .find('ExpandPanelRenderer')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -379,7 +379,7 @@ describe('Material array layout', () => {
     );
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpansionPanelSummary')
+      .find('ExpandPanelRenderer')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -409,7 +409,7 @@ describe('Material array layout', () => {
     );
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpansionPanelSummary')
+      .find('ExpandPanelRenderer')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -430,7 +430,7 @@ describe('Material array layout', () => {
     );
     // getting up button of second item in expension panel;
     const downButton = wrapper
-      .find('ExpansionPanelSummary')
+      .find('ExpandPanelRenderer')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move down' });