polish

mui · Feb 9, 2020 · d4d91fa · d4d91fa
1 parent 6e1a679
commit d4d91fa
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
   /**