From 38d75af98da6fc3d11485e8e279d7987e3633a5f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 1 Jul 2018 23:31:25 +0200 Subject: [PATCH] [docs] Document the scroll property (#12025) --- docs/src/pages/demos/dialogs/ScrollDialog.js | 89 ++++++++++++++++++++ docs/src/pages/demos/dialogs/dialogs.md | 12 ++- packages/material-ui/src/Modal/Modal.js | 28 +++--- pages/api/dialog-content-text.md | 4 + pages/demos/dialogs.js | 7 ++ 5 files changed, 129 insertions(+), 11 deletions(-) create mode 100644 docs/src/pages/demos/dialogs/ScrollDialog.js diff --git a/docs/src/pages/demos/dialogs/ScrollDialog.js b/docs/src/pages/demos/dialogs/ScrollDialog.js new file mode 100644 index 00000000000000..29d67ab0c865d9 --- /dev/null +++ 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 ( +
+ + + + Subscribe + + + 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. + + + + + + + +
+ ); + } +} + +export default ScrollDialog; diff --git a/docs/src/pages/demos/dialogs/dialogs.md b/docs/src/pages/demos/dialogs/dialogs.md index f20a6d3ef1c600..22cc12ba0443ba 100644 --- 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 index 3ab90e8ed466b6..69bf4bfd8e5b02 100644 --- 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 { >
{ + this.modalNode = node; + }} className={classNames(classes.root, className, { [classes.hidden]: exited, })} @@ -287,7 +295,7 @@ class Modal extends React.Component { )} { - this.dialogElement = node; + this.dialogNode = node; }} > {React.cloneElement(children, childProps)} diff --git a/pages/api/dialog-content-text.md b/pages/api/dialog-content-text.md index f814109cadcd27..ec2066219dd2ab 100644 --- a/pages/api/dialog-content-text.md +++ b/pages/api/dialog-content-text.md @@ -39,3 +39,7 @@ you need to use the following style sheet name: `MuiDialogContentText`. The properties of the [Typography](/api/typography) component are also available. You can take advantage of this behavior to [target nested components](/guides/api#spread). +## Demos + +- [Dialogs](/demos/dialogs) + diff --git a/pages/demos/dialogs.js b/pages/demos/dialogs.js index ee9debe2e0e0b6..b0a4d70d1c59a4 100644 --- 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') `, }, }}