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,112 @@
+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">
+              Cancel
+            </Button>
+            <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"}}
@@ -80,12 +90,6 @@ Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the ac
 
 {{"demo": "pages/demos/dialogs/ConfirmationDialog.js"}}
 
-## Adding a close button
-
-You can customize the `DialogTitle` to support a close button that will close the `Dialog` on click.
-
-{{"demo": "pages/demos/dialogs/WithCloseButtonDialog.js"}}
-
 ## 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`.