[Divider] Add support for middle divider

docs/src/pages/demos/dividers/InsetDividers.js

@@ -21,32 +21,30 @@ const styles = theme => ({
 function InsetDividers(props) {
   const { classes } = props;
   return (
-    <div className={classes.root}>
-      <List>
-        <ListItem>
-          <Avatar>
-            <ImageIcon />
-          </Avatar>
-          <ListItemText primary="Photos" secondary="Jan 9, 2014" />
-        </ListItem>
-        <li>
-          <Divider inset />
-        </li>
-        <ListItem>
-          <Avatar>
-            <WorkIcon />
-          </Avatar>
-          <ListItemText primary="Work" secondary="Jan 7, 2014" />
-        </ListItem>
-        <Divider inset component="li" />
-        <ListItem>
-          <Avatar>
-            <BeachAccessIcon />
-          </Avatar>
-          <ListItemText primary="Vacation" secondary="July 20, 2014" />
-        </ListItem>
-      </List>
-    </div>
+    <List className={classes.root}>
+      <ListItem>
+        <Avatar>
+          <ImageIcon />
+        </Avatar>
+        <ListItemText primary="Photos" secondary="Jan 9, 2014" />
+      </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
+      <ListItem>
+        <Avatar>
+          <WorkIcon />
+        </Avatar>
+        <ListItemText primary="Work" secondary="Jan 7, 2014" />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem>
+        <Avatar>
+          <BeachAccessIcon />
+        </Avatar>
+        <ListItemText primary="Vacation" secondary="July 20, 2014" />
+      </ListItem>
+    </List>
   );
 }
 

docs/src/pages/demos/dividers/ListDividers.js

@@ -17,24 +17,22 @@ const styles = theme => ({
 function ListDividers(props) {
   const { classes } = props;
   return (
-    <div className={classes.root}>
-      <List component="nav">
-        <ListItem button>
-          <ListItemText primary="Inbox" />
-        </ListItem>
-        <Divider />
-        <ListItem button divider>
-          <ListItemText primary="Drafts" />
-        </ListItem>
-        <ListItem button>
-          <ListItemText primary="Trash" />
-        </ListItem>
-        <Divider light />
-        <ListItem button>
-          <ListItemText primary="Spam" />
-        </ListItem>
-      </List>
-    </div>
+    <List component="nav" className={classes.root}>
+      <ListItem button>
+        <ListItemText primary="Inbox" />
+      </ListItem>
+      <Divider />
+      <ListItem button divider>
+        <ListItemText primary="Drafts" />
+      </ListItem>
+      <ListItem button>
+        <ListItemText primary="Trash" />
+      </ListItem>
+      <Divider light />
+      <ListItem button>
+        <ListItemText primary="Spam" />
+      </ListItem>
+    </List>
   );
 }
 

docs/src/pages/demos/dividers/MiddleDividers.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  chip: {
+    marginRight: theme.spacing.unit,
+  },
+  section1: {
+    margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+  },
+  section2: {
+    margin: theme.spacing.unit * 2,
+  },
+  section3: {
+    margin: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+  },
+});
+
+function MiddleDividers(props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <div className={classes.section1}>
+        <Grid container alignItems="center">
+          <Grid item xs>
+            <Typography gutterBottom variant="h4">
+              Toothbrush
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography gutterBottom variant="h6">
+              $4.50
+            </Typography>
+          </Grid>
+        </Grid>
+        <Typography color="textSecondary">
+          Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
+          hall.
+        </Typography>
+      </div>
+      <Divider variant="middle" />
+      <div className={classes.section2}>
+        <Typography gutterBottom variant="body1">
+          Select type
+        </Typography>
+        <div>
+          <Chip className={classes.chip} label="Extra Soft" />
+          <Chip className={classes.chip} label="Soft" />
+          <Chip className={classes.chip} label="Medium" />
+          <Chip className={classes.chip} label="Hard" />
+        </div>
+      </div>
+      <div className={classes.section3}>
+        <Button variant="contained" color="primary" fullWidth>
+          Add to cart
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+MiddleDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MiddleDividers);

docs/src/pages/demos/dividers/SubheaderDividers.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  dividerFullWidth: {
+    margin: `5px 0 0 ${theme.spacing.unit * 2}px`,
+  },
+  dividerInset: {
+    margin: `5px 0 0 ${theme.spacing.unit * 9}px`,
+  },
+});
+
+function SubheaderDividers(props) {
+  const { classes } = props;
+  return (
+    <List className={classes.root}>
+      <ListItem>
+        <ListItemText primary="Photos" secondary="Jan 9, 2014" />
+      </ListItem>
+      <Divider component="li" />
+      <li>
+        <Typography className={classes.dividerFullWidth} color="textSecondary" variant="caption">
+          Divider
+        </Typography>
+      </li>
+      <ListItem>
+        <ListItemText primary="Work" secondary="Jan 7, 2014" />
+      </ListItem>
+      <Divider component="li" variant="inset" />
+      <li>
+        <Typography className={classes.dividerInset} color="textSecondary" variant="caption">
+          Leisure
+        </Typography>
+      </li>
+      <ListItem>
+        <Avatar>
+          <BeachAccessIcon />
+        </Avatar>
+        <ListItemText primary="Vacation" secondary="July 20, 2014" />
+      </ListItem>
+    </List>
+  );
+}
+
+SubheaderDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SubheaderDividers);

