Material-ui: [Dialog] suggestion: fullWidth dialog property

[xaviergonz]

Basically most times I want to make a dialog that instead of having a defined size takes all the available size (up to maxSize=xs/md...) instead of adapting to the content size. To do this I had to make my own style around it:

import { default as Dialog, DialogProps } from 'material-ui/Dialog';
import withStyles from 'material-ui/styles/withStyles';
import * as React from 'react';

export const FullWidthDialog = withStyles<DialogProps>(
  {
    paper: {
      width: '100%'
    }
  }
)(
  (props: DialogProps) => {
    const { children, ...others } = props;
    return (
      <Dialog
        {...others}
      >
        {children}
      </Dialog>
    );
  }
);

Would it be sensible to add a "fullWidth" to the dialog property that does that for you?

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

N/A

Current Behavior

N/A

Context

See the description above

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | latest beta |
| React | 15 |
| browser | Chrome 61 |
| TS | 2.5.2 |

[oliviertassinari]

We already have the Tabs and the Input components accepting a fullWidth property. Why not.

[oliviertassinari]

Side question, how is this different from the fullScreen property?

[oliviertassinari]

Oh, ok, It's completely different.

[kgregory]

I remember @rosskevin posting a really good wrapper for dialog in gitter that accomplished something similar.

[rosskevin]

Thanks @kgregory for mentioning that.

I have something that responsively grows with the screen if you turn it on, and it maintains margin one breakpoint under the current. It has worked quite well.

It would need cleaned up and turned into a HOC, and we should debate the API (the property is a little long):

// @flow

import React from 'react'
import classNames from 'classnames'
import {default as MuiDialog} from 'material-ui/Dialog'
import {withStyles} from 'material-ui/styles'
import {keys} from 'material-ui/styles/createBreakpoints'
import type {Breakpoint} from 'material-ui/styles/createBreakpoints'
import type {Props as DialogProps} from 'material-ui/Dialog/Dialog'

export const styles = (theme: Object) => {
  const { breakpoints } = theme
  const sheet = {}

  for (let i = 0; i < keys.length; i++) {
    const breakpoint = keys[ i ]
    sheet[ breakpoints.up(breakpoint) ] = {
      [`${breakpoint}Up`]: {
        minWidth: breakpoints.getWidth(breakpoint)
      }
    }
  }

  return sheet
}

export type Props = {
  ...$Exact<DialogProps>,
  /**
   * Given one or more breakpoints, the minWidth will grow to consume more space as the page width grows, up to
   * the largest given size.
   */
  responsiveMinWidth?: Breakpoint | Array<Breakpoint>
}

type AllProps = {
  ...$Exact<Props>,
  classes: Object
}

const Dialog = (props: AllProps) => {
  const { responsiveMinWidth: responsiveMinWidthProp, classes: classesProp, ...rest } = props
  const responsiveMinWidth = responsiveMinWidthProp
    ? (Array.isArray(responsiveMinWidthProp)
      ? responsiveMinWidthProp
      : [ responsiveMinWidthProp ])
    : []
  const breakpointsUp = responsiveMinWidth.map(breakpoint => classesProp[ `${breakpoint}Up` ])
  const paperClassNames = classNames(classesProp.paper, ...breakpointsUp)
  const { xsUp, smUp, mdUp, lgUp, xlUp, ...classesRest } = classesProp // eslint-disable-line no-unused-vars
  const classes = { ...classesRest, paper: paperClassNames }

  return <MuiDialog {...rest} classes={classes} />
}

export default withStyles(styles, { name: 'ui-Dialog' })(Dialog)