[Dialog] Add a scroll property

mui · Jun 25, 2018 · 438ee00 · 438ee00
1 parent 470c3e5
commit 438ee00
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts
@@ -11,14 +11,19 @@ export interface DialogProps
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | false;
   PaperProps?: Partial<PaperProps>;
+  scroll?: 'body' | 'paper';
   TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
   TransitionProps?: TransitionProps;
 }
 
 export type DialogClassKey =
   | 'root'
+  | 'scrollPaper'
+  | 'scrollBody'
   | 'paper'
+  | 'paperScrollPaper'
+  | 'paperScrollBody'
   | 'paperWidthXs'
   | 'paperWidthSm'
   | 'paperWidthMd'

diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
@@ -11,29 +11,55 @@ import { duration } from '../styles/transitions';
 import Paper from '../Paper';
 
 export const styles = theme => ({
-  root: {
+  root: {},
+  scrollPaper: {
+    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
+  scrollBody: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+  },
   paper: {
     display: 'flex',
-    margin: theme.spacing.unit * 4,
-    maxHeight: `calc(100% - ${theme.spacing.unit * 8}px)`,
     flexDirection: 'column',
-    flex: '0 1 auto',
+    margin: 48,
     position: 'relative',
     overflowY: 'auto', // Fix IE11 issue, to remove at some point.
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 'none',
   },
+  paperScrollPaper: {
+    flex: '0 1 auto',
+    maxHeight: `calc(100% - ${48 * 2}px)`,
+  },
+  paperScrollBody: {
+    margin: '48px auto',
+  },
   paperWidthXs: {
     maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+    '&$paperScrollBody': {
+      [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 48 * 2)]: {
+        margin: 48,
+      },
+    },
   },
   paperWidthSm: {
     maxWidth: theme.breakpoints.values.sm,
+    '&$paperScrollBody': {
+      [theme.breakpoints.down(theme.breakpoints.values.sm + 48 * 2)]: {
+        margin: 48,
+      },
+    },
   },
   paperWidthMd: {
     maxWidth: theme.breakpoints.values.md,
+    '&$paperScrollBody': {
+      [theme.breakpoints.down(theme.breakpoints.values.md + 48 * 2)]: {
+        margin: 48,
+      },
+    },
   },
   paperFullWidth: {
     width: '100%',
@@ -43,7 +69,7 @@ export const styles = theme => ({
     width: '100%',
     maxWidth: '100%',
     height: '100%',
-    maxHeight: '100%',
+    maxHeight: 'none',
     borderRadius: 0,
   },
 });
@@ -73,6 +99,7 @@ function Dialog(props) {
     onExiting,
     open,
     PaperProps,
+    scroll,
     TransitionComponent,
     transitionDuration,
     TransitionProps,
@@ -81,7 +108,7 @@ function Dialog(props) {
 
   return (
     <Modal
-      className={classNames(classes.root, className)}
+      className={classNames(classes.root, classes[`scroll${capitalize(scroll)}`], className)}
       BackdropProps={{
         transitionDuration,
         ...BackdropProps,
@@ -109,7 +136,7 @@ function Dialog(props) {
       >
         <Paper
           elevation={24}
-          className={classNames(classes.paper, {
+          className={classNames(classes.paper, classes[`paperScroll${capitalize(scroll)}`], {
             [classes[`paperWidth${maxWidth ? capitalize(maxWidth) : ''}`]]: maxWidth,
             [classes.paperFullScreen]: fullScreen,
             [classes.paperFullWidth]: fullWidth,
@@ -211,6 +238,10 @@ Dialog.propTypes = {
    * Properties applied to the `Paper` element.
    */
   PaperProps: PropTypes.object,
+  /**
+   * Determine the container for scrolling the dialog.
+   */
+  scroll: PropTypes.oneOf(['body', 'paper']),
   /**
    * Transition component.
    */
@@ -235,6 +266,7 @@ Dialog.defaultProps = {
   fullScreen: false,
   fullWidth: false,
   maxWidth: 'sm',
+  scroll: 'paper',
   TransitionComponent: Fade,
   transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
 };

diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -25,11 +25,10 @@ function getHasTransition(props) {
 
 export const styles = theme => ({
   root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
     position: 'fixed',
     zIndex: theme.zIndex.modal,
+    right: 0,
+    bottom: 0,
     top: 0,
     left: 0,
   },

diff --git a/pages/api/dialog.md b/pages/api/dialog.md
@@ -33,6 +33,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func |   | Callback fired when the dialog is exiting. |
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the Dialog is open. |
 | <span class="prop-name">PaperProps</span> | <span class="prop-type">object |   | Properties applied to the `Paper` element. |
+| <span class="prop-name">scroll</span> | <span class="prop-type">enum:&nbsp;'body'&nbsp;&#124;<br>&nbsp;'paper'<br> | <span class="prop-default">'paper'</span> | Determine the container for scrolling the dialog. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">Fade</span> | Transition component. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object |   | Properties applied to the `Transition` element. |
@@ -44,7 +45,11 @@ Any other properties supplied will be spread to the root element ([Modal](/api/m
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `scrollPaper`
+- `scrollBody`
 - `paper`
+- `paperScrollPaper`
+- `paperScrollBody`
 - `paperWidthXs`
 - `paperWidthSm`
 - `paperWidthMd`