[Divider] Fix height for vertical divider in a flexbox (#19614)

mui · Feb 9, 2020 · 624d9ce · 624d9ce
1 parent 5794780
commit 624d9ce
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 20 deletions.
diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md
@@ -27,6 +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 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. |
@@ -48,6 +49,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">light</span> | <span class="prop-name">.MuiDivider-light</span> | Styles applied to the root element if `light={true}`.
 | <span class="prop-name">middle</span> | <span class="prop-name">.MuiDivider-middle</span> | Styles applied to the root element if `variant="middle"`.
 | <span class="prop-name">vertical</span> | <span class="prop-name">.MuiDivider-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">flexItem</span> | <span class="prop-name">.MuiDivider-flexItem</span> | Styles applied to the root element if `flexItem={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 

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,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 export interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {
   props: P & {
     absolute?: 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
@@ -38,6 +38,11 @@ export const styles = theme => ({
     height: '100%',
     width: 1,
   },
+  /* Styles applied to the root element if `flexItem={true}`. */
+  flexItem: {
+    alignSelf: 'stretch',
+    height: 'auto',
+  },
 });
 
 const Divider = React.forwardRef(function Divider(props, ref) {
@@ -46,6 +51,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
     classes,
     className,
     component: Component = 'hr',
+    flexItem = false,
     light = false,
     orientation = 'horizontal',
     role = Component !== 'hr' ? 'separator' : undefined,
@@ -60,6 +66,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
         {
           [classes[variant]]: variant !== 'fullWidth',
           [classes.absolute]: absolute,
+          [classes.flexItem]: flexItem,
           [classes.light]: light,
           [classes.vertical]: orientation === 'vertical',
         },
@@ -91,6 +98,10 @@ Divider.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * If `true`, the divider will apply adapt to a parent flex container.
+   */
+  flexItem: PropTypes.bool,
   /**
    * If `true`, the divider will have a lighter color.
    */

diff --git a/packages/material-ui/src/Divider/Divider.test.js b/packages/material-ui/src/Divider/Divider.test.js
@@ -37,6 +37,11 @@ describe('<Divider />', () => {
     assert.strictEqual(wrapper.hasClass(classes.light), true);
   });
 
+  it('should set the flexItem class', () => {
+    const wrapper = shallow(<Divider flexItem />);
+    assert.strictEqual(wrapper.hasClass(classes.flexItem), true);
+  });
+
   describe('prop: variant', () => {
     it('should default to variant="fullWidth"', () => {
       const wrapper = shallow(<Divider />);