From 072959c1e1f18f8135a16899c0f93d641dacf8dd Mon Sep 17 00:00:00 2001 From: Octave Raimbault Date: Tue, 27 Nov 2018 00:03:33 +0100 Subject: [PATCH] [Dialog] Add xl maxWidth and demo component (#13694) * [Dialog] Add xl maxWidth and demo component * let's merge --- .../src/pages/demos/dialogs/MaxWidthDialog.js | 121 ++++++++++++++++++ docs/src/pages/demos/dialogs/dialogs.md | 9 +- 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, 149 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..707fe33d6e4c9f --- /dev/null +++ b/docs/src/pages/demos/dialogs/MaxWidthDialog.js @@ -0,0 +1,121 @@ +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 Switch from '@material-ui/core/Switch'; + +const styles = theme => ({ + form: { + display: 'flex', + flexDirection: 'column', + margin: 'auto', + width: 'fit-content', + }, + formControl: { + marginTop: theme.spacing.unit * 2, + minWidth: 120, + }, + formControlLabel: { + marginTop: theme.spacing.unit, + }, +}); + +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 ( + + + + Optional sizes + + + You can set my maximum width and whether to adapt or not. + +
+ + maxWidth + + + + } + 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..d9a0267efb1a7d 100644 --- a/docs/src/pages/demos/dialogs/dialogs.md +++ b/docs/src/pages/demos/dialogs/dialogs.md @@ -58,9 +58,16 @@ For example, if your site prompts for potential subscribers to fill in their ema {{"demo": "pages/demos/dialogs/FullScreenDialog.js"}} +## Optional sizes + +You can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. +When the `fullWidth` property 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..d418f82babf5e2 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': {