From a9115c87237728284c3ee35bf138b76ba6212c61 Mon Sep 17 00:00:00 2001
From: Dominik Serafin <dominikdsgnr@gmail.com>
Date: Mon, 27 May 2019 18:26:46 +0200
Subject: [PATCH 1/4] [Dialog][scroll=body] Vertically center paper and fix
 fullWidth=false

---
 .../pages/components/dialogs/ScrollDialog.js  | 88 ++++++++++++++++++-
 packages/material-ui/src/Dialog/Dialog.js     | 28 +++++-
 2 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/components/dialogs/ScrollDialog.js b/docs/src/pages/components/dialogs/ScrollDialog.js
index 3f4093b22e8f18..59d2f462307733 100644
--- a/docs/src/pages/components/dialogs/ScrollDialog.js
+++ b/docs/src/pages/components/dialogs/ScrollDialog.js
@@ -5,11 +5,23 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControl from '@material-ui/core/FormControl'; // debug
+import FormControlLabel from '@material-ui/core/FormControlLabel'; // debug
+import InputLabel from '@material-ui/core/InputLabel'; // debug
+import MenuItem from '@material-ui/core/MenuItem'; // debug
+import Select from '@material-ui/core/Select'; // debug
+import Switch from '@material-ui/core/Switch'; // debug
+
 
 function ScrollDialog() {
   const [open, setOpen] = React.useState(false);
   const [scroll, setScroll] = React.useState('paper');
 
+  const [filled, setFilled] = React.useState(false); // debug
+  const [maxWidth, setMaxWidth] = React.useState('sm'); // debug
+  const [fullWidth, setFullWidth] = React.useState(false); // debug
+  const [fullScreen, setFullScreen] = React.useState(false); // debug
+
   const handleClickOpen = scrollType => () => {
     setOpen(true);
     setScroll(scrollType);
@@ -19,11 +31,34 @@ function ScrollDialog() {
     setOpen(false);
   }
 
+  // debug
+  function toggleFilled() {
+    setFilled(!filled);
+  }
+
+  // debug
+  function handleMaxWidthChange(event) {
+    setMaxWidth(event.target.value);
+  }
+
+  // debug
+  function handleFullWidthChange(event) {
+    setFullWidth(event.target.checked);
+  }
+
+  // debug
+  function handleFullScreenChange(event) {
+    setFullScreen(event.target.checked);
+  }
+
   return (
     <div>
       <Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
       <Button onClick={handleClickOpen('body')}>scroll=body</Button>
       <Dialog
+        maxWidth={maxWidth}
+        fullWidth={fullWidth}
+        fullScreen={fullScreen}
         open={open}
         onClose={handleClose}
         scroll={scroll}
@@ -31,16 +66,65 @@ function ScrollDialog() {
       >
         <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
         <DialogContent dividers={scroll === 'paper'}>
+
+          {/* debug start */}
+          <form noValidate>
+            <FormControl>
+              <InputLabel htmlFor="max-width">maxWidth</InputLabel>
+              <Select
+                value={maxWidth}
+                onChange={handleMaxWidthChange}
+                inputProps={{
+                  name: 'max-width',
+                  id: 'max-width',
+                }}
+              >
+                <MenuItem value={false}>false</MenuItem>
+                <MenuItem value="xs">xs</MenuItem>
+                <MenuItem value="sm">sm</MenuItem>
+                <MenuItem value="md">md</MenuItem>
+                <MenuItem value="lg">lg</MenuItem>
+                <MenuItem value="xl">xl</MenuItem>
+              </Select>
+            </FormControl>
+            <br/>
+            <FormControlLabel
+              control={
+                <Switch checked={fullWidth} onChange={handleFullWidthChange} value="fullWidth" />
+              }
+              label="Full width"
+            />
+            <br/>
+            <FormControlLabel
+              control={
+                <Switch checked={fullScreen} onChange={handleFullScreenChange} value="fullScreen" />
+              }
+              label="Full screen"
+            />
+          </form>
+          <br/>
+          <div>
+            <textarea rows="4">Resize me...</textarea>
+          </div>
+          <br/>
+          <Button onClick={toggleFilled} color="primary" variant="contained">
+            Show {filled?'Less':'More'} Content
+          </Button>
+          <br/>
+          <br/>
+          {/* debug end */}
+
           <DialogContentText>
-            {[...new Array(50)]
+            {filled ? [...new Array(50)]
               .map(
                 () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.
 Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
 Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
               )
-              .join('\n')}
+              .join('\n') : `Cras mattis consectetur.`}
           </DialogContentText>
+
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index 5145446efcd6c3..6ddadabafbb92b 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -29,6 +29,15 @@ export const styles = theme => ({
   scrollBody: {
     overflowY: 'auto',
     overflowX: 'hidden',
+    width: '100%',
+    textAlign: 'center',
+    '&:after': {
+      content: '""',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      height: '100%',
+      width: '0',
+    },
   },
   /* Styles applied to the container element. */
   container: {
@@ -59,19 +68,25 @@ export const styles = theme => ({
   /* Styles applied to the `Paper` component if `scroll="body"`. */
   paperScrollBody: {
     margin: '48px auto',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    textAlign: 'left', // 'initial' doesn't work on IE 11
   },
   /* Styles applied to the `Paper` component if `maxWidth=false`. */
   paperWidthFalse: {
     '&$paperScrollBody': {
       margin: 48,
+      maxWidth: 'calc(100% - 96px)',
     },
   },
   /* Styles applied to the `Paper` component if `maxWidth="xs"`. */
   paperWidthXs: {
     maxWidth: Math.max(theme.breakpoints.values.xs, 444),
     '&$paperScrollBody': {
+      maxWidth: `calc(${Math.max(theme.breakpoints.values.xs, 444)}px - 96px)`,
       [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 48 * 2)]: {
         margin: 48,
+        maxWidth: 'calc(100% - 96px)',
       },
     },
   },
@@ -79,8 +94,10 @@ export const styles = theme => ({
   paperWidthSm: {
     maxWidth: theme.breakpoints.values.sm,
     '&$paperScrollBody': {
+      maxWidth: `calc(${theme.breakpoints.values.sm}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.sm + 48 * 2)]: {
         margin: 48,
+        maxWidth: 'calc(100% - 96px)',
       },
     },
   },
@@ -88,8 +105,10 @@ export const styles = theme => ({
   paperWidthMd: {
     maxWidth: theme.breakpoints.values.md,
     '&$paperScrollBody': {
+      maxWidth: `calc(${theme.breakpoints.values.md}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.md + 48 * 2)]: {
         margin: 48,
+        maxWidth: 'calc(100% - 96px)',
       },
     },
   },
@@ -97,8 +116,10 @@ export const styles = theme => ({
   paperWidthLg: {
     maxWidth: theme.breakpoints.values.lg,
     '&$paperScrollBody': {
+      maxWidth: `calc(${theme.breakpoints.values.lg}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.lg + 48 * 2)]: {
         margin: 48,
+        maxWidth: 'calc(100% - 96px)',
       },
     },
   },
@@ -106,17 +127,16 @@ export const styles = theme => ({
   paperWidthXl: {
     maxWidth: theme.breakpoints.values.xl,
     '&$paperScrollBody': {
+      maxWidth: `calc(${theme.breakpoints.values.xl}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.xl + 48 * 2)]: {
         margin: 48,
+        maxWidth: 'calc(100% - 96px)',
       },
     },
   },
   /* Styles applied to the `Paper` component if `fullWidth={true}`. */
   paperFullWidth: {
     width: '100%',
-    '&$paperScrollBody': {
-      width: 'initial',
-    },
   },
   /* Styles applied to the `Paper` component if `fullScreen={true}`. */
   paperFullScreen: {
@@ -128,6 +148,8 @@ export const styles = theme => ({
     borderRadius: 0,
     '&$paperScrollBody': {
       margin: 0,
+      width: '100%',
+      maxWidth: '100%',
     },
   },
 });

From 67a8ed611c6543f326831ecd97f6249b39189d35 Mon Sep 17 00:00:00 2001
From: Dominik Serafin <dominikdsgnr@gmail.com>
Date: Mon, 27 May 2019 18:58:53 +0200
Subject: [PATCH 2/4] [Docs] Remove debug stuff from ScrollDialog

---
 .../pages/components/dialogs/ScrollDialog.js  | 88 +------------------
 1 file changed, 2 insertions(+), 86 deletions(-)

diff --git a/docs/src/pages/components/dialogs/ScrollDialog.js b/docs/src/pages/components/dialogs/ScrollDialog.js
index 59d2f462307733..3f4093b22e8f18 100644
--- a/docs/src/pages/components/dialogs/ScrollDialog.js
+++ b/docs/src/pages/components/dialogs/ScrollDialog.js
@@ -5,23 +5,11 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import FormControl from '@material-ui/core/FormControl'; // debug
-import FormControlLabel from '@material-ui/core/FormControlLabel'; // debug
-import InputLabel from '@material-ui/core/InputLabel'; // debug
-import MenuItem from '@material-ui/core/MenuItem'; // debug
-import Select from '@material-ui/core/Select'; // debug
-import Switch from '@material-ui/core/Switch'; // debug
-
 
 function ScrollDialog() {
   const [open, setOpen] = React.useState(false);
   const [scroll, setScroll] = React.useState('paper');
 
-  const [filled, setFilled] = React.useState(false); // debug
-  const [maxWidth, setMaxWidth] = React.useState('sm'); // debug
-  const [fullWidth, setFullWidth] = React.useState(false); // debug
-  const [fullScreen, setFullScreen] = React.useState(false); // debug
-
   const handleClickOpen = scrollType => () => {
     setOpen(true);
     setScroll(scrollType);
@@ -31,34 +19,11 @@ function ScrollDialog() {
     setOpen(false);
   }
 
-  // debug
-  function toggleFilled() {
-    setFilled(!filled);
-  }
-
-  // debug
-  function handleMaxWidthChange(event) {
-    setMaxWidth(event.target.value);
-  }
-
-  // debug
-  function handleFullWidthChange(event) {
-    setFullWidth(event.target.checked);
-  }
-
-  // debug
-  function handleFullScreenChange(event) {
-    setFullScreen(event.target.checked);
-  }
-
   return (
     <div>
       <Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
       <Button onClick={handleClickOpen('body')}>scroll=body</Button>
       <Dialog
-        maxWidth={maxWidth}
-        fullWidth={fullWidth}
-        fullScreen={fullScreen}
         open={open}
         onClose={handleClose}
         scroll={scroll}
@@ -66,65 +31,16 @@ function ScrollDialog() {
       >
         <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
         <DialogContent dividers={scroll === 'paper'}>
-
-          {/* debug start */}
-          <form noValidate>
-            <FormControl>
-              <InputLabel htmlFor="max-width">maxWidth</InputLabel>
-              <Select
-                value={maxWidth}
-                onChange={handleMaxWidthChange}
-                inputProps={{
-                  name: 'max-width',
-                  id: 'max-width',
-                }}
-              >
-                <MenuItem value={false}>false</MenuItem>
-                <MenuItem value="xs">xs</MenuItem>
-                <MenuItem value="sm">sm</MenuItem>
-                <MenuItem value="md">md</MenuItem>
-                <MenuItem value="lg">lg</MenuItem>
-                <MenuItem value="xl">xl</MenuItem>
-              </Select>
-            </FormControl>
-            <br/>
-            <FormControlLabel
-              control={
-                <Switch checked={fullWidth} onChange={handleFullWidthChange} value="fullWidth" />
-              }
-              label="Full width"
-            />
-            <br/>
-            <FormControlLabel
-              control={
-                <Switch checked={fullScreen} onChange={handleFullScreenChange} value="fullScreen" />
-              }
-              label="Full screen"
-            />
-          </form>
-          <br/>
-          <div>
-            <textarea rows="4">Resize me...</textarea>
-          </div>
-          <br/>
-          <Button onClick={toggleFilled} color="primary" variant="contained">
-            Show {filled?'Less':'More'} Content
-          </Button>
-          <br/>
-          <br/>
-          {/* debug end */}
-
           <DialogContentText>
-            {filled ? [...new Array(50)]
+            {[...new Array(50)]
               .map(
                 () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.
 Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
 Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
               )
-              .join('\n') : `Cras mattis consectetur.`}
+              .join('\n')}
           </DialogContentText>
-
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">

From 299a17c357117b4c0674bbe78a9942cda324f4e2 Mon Sep 17 00:00:00 2001
From: Dominik Serafin <dominikdsgnr@gmail.com>
Date: Tue, 28 May 2019 17:26:31 +0200
Subject: [PATCH 3/4] [Dialog] Styling improvements

---
 packages/material-ui/src/Dialog/Dialog.js | 25 ++++-------------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index 6ddadabafbb92b..99b26f214f8af8 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -29,7 +29,6 @@ export const styles = theme => ({
   scrollBody: {
     overflowY: 'auto',
     overflowX: 'hidden',
-    width: '100%',
     textAlign: 'center',
     '&:after': {
       content: '""',
@@ -50,8 +49,6 @@ export const styles = theme => ({
   },
   /* Styles applied to the `Paper` component. */
   paper: {
-    display: 'flex',
-    flexDirection: 'column',
     margin: 48,
     position: 'relative',
     overflowY: 'auto', // Fix IE 11 issue, to remove at some point.
@@ -62,30 +59,25 @@ export const styles = theme => ({
   },
   /* Styles applied to the `Paper` component if `scroll="paper"`. */
   paperScrollPaper: {
-    flex: '0 1 auto',
+    display: 'flex',
+    flexDirection: 'column',
     maxHeight: 'calc(100% - 96px)',
   },
   /* Styles applied to the `Paper` component if `scroll="body"`. */
   paperScrollBody: {
-    margin: '48px auto',
     display: 'inline-block',
     verticalAlign: 'middle',
     textAlign: 'left', // 'initial' doesn't work on IE 11
   },
   /* Styles applied to the `Paper` component if `maxWidth=false`. */
   paperWidthFalse: {
-    '&$paperScrollBody': {
-      margin: 48,
-      maxWidth: 'calc(100% - 96px)',
-    },
+    maxWidth: 'calc(100% - 96px)',
   },
   /* Styles applied to the `Paper` component if `maxWidth="xs"`. */
   paperWidthXs: {
     maxWidth: Math.max(theme.breakpoints.values.xs, 444),
     '&$paperScrollBody': {
-      maxWidth: `calc(${Math.max(theme.breakpoints.values.xs, 444)}px - 96px)`,
       [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 48 * 2)]: {
-        margin: 48,
         maxWidth: 'calc(100% - 96px)',
       },
     },
@@ -94,9 +86,7 @@ export const styles = theme => ({
   paperWidthSm: {
     maxWidth: theme.breakpoints.values.sm,
     '&$paperScrollBody': {
-      maxWidth: `calc(${theme.breakpoints.values.sm}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.sm + 48 * 2)]: {
-        margin: 48,
         maxWidth: 'calc(100% - 96px)',
       },
     },
@@ -105,9 +95,7 @@ export const styles = theme => ({
   paperWidthMd: {
     maxWidth: theme.breakpoints.values.md,
     '&$paperScrollBody': {
-      maxWidth: `calc(${theme.breakpoints.values.md}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.md + 48 * 2)]: {
-        margin: 48,
         maxWidth: 'calc(100% - 96px)',
       },
     },
@@ -116,9 +104,7 @@ export const styles = theme => ({
   paperWidthLg: {
     maxWidth: theme.breakpoints.values.lg,
     '&$paperScrollBody': {
-      maxWidth: `calc(${theme.breakpoints.values.lg}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.lg + 48 * 2)]: {
-        margin: 48,
         maxWidth: 'calc(100% - 96px)',
       },
     },
@@ -127,16 +113,14 @@ export const styles = theme => ({
   paperWidthXl: {
     maxWidth: theme.breakpoints.values.xl,
     '&$paperScrollBody': {
-      maxWidth: `calc(${theme.breakpoints.values.xl}px - 96px)`,
       [theme.breakpoints.down(theme.breakpoints.values.xl + 48 * 2)]: {
-        margin: 48,
         maxWidth: 'calc(100% - 96px)',
       },
     },
   },
   /* Styles applied to the `Paper` component if `fullWidth={true}`. */
   paperFullWidth: {
-    width: '100%',
+    width: 'calc(100% - 96px)',
   },
   /* Styles applied to the `Paper` component if `fullScreen={true}`. */
   paperFullScreen: {
@@ -148,7 +132,6 @@ export const styles = theme => ({
     borderRadius: 0,
     '&$paperScrollBody': {
       margin: 0,
-      width: '100%',
       maxWidth: '100%',
     },
   },

From 5da996d7a8691a7b70a3ed489646b025b4e2b14d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 28 May 2019 18:10:57 +0200
Subject: [PATCH 4/4] fix the print mode

---
 docs/src/modules/components/AppFrame.js   | 3 +++
 packages/material-ui/src/Dialog/Dialog.js | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 151a252526c27c..017fe7d1789f91 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -110,6 +110,9 @@ const styles = theme => ({
         duration: theme.transitions.duration.enteringScreen,
       }),
     },
+    '@media print': {
+      display: 'none',
+    },
   },
   appBar: {
     transition: theme.transitions.create('width'),
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index 99b26f214f8af8..3a9713d5680a16 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -16,7 +16,8 @@ export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
     '@media print': {
-      position: 'absolute',
+      // Use !important to override the Modal inline-style.
+      position: 'absolute !important',
     },
   },
   /* Styles applied to the root element if `scroll="paper"`. */