From 5d03946338f9631d02e15a5f1f85b6c4c15dce69 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:11:15 +0100 Subject: [PATCH 1/8] Init --- packages/material-ui/src/Divider/Divider.d.ts | 1 + packages/material-ui/src/Divider/Divider.js | 12 ++++++++++++ packages/material-ui/src/Divider/Divider.test.js | 5 +++++ 3 files changed, 18 insertions(+) diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts index ea5486d8a7ffe5..6f3bb9097110db 100644 --- a/packages/material-ui/src/Divider/Divider.d.ts +++ b/packages/material-ui/src/Divider/Divider.d.ts @@ -4,6 +4,7 @@ export interface DividerTypeMap

{ props: P & { absolute?: boolean; light?: boolean; + flexItem?: 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..4325f6b585306f 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) { @@ -50,8 +55,10 @@ const Divider = React.forwardRef(function Divider(props, ref) { orientation = 'horizontal', role = Component !== 'hr' ? 'separator' : undefined, variant = 'fullWidth', + flexItem, ...other } = props; + console.log('!!flexItem', flexItem, classes.flexItem) return ( ', () => { 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(); From 3b87743520096276abb7aa7502cb71dc6ec293d3 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:15:51 +0100 Subject: [PATCH 2/8] Order --- packages/material-ui/src/Divider/Divider.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 4325f6b585306f..64bfc941837e31 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -51,14 +51,13 @@ const Divider = React.forwardRef(function Divider(props, ref) { classes, className, component: Component = 'hr', + flexItem, light = false, orientation = 'horizontal', role = Component !== 'hr' ? 'separator' : undefined, - variant = 'fullWidth', - flexItem, + variant = 'fullWidth', ...other } = props; - console.log('!!flexItem', flexItem, classes.flexItem) return ( Date: Sat, 8 Feb 2020 20:16:48 +0100 Subject: [PATCH 3/8] Remove empty space --- packages/material-ui/src/Divider/Divider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 64bfc941837e31..6f54601823c388 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -55,7 +55,7 @@ const Divider = React.forwardRef(function Divider(props, ref) { light = false, orientation = 'horizontal', role = Component !== 'hr' ? 'separator' : undefined, - variant = 'fullWidth', + variant = 'fullWidth', ...other } = props; From d91bbabf50ac3ca327b363d58fad47301ade1da0 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:22:43 +0100 Subject: [PATCH 4/8] Remove redundant code --- packages/material-ui/src/Divider/Divider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 6f54601823c388..658eea7ad93572 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -66,7 +66,7 @@ const Divider = React.forwardRef(function Divider(props, ref) { { [classes[variant]]: variant !== 'fullWidth', [classes.absolute]: absolute, - [classes.flexItem]: !!flexItem, + [classes.flexItem]: flexItem, [classes.light]: light, [classes.vertical]: orientation === 'vertical', }, From 9c0f867651ffc3f62d4e64728e466714d888d361 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:41:35 +0100 Subject: [PATCH 5/8] update docs --- docs/pages/api/divider.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md index 056aae3f7af56b..a2d97f6f0c55ab 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 | | If true, the divider will apply different strategy for height | | 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: From 80fabbfbb529b3f4f350f60c7fff75e3ec48bbe7 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:44:09 +0100 Subject: [PATCH 6/8] Adjust to convention --- docs/pages/api/divider.md | 4 ++-- packages/material-ui/src/Divider/Divider.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md index a2d97f6f0c55ab..55f878a51e2144 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 | 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 | | If true, the divider will apply different strategy for height | +| flexItem | bool | false | If `true`, the divider will apply different strategy for height | | 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. | @@ -49,7 +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}. +| 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/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 658eea7ad93572..e3c3a45e335002 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -38,7 +38,7 @@ export const styles = theme => ({ height: '100%', width: 1, }, - /* Styles applied to the root element if flexItem={true}. */ + /* Styles applied to the root element if `flexItem={true}`. */ flexItem: { alignSelf: 'stretch', height: 'auto', @@ -51,7 +51,7 @@ const Divider = React.forwardRef(function Divider(props, ref) { classes, className, component: Component = 'hr', - flexItem, + flexItem = false, light = false, orientation = 'horizontal', role = Component !== 'hr' ? 'separator' : undefined, @@ -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 different strategy for height */ flexItem: PropTypes.bool, /** From 6e1a6791e6d62750cc40a051d81ca3feb57ab6fd Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 8 Feb 2020 20:45:24 +0100 Subject: [PATCH 7/8] Add point --- docs/pages/api/divider.md | 2 +- packages/material-ui/src/Divider/Divider.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md index 55f878a51e2144..f855a9e5f13e88 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 | 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 different strategy for height | +| flexItem | bool | false | If `true`, the divider will apply different strategy for height. | | 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. | diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index e3c3a45e335002..f7e0c6a0dc4913 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 different strategy for height. */ flexItem: PropTypes.bool, /** From d4d91fa5cb245ba5cb1af5d881d562af906690ff Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 9 Feb 2020 13:28:42 +0100 Subject: [PATCH 8/8] 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 | 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 different strategy for height. | +| 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. | 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 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

{ 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, /**