docs/src/pages/demos/dividers/dividers.md

@@ -16,10 +16,21 @@ You can save rendering this DOM element by using the `divider` property on the `
 
 {{"demo": "pages/demos/dividers/ListDividers.js"}}
 
-## Inset Dividers
+## HTML5 Specification
 
-The following example demonstrates the `inset` property.
 We need to make sure the `Divider` is rendered as a `li` to match the HTML5 specification.
-The example shows two ways of achieving this.
+The examples below show two ways of achieving this.
+
+## Inset Dividers
+
+The `inset` property has now been deprecated. You should now use `variant="inset"`
 
 {{"demo": "pages/demos/dividers/InsetDividers.js"}}
+
+## Subheader Dividers
+
+{{"demo": "pages/demos/dividers/SubheaderDividers.js"}}
+
+## Middle Dividers
+
+{{"demo": "pages/demos/dividers/MiddleDividers.js"}}

packages/material-ui/src/Divider/Divider.d.ts

@@ -7,9 +7,10 @@ export interface DividerProps
   component?: React.ReactType<DividerProps>;
   inset?: boolean;
   light?: boolean;
+  variant?: 'fullWidth' | 'inset' | 'middle';
 }
 
-export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light';
+export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle';
 
 declare const Divider: React.ComponentType<DividerProps>;
 

packages/material-ui/src/Divider/Divider.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
+import chainPropTypes from '../utils/chainPropTypes';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -20,41 +21,54 @@ export const styles = theme => ({
     left: 0,
     width: '100%',
   },
-  /* Styles applied to the root element if `inset={true}`. */
+  /* Styles applied to the root element if `variant="inset"`. */
   inset: {
     marginLeft: 72,
   },
   /* Styles applied to the root element if `light={true}`. */
   light: {
     backgroundColor: fade(theme.palette.divider, 0.08),
   },
+  /* Styles applied to the root element if `variant="middle"`. */
+  middle: {
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit * 2,
+  },
 });
 
 function Divider(props) {
   const {
     absolute,
     classes,
-    className: classNameProp,
+    className,
     component: Component,
     inset,
     light,
+    variant,
     ...other
   } = props;
 
-  const className = classNames(
-    classes.root,
-    {
-      [classes.absolute]: absolute,
-      [classes.inset]: inset,
-      [classes.light]: light,
-    },
-    classNameProp,
+  return (
+    <Component
+      className={classNames(
+        classes.root,
+        {
+          [classes.inset]: inset || variant === 'inset',
+          [classes.middle]: variant === 'middle',
+          [classes.absolute]: absolute,
+          [classes.light]: light,
+        },
+        className,
+      )}
+      {...other}
+    />
   );
-
-  return <Component className={className} {...other} />;
 }
 
 Divider.propTypes = {
+  /**
+   * Absolutely position the element.
+   */
   absolute: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
@@ -72,19 +86,36 @@ Divider.propTypes = {
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the divider will be indented.
+   * __WARNING__: `inset` is deprecated.
+   * Instead use `variant="inset"`.
    */
-  inset: PropTypes.bool,
+  inset: chainPropTypes(PropTypes.bool, props => {
+    /* istanbul ignore if */
+    if (props.inset) {
+      return new Error(
+        'Material-UI: you are using the deprecated `inset` property ' +
+          'that will be removed in the next major release. The property `variant="inset"` ' +
+          'is equivalent and should be used instead.',
+      );
+    }
+
+    return null;
+  }),
   /**
    * If `true`, the divider will have a lighter color.
    */
   light: PropTypes.bool,
+  /**
+   *  The variant to use.
+   */
+  variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle']),
 };
 
 Divider.defaultProps = {
   absolute: false,
   component: 'hr',
-  inset: false,
   light: false,
+  variant: 'fullWidth',
 };
 
 export default withStyles(styles, { name: 'MuiDivider' })(Divider);