diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md
index 056aae3f7af56b..d351e37865c7b4 100644
--- 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
| absolute | bool | false | Absolutely position the element. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | 'hr' | The component used for the root node. Either a string to use a DOM element or a component. |
+| flexItem | bool | false | If `true`, the divider will apply adapt to a parent flex container. |
| light | bool | false | If `true`, the divider will have a lighter color. |
| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The divider orientation. |
| variant | 'fullWidth'
| 'inset'
| 'middle' | 'fullWidth' | The variant to use. |
@@ -48,6 +49,7 @@ Any other props supplied will be provided to the root element (native element).
| light | .MuiDivider-light | Styles applied to the root element if `light={true}`.
| middle | .MuiDivider-middle | Styles applied to the root element if `variant="middle"`.
| vertical | .MuiDivider-vertical | Styles applied to the root element if `orientation="vertical"`.
+| flexItem | .MuiDivider-flexItem | 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
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 (
-
-
-
-
-
-
-
-
-
+
);
}
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 (
-
-
-
-
-
-
-
-
-
+
);
}
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 ea5486d8a7ffe5..9866ac6f1e07ad 100644
--- 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 {
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
index 68d99b39391b57..43fdb19561e431 100644
--- 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
index 7b92499316dfa3..deccaaf9405e77 100644
--- a/packages/material-ui/src/Divider/Divider.test.js
+++ b/packages/material-ui/src/Divider/Divider.test.js
@@ -37,6 +37,11 @@ describe('', () => {
assert.strictEqual(wrapper.hasClass(classes.light), true);
});
+ it('should set the flexItem class', () => {
+ const wrapper = shallow();
+ assert.strictEqual(wrapper.hasClass(classes.flexItem), true);
+ });
+
describe('prop: variant', () => {
it('should default to variant="fullWidth"', () => {
const wrapper = shallow();