[docs] Document the scroll property

mui · Jul 1, 2018 · 58520f8 · 58520f8
1 parent c377e61
commit 58520f8
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 11 deletions.
diff --git a/docs/src/pages/demos/dialogs/ScrollDialog.js b/docs/src/pages/demos/dialogs/ScrollDialog.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+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';
+
+class ScrollDialog extends React.Component {
+  state = {
+    open: false,
+    scroll: 'paper',
+  };
+
+  handleClickOpen = scroll => () => {
+    this.setState({ open: true, scroll });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.handleClickOpen('paper')}>scroll=paper</Button>
+        <Button onClick={this.handleClickOpen('body')}>scroll=body</Button>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          scroll={this.state.scroll}
+          aria-labelledby="scroll-dialog-title"
+        >
+          <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              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. Vivamus
+              sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum
+              nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur
+              et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 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. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla
+              sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+              Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 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. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla
+              sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+              Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 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. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla
+              sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+              Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 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. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla
+              sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+              Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 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. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla
+              sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+              Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleClose} color="primary">
+              Subscribe
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default ScrollDialog;
diff --git a/docs/src/pages/demos/dialogs/dialogs.md b/docs/src/pages/demos/dialogs/dialogs.md
@@ -1,6 +1,6 @@
 ---
 title: Dialog React component
-components: Dialog, DialogTitle, DialogContent, DialogActions, Slide
+components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide
 ---
 
 # Dialogs
@@ -74,3 +74,13 @@ You may make a `Dialog` responsively full screen the dialog using `withMobileDia
 ## Accessibility
 
 Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Dialog`. Additionally, you may give a description of your modal dialog with the `aria-describedby="id..."` property on the `Dialog`.
+
+## Scrolling long content
+
+When dialogs become too long for the user’s viewport or device, they scroll.
+- `scroll=paper` the content of the dialog scrolls within the paper element.
+- `scroll=body` the content of the dialog scrolls within the body element.
+
+Try the demo below to see what we mean:
+
+{{"demo": "pages/demos/dialogs/ScrollDialog.js"}}
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -43,11 +43,13 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 }
 
 class Modal extends React.Component {
-  dialogElement = null;
+  mountNode = null;
 
-  mounted = false;
+  modalNode = null;
 
-  mountNode = null;
+  dialogNode = null;
+
+  mounted = false;
 
   constructor(props) {
     super(props);
@@ -105,6 +107,9 @@ class Modal extends React.Component {
   handleRendered = () => {
     this.autoFocus();
 
+    // Fix a bug on Chrome where the scroll isn't initially 0.
+    this.modalNode.scrollTop = 0;
+
     if (this.props.onRendered) {
       this.props.onRendered();
     }
@@ -171,8 +176,8 @@ class Modal extends React.Component {
 
     const currentActiveElement = ownerDocument(this.mountNode).activeElement;
 
-    if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) {
-      this.dialogElement.focus();
+    if (this.dialogNode && !this.dialogNode.contains(currentActiveElement)) {
+      this.dialogNode.focus();
     }
   };
 
@@ -183,10 +188,10 @@ class Modal extends React.Component {
 
     const currentActiveElement = ownerDocument(this.mountNode).activeElement;
 
-    if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) {
+    if (this.dialogNode && !this.dialogNode.contains(currentActiveElement)) {
       this.lastFocus = currentActiveElement;
 
-      if (!this.dialogElement.hasAttribute('tabIndex')) {
+      if (!this.dialogNode.hasAttribute('tabIndex')) {
         warning(
           false,
           [
@@ -195,10 +200,10 @@ class Modal extends React.Component {
               'the tabIndex of the node is being set to "-1".',
           ].join('\n'),
         );
-        this.dialogElement.setAttribute('tabIndex', -1);
+        this.dialogNode.setAttribute('tabIndex', -1);
       }
 
-      this.dialogElement.focus();
+      this.dialogNode.focus();
     }
   }
 
@@ -277,6 +282,9 @@ class Modal extends React.Component {
       >
         <div
           data-mui-test="Modal"
+          ref={node => {
+            this.modalNode = node;
+          }}
           className={classNames(classes.root, className, {
             [classes.hidden]: exited,
           })}
@@ -287,7 +295,7 @@ class Modal extends React.Component {
           )}
           <RootRef
             rootRef={node => {
-              this.dialogElement = node;
+              this.dialogNode = node;
             }}
           >
             {React.cloneElement(children, childProps)}

diff --git a/pages/demos/dialogs.js b/pages/demos/dialogs.js
@@ -55,6 +55,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/dialogs/ResponsiveDialog'), 'utf8')
+`,
+        },
+        'pages/demos/dialogs/ScrollDialog.js': {
+          js: require('docs/src/pages/demos/dialogs/ScrollDialog').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/dialogs/ScrollDialog'), 'utf8')
 `,
         },
       }}