[Dialog] Add dialog with close button to demos (#13845)

* Add dialog with close button to demos

* let's do crazy

docs/src/pages/demos/badges/badges.md

@@ -21,4 +21,10 @@ The visibility of badges can be controlled using the `invisible` property.
 
 ## Customized Badge
 
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here is one example of how you can change the badge position.
+
+⚠️ While the material design specification encourages theming, this example is off the beaten path.
+
 {{"demo": "pages/demos/badges/CustomizedBadge.js"}}

docs/src/pages/demos/buttons/buttons.md

@@ -102,6 +102,8 @@ but you are not confident jumping in,
 here are examples of how you can change the main color of a Button using classes,
 and using a theme; and of a Bootstrap style Button.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/buttons/CustomizedButtons.js"}}
 
 ## Complex Buttons

docs/src/pages/demos/dialogs/AlertDialog.js

@@ -22,7 +22,9 @@ class AlertDialog extends React.Component {
   render() {
     return (
       <div>
-        <Button onClick={this.handleClickOpen}>Open alert dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open alert dialog
+        </Button>
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}

docs/src/pages/demos/dialogs/AlertDialogSlide.js

@@ -27,7 +27,9 @@ class AlertDialogSlide extends React.Component {
   render() {
     return (
       <div>
-        <Button onClick={this.handleClickOpen}>Slide in alert dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Slide in alert dialog
+        </Button>
         <Dialog
           open={this.state.open}
           TransitionComponent={Transition}

docs/src/pages/demos/dialogs/CustomizedDialog.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+const DialogTitle = withStyles(theme => ({
+  root: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    margin: 0,
+    padding: theme.spacing.unit * 2,
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing.unit,
+    top: theme.spacing.unit,
+    color: theme.palette.grey[500],
+  },
+}))(props => {
+  const { children, classes, onClose } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton aria-label="Close" className={classes.closeButton} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles(theme => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing.unit * 2,
+  },
+}))(MuiDialogContent);
+
+const DialogActions = withStyles(theme => ({
+  root: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    margin: 0,
+    padding: theme.spacing.unit,
+  },
+}))(MuiDialogActions);
+
+class CustomizedDialogDemo extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({
+      open: true,
+    });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button variant="outlined" color="secondary" onClick={this.handleClickOpen}>
+          Open dialog
+        </Button>
+        <Dialog
+          onClose={this.handleClose}
+          aria-labelledby="customized-dialog-title"
+          open={this.state.open}
+        >
+          <DialogTitle id="customized-dialog-title" onClose={this.handleClose}>
+            Modal title
+          </DialogTitle>
+          <DialogContent>
+            <Typography gutterBottom>
+              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.
+            </Typography>
+            <Typography gutterBottom>
+              Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor.
+            </Typography>
+            <Typography gutterBottom>
+              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.
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Save changes
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default CustomizedDialogDemo;

docs/src/pages/demos/dialogs/FormDialog.js

@@ -23,7 +23,9 @@ export default class FormDialog extends React.Component {
   render() {
     return (
       <div>
-        <Button onClick={this.handleClickOpen}>Open form dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open form dialog
+        </Button>
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}

docs/src/pages/demos/dialogs/FullScreenDialog.js

@@ -44,7 +44,9 @@ class FullScreenDialog extends React.Component {
     const { classes } = this.props;
     return (
       <div>
-        <Button onClick={this.handleClickOpen}>Open full-screen dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open full-screen dialog
+        </Button>
         <Dialog
           fullScreen
           open={this.state.open}

docs/src/pages/demos/dialogs/MaxWidthDialog.js

@@ -58,7 +58,9 @@ class MaxWidthDialog extends React.Component {
 
     return (
       <React.Fragment>
-        <Button onClick={this.handleClickOpen}>Open max-width dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open max-width dialog
+        </Button>
         <Dialog
           fullWidth={this.state.fullWidth}
           maxWidth={this.state.maxWidth}

docs/src/pages/demos/dialogs/ResponsiveDialog.js

@@ -26,7 +26,9 @@ class ResponsiveDialog extends React.Component {
 
     return (
       <div>
-        <Button onClick={this.handleClickOpen}>Open responsive dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open responsive dialog
+        </Button>
         <Dialog
           fullScreen={fullScreen}
           open={this.state.open}

docs/src/pages/demos/dialogs/SimpleDialog.js

@@ -93,7 +93,9 @@ class SimpleDialogDemo extends React.Component {
       <div>
         <Typography variant="subtitle1">Selected: {this.state.selectedValue}</Typography>
         <br />
-        <Button onClick={this.handleClickOpen}>Open simple dialog</Button>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open simple dialog
+        </Button>
         <SimpleDialogWrapped
           selectedValue={this.state.selectedValue}
           open={this.state.open}

docs/src/pages/demos/dialogs/dialogs.md

@@ -54,6 +54,16 @@ For example, if your site prompts for potential subscribers to fill in their ema
 
 {{"demo": "pages/demos/dialogs/FormDialog.js"}}
 
+## Customized dialog
+
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here is one example of how you can customize the `DialogTitle` to support a close button.
+
+⚠️ While the material design specification encourages theming, this example is off the beaten path.
+
+{{"demo": "pages/demos/dialogs/CustomizedDialog.js"}}
+
 ## Full-screen dialogs
 
 {{"demo": "pages/demos/dialogs/FullScreenDialog.js"}}

docs/src/pages/demos/menus/menus.md

@@ -38,12 +38,16 @@ The primary responsibility of the `MenuList` component is to handle the focus.
 
 ## Customized MenuItem
 
-The `MenuItem` is a wrapper around `ListItem` with some additional styles.
-You can use the same list composition features with the `MenuItem` component:
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here is one example of how you can customize the `MenuItem`.
+
+⚠️ While the material design specification encourages theming, this example is off the beaten path.
 
 {{"demo": "pages/demos/menus/ListItemComposition.js"}}
 
-If text in a simple menu wraps to a second line, use a simple dialog instead. Simple dialogs can have rows with varying heights.
+The `MenuItem` is a wrapper around `ListItem` with some additional styles.
+You can use the same list composition features with the `MenuItem` component:
 
 ## Max height menus
 

docs/src/pages/demos/progress/progress.md

@@ -83,8 +83,13 @@ function Progress(props) {
 
 ## Customized Progress
 
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here is one example of how you can customize the components.
 The last demo demonstrates how you can build a Facebook like spinner.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/progress/CustomizedProgress.js"}}
 
 ## Delaying appearance

docs/src/pages/demos/selection-controls/selection-controls.md

@@ -84,6 +84,8 @@ However, we encourage you to use a [Checkbox](#checkboxes) instead.
 If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/selection-controls/CustomizedSwitches.js"}}
 
 ## Label placement

docs/src/pages/demos/snackbars/snackbars.md

@@ -28,6 +28,8 @@ If you have been reading the [overrides documentation page](/customization/overr
 but you are not confident jumping in,
 here are examples of how you can change the look of a Snackbar.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/snackbars/CustomizedSnackbars.js"}}
 
 ## Positioned

docs/src/pages/demos/steppers/steppers.md

@@ -64,8 +64,14 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
 
 ## Customized Stepper
 
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here are examples of how you can change the look of a stepper.
+
 This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/steppers/CustomizedStepper.js"}}
 
 ## Mobile Stepper

docs/src/pages/demos/tables/tables.md

@@ -41,7 +41,11 @@ The Table has been given a fixed width to demonstrate horizontal scrolling. In o
 
 ## Customized Tables
 
-You can customize the look and feel of the table by overriding the styles of the `TableCell` component.
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here are examples of how you can change the look of a `TableCell`.
+
+⚠️ While the material design specification encourages theming, this example is off the beaten path.
 
 {{"demo": "pages/demos/tables/CustomizedTable.js"}}
 

docs/src/pages/demos/tabs/tabs.md

@@ -67,7 +67,9 @@ Left and right scroll buttons will never be presented.  All scrolling must be in
 ## Customized Tabs
 
 If you have read the [overrides documentation page](/customization/overrides/)
-but aren't confident jumping in, here's an example of how you can change the main color of the Tabs. The following demo matches the [Ant Design UI](https://ant.design/components/tabs/).
+but aren't confident jumping in, here's an example of how you can change the main color of the Tabs.
+
+⚠️ While the material design specification encourages theming, this example is off the beaten path.
 
 {{"demo": "pages/demos/tabs/CustomizedTabs.js"}}
 

docs/src/pages/demos/text-fields/text-fields.md

@@ -53,6 +53,8 @@ The component takes care of the most used properties, then it's up to the user t
 If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in, here's an example of how you can change the main color of an Input.
 
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
 {{"demo": "pages/demos/text-fields/CustomizedInputs.js"}}
 
 ## Input Adornments