[Divider] Add vertical support

[oliviertassinari]

No description provided.

[mui-pr-bot]

Details of bundle changes.

Comparing: 10ed7cf...b2e25ff

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.03% 🔺	+0.04% 🔺	329,178	329,281	90,019	90,055
@material-ui/core/Paper	0.00%	0.00%	68,843	68,843	20,523	20,523
@material-ui/core/Paper.esm	0.00%	0.00%	62,217	62,217	19,249	19,249
@material-ui/core/Popper	0.00%	0.00%	28,468	28,468	10,177	10,177
@material-ui/core/Textarea	0.00%	0.00%	5,094	5,094	2,135	2,135
@material-ui/core/TrapFocus	0.00%	0.00%	3,834	3,834	1,614	1,614
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,386	16,386	5,826	5,826
@material-ui/core/useMediaQuery	0.00%	0.00%	2,541	2,541	1,059	1,059
@material-ui/lab	0.00%	0.00%	153,211	153,211	46,742	46,742
@material-ui/styles	0.00%	0.00%	51,561	51,561	15,339	15,339
@material-ui/system	0.00%	0.00%	15,658	15,658	4,360	4,360
Button	0.00%	0.00%	78,847	78,847	24,093	24,093
Modal	0.00%	0.00%	14,346	14,346	5,011	5,011
Portal	0.00%	0.00%	2,907	2,907	1,318	1,318
Rating	0.00%	0.00%	70,206	70,206	21,925	21,925
Slider	0.00%	0.00%	74,539	74,539	23,108	23,108
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	53,311	53,311	13,786	13,786
docs.main	+0.02% 🔺	+0.02% 🔺	599,123	599,226	191,150	191,180
packages/material-ui/build/umd/material-ui.production.min.js	+0.03% 🔺	+0.04% 🔺	300,169	300,272	86,407	86,439

Generated by 🚫 dangerJS against b2e25ff

[mbrookes]

Nice. It would be good to have a demo on the Divider page itself.

[oliviertassinari]

@mbrookes I agree, this would help. I have seen a high volume of traffic on https://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html (+++k views). Do you have an idea on the demo content?

[mbrookes]

Not specifically. I recall a dashboard layout that made good use of it, but I doubt I'll find it again. I'll keep an eye out for a good use-case example. I din't think we need to hold back this PR for it, as long as we remember to come back to it.

[oliviertassinari]

Alright, let's keep the "ready to ship" flag then. I will also keep this in the back of my head.

[nrkroeker]

@oliviertassinari If you're still looking for suggestions, here's a good example of vertical dividers in the wild 😄 my team's designers like to put vertical dividers in toolbars all throughout our product so I'm glad to now have the functionality in a preexisting MUI component.

[oliviertassinari]

@nrkroeker Thanks for sharing. The alternative solution would be to customize the toggle button group to reproduce the same UI.

[nrkroeker]

@oliviertassinari something like this?

https://codesandbox.io/s/material-demo-ylbzi?fontsize=14

[mbrookes]

@nrkroeker Sweeeet!

Would you like to submit a PR with that as a customization demo for the ToggleButton page?

[nrkroeker]

@mbrookes Of course! I didn't want to do so preemptively in case y'all had specific guidelines for styling/structure within demos, but I can get it into a PR probably later tonight.

[oliviertassinari]

@nrkroeker Looks great, with a few simplifications: https://codesandbox.io/s/material-demo-divider-76sg3.