From 14c93c4662645145a0a000695322b982b4c290c5 Mon Sep 17 00:00:00 2001 From: Octave Raimbault Date: Mon, 26 Nov 2018 12:28:14 +0100 Subject: [PATCH 1/2] [Dialog] Add xl maxWidth and demo component --- .../src/pages/demos/dialogs/MaxWidthDialog.js | 125 ++++++++++++++++++ docs/src/pages/demos/dialogs/dialogs.md | 8 +- packages/material-ui/src/Dialog/Dialog.d.ts | 2 +- packages/material-ui/src/Dialog/Dialog.js | 11 +- pages/api/dialog.md | 3 +- pages/demos/dialogs.js | 7 + 6 files changed, 152 insertions(+), 4 deletions(-) create mode 100644 docs/src/pages/demos/dialogs/MaxWidthDialog.js diff --git a/docs/src/pages/demos/dialogs/MaxWidthDialog.js b/docs/src/pages/demos/dialogs/MaxWidthDialog.js new file mode 100644 index 00000000000000..58f7ac97c7717d --- /dev/null +++ b/docs/src/pages/demos/dialogs/MaxWidthDialog.js @@ -0,0 +1,125 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +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'; +import FormControl from '@material-ui/core/FormControl'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import InputLabel from '@material-ui/core/InputLabel'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import Slide from '@material-ui/core/Slide'; +import Switch from '@material-ui/core/Switch'; + +const styles = theme => ({ + form: { + display: 'flex', + flexDirection: 'column', + margin: 'auto', + width: 'fit-content', + }, + formControl: { + marginTop: theme.spacing.unit, + minWidth: 120, + }, + formControlLabel: { + marginTop: theme.spacing.unit, + }, +}); + +function Transition(props) { + return ; +} + +class FullScreenDialog extends React.Component { + state = { + open: false, + fullWidth: true, + maxWidth: 'sm', + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleMaxWidthChange = event => { + this.setState({ maxWidth: event.target.value }); + }; + + handleFullWidthChange = event => { + this.setState({ fullWidth: event.target.checked }); + }; + + render() { + const { classes } = this.props; + return ( +
+ + + Play with me + + + You can set my maximum width and whether to adapt or not. + +
+ + Max width + + + + } + label="Full width" + /> + +
+ + + + +
+ ); + } +} + +FullScreenDialog.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FullScreenDialog); diff --git a/docs/src/pages/demos/dialogs/dialogs.md b/docs/src/pages/demos/dialogs/dialogs.md index 6f7f7c34376b06..c65b89a2d31447 100644 --- a/docs/src/pages/demos/dialogs/dialogs.md +++ b/docs/src/pages/demos/dialogs/dialogs.md @@ -58,9 +58,15 @@ For example, if your site prompts for potential subscribers to fill in their ema {{"demo": "pages/demos/dialogs/FullScreenDialog.js"}} +## Sizable dialogs + +You can set a `Dialog` maximum with by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When `fullWidth` is true, the dialog will adapt based on the `maxWidth` value. + +{{"demo": "pages/demos/dialogs/MaxWidthDialog.js"}} + ## Responsive full-screen -You may make a `Dialog` responsively full screen the dialog using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/layout/basics/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +You may make a `Dialog` responsively full screen the dialog using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens _at or below_ the `sm` [screen size](/layout/basics/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. {{"demo": "pages/demos/dialogs/ResponsiveDialog.js"}} diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts index c14dd227b954c9..23d85536488ba6 100644 --- a/packages/material-ui/src/Dialog/Dialog.d.ts +++ b/packages/material-ui/src/Dialog/Dialog.d.ts @@ -9,7 +9,7 @@ export interface DialogProps children?: React.ReactNode; fullScreen?: boolean; fullWidth?: boolean; - maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | false; + maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false; PaperProps?: Partial; scroll?: 'body' | 'paper'; TransitionComponent?: React.ReactType; diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index a77c13582fbc70..6c0c560c7f6179 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -85,6 +85,15 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the `Paper` component if `maxWidth="xl"`. */ + paperWidthXl: { + maxWidth: theme.breakpoints.values.xl, + '&$paperScrollBody': { + [theme.breakpoints.down(theme.breakpoints.values.xl + 48 * 2)]: { + margin: 48, + }, + }, + }, /* Styles applied to the `Paper` component if `fullWidth={true}`. */ paperFullWidth: { width: '100%', @@ -241,7 +250,7 @@ Dialog.propTypes = { * on the desktop where you might need some coherent different width size across your * application. Set to `false` to disable `maxWidth`. */ - maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', false]), + maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), /** * Callback fired when the backdrop is clicked. */ diff --git a/pages/api/dialog.md b/pages/api/dialog.md index 214b19d5dbcea0..5341b2b13bedc9 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -24,7 +24,7 @@ Dialogs are overlaid modal paper based components with a backdrop. | disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. | | fullScreen | bool | false | If `true`, the dialog will be full-screen | | fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`. | -| maxWidth | enum: 'xs', 'sm', 'md', 'lg', false
 | 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. | +| maxWidth | enum: 'xs', 'sm', 'md', 'lg', 'xl', false
 | 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. | | onBackdropClick | func |   | Callback fired when the backdrop is clicked. | | onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | onEnter | func |   | Callback fired before the dialog enters. | @@ -62,6 +62,7 @@ This property accepts the following keys: | paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. | paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. | paperWidthLg | Styles applied to the `Paper` component if `maxWidth="lg"`. +| paperWidthXl | Styles applied to the `Paper` component if `maxWidth="xl"`. | paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. | paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. diff --git a/pages/demos/dialogs.js b/pages/demos/dialogs.js index aaeea490b37fcf..b4eaaf4f82e4a6 100644 --- a/pages/demos/dialogs.js +++ b/pages/demos/dialogs.js @@ -42,6 +42,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/dialogs/FullScreenDialog'), 'utf8') +`, + }, + 'pages/demos/dialogs/MaxWidthDialog.js': { + js: require('docs/src/pages/demos/dialogs/MaxWidthDialog').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/dialogs/MaxWidthDialog'), 'utf8') `, }, 'pages/demos/dialogs/FormDialog.js': { From fccde9891bc335357a91e385c6edb9fe95e11394 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 26 Nov 2018 23:54:47 +0100 Subject: [PATCH 2/2] let's merge --- docs/src/pages/demos/dialogs/MaxWidthDialog.js | 18 +++++++----------- docs/src/pages/demos/dialogs/dialogs.md | 7 ++++--- packages/material-ui/src/Dialog/Dialog.d.ts | 2 +- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/src/pages/demos/dialogs/MaxWidthDialog.js b/docs/src/pages/demos/dialogs/MaxWidthDialog.js index 58f7ac97c7717d..707fe33d6e4c9f 100644 --- a/docs/src/pages/demos/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/demos/dialogs/MaxWidthDialog.js @@ -12,7 +12,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; -import Slide from '@material-ui/core/Slide'; import Switch from '@material-ui/core/Switch'; const styles = theme => ({ @@ -23,7 +22,7 @@ const styles = theme => ({ width: 'fit-content', }, formControl: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing.unit * 2, minWidth: 120, }, formControlLabel: { @@ -31,10 +30,6 @@ const styles = theme => ({ }, }); -function Transition(props) { - return ; -} - class FullScreenDialog extends React.Component { state = { open: false, @@ -60,24 +55,25 @@ class FullScreenDialog extends React.Component { render() { const { classes } = this.props; + return ( -
+ - Play with me + Optional sizes You can set my maximum width and whether to adapt or not.
- Max width + maxWidth