From d4d91fa5cb245ba5cb1af5d881d562af906690ff Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 9 Feb 2020 13:28:42 +0100
Subject: [PATCH] polish

---
 docs/pages/api/divider.md                     |  2 +-
 .../components/dividers/VerticalDividers.js   | 22 ++++++++++---------
 .../components/dividers/VerticalDividers.tsx  | 22 ++++++++++---------
 .../src/pages/components/dividers/dividers.md |  1 +
 packages/material-ui/src/Divider/Divider.d.ts |  2 +-
 packages/material-ui/src/Divider/Divider.js   |  2 +-
 6 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md
index f855a9e5f13e88..d351e37865c7b4 100644
--- a/docs/pages/api/divider.md
+++ b/docs/pages/api/divider.md
@@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">absolute</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Absolutely position the element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'hr'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">flexItem</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the divider will apply different strategy for height. |
+| <span class="prop-name">flexItem</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the divider will apply adapt to a parent flex container. |
 | <span class="prop-name">light</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the divider will have a lighter color. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The divider orientation. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'fullWidth'<br>&#124;&nbsp;'inset'<br>&#124;&nbsp;'middle'</span> | <span class="prop-default">'fullWidth'</span> | The variant to use. |
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index 2045deb2a86d8c..b35859e1fc26f5 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.secondary,
     '& svg': {
-      margin: theme.spacing(2),
+      margin: theme.spacing(1.5),
     },
     '& hr': {
       margin: theme.spacing(0, 0.5),
@@ -29,14 +29,16 @@ export default function VerticalDividers() {
   const classes = useStyles();
 
   return (
-    <Grid container alignItems="center" className={classes.root}>
-      <FormatAlignLeftIcon />
-      <FormatAlignCenterIcon />
-      <FormatAlignRightIcon />
-      <Divider orientation="vertical" />
-      <FormatBoldIcon />
-      <FormatItalicIcon />
-      <FormatUnderlinedIcon />
-    </Grid>
+    <div>
+      <Grid container alignItems="center" className={classes.root}>
+        <FormatAlignLeftIcon />
+        <FormatAlignCenterIcon />
+        <FormatAlignRightIcon />
+        <Divider orientation="vertical" flexItem />
+        <FormatBoldIcon />
+        <FormatItalicIcon />
+        <FormatUnderlinedIcon />
+      </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index c9aad582f297f7..7bcf0d71e6453a 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.secondary,
       '& svg': {
-        margin: theme.spacing(2),
+        margin: theme.spacing(1.5),
       },
       '& hr': {
         margin: theme.spacing(0, 0.5),
@@ -31,14 +31,16 @@ export default function VerticalDividers() {
   const classes = useStyles();
 
   return (
-    <Grid container alignItems="center" className={classes.root}>
-      <FormatAlignLeftIcon />
-      <FormatAlignCenterIcon />
-      <FormatAlignRightIcon />
-      <Divider orientation="vertical" />
-      <FormatBoldIcon />
-      <FormatItalicIcon />
-      <FormatUnderlinedIcon />
-    </Grid>
+    <div>
+      <Grid container alignItems="center" className={classes.root}>
+        <FormatAlignLeftIcon />
+        <FormatAlignCenterIcon />
+        <FormatAlignRightIcon />
+        <Divider orientation="vertical" flexItem />
+        <FormatBoldIcon />
+        <FormatItalicIcon />
+        <FormatUnderlinedIcon />
+      </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md
index 762bd8e1c0e849..84a6f6d8ea558c 100644
--- a/docs/src/pages/components/dividers/dividers.md
+++ b/docs/src/pages/components/dividers/dividers.md
@@ -36,5 +36,6 @@ The examples below show two ways of achieving this.
 ## Vertical Dividers
 
 You can also render a divider vertically using the `orientation` prop.
+Note the usage of the `flexItem` prop to accommodate for the flex container.
 
 {{"demo": "pages/components/dividers/VerticalDividers.js", "bg": true}}
diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts
index 6f3bb9097110db..9866ac6f1e07ad 100644
--- a/packages/material-ui/src/Divider/Divider.d.ts
+++ b/packages/material-ui/src/Divider/Divider.d.ts
@@ -3,8 +3,8 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 export interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {
   props: P & {
     absolute?: boolean;
-    light?: boolean;
     flexItem?: boolean;
+    light?: boolean;
     orientation?: 'horizontal' | 'vertical';
     variant?: 'fullWidth' | 'inset' | 'middle';
   };
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index f7e0c6a0dc4913..43fdb19561e431 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -99,7 +99,7 @@ Divider.propTypes = {
    */
   component: PropTypes.elementType,
   /**
-   * If `true`, the divider will apply different strategy for height.
+   * If `true`, the divider will apply adapt to a parent flex container.
    */
   flexItem: PropTypes.bool,
   /**