[Divider] Add support for middle divider

[joshwooding]

• I have followed (at least) the PR section of the contributing guide.

• [Divider] Added other dividers from spec

• [Divider] Added more tests

• [docs] Updated Divider documentation

Thought adding these would be a quick win :) Sadly changing to variant makes this a breaking change. The old props can be added in an a warning shown to change this.

Upgrade path

We are introducing a new variant to the divider component: middle. Following our API guideline, we can no longer use a boolean property, it needs to be an enum, hence the introduction of the variant property.

import Divider from '@material-ui/core/Divider';

-<Divider inset />
+<Divider variant="inset" />

[oliviertassinari]

@joshwooding I believe it's a breaking change. We will have to way ~3 months before being able to merge. Maybe you can make it a non breaking change (backward compatible) with a warning?

[joshwooding]

@oliviertassinari That should do it :)

[mbrookes]

Could we get a demo that's closer to the recommended use of middle dividers?

It doesn't have to be that detailed, just following the correct use case.

[oliviertassinari]

Yes, I agree

updated

[oliviertassinari]

I have made some changes. I have removed the subheader property. It's important to have a simple Divider component that people can override.

[joshwooding]

So, I've been working on the demos and I've noticed some pain points:

• Subheaders should align with the list padding and currently they are set to a hard coded value whilst the lists are dynamic making subheaders look weird on big screens compared to small screens.

Big Screen

Small Screen

Styling Subheader Dividers are a bit fiddly at the moment, due to a them being composed of two different components, maybe a composition pattern would work better:

<Divider> <Typography>Subheader</Typography> </Divider>

this would allow for more customisability and easier styling, but would differ from the patterns we already have. As an example of less than ideal styling currently to add a border at the bottom of a Subheader Divider you need to add the margin to the text. We also always keep the current pattern and change the underlying components

[joshwooding]

If you want them these are the current demos I've written excluding the subheader ones:

[oliviertassinari]

Subheaders should align with the list padding and currently they are set to a hard coded value whilst the lists are dynamic making subheaders look weird on big screens compared to small screens.

You are right, but it's not directly related. We are already impacted by the problem, there is a listitem issue open to solve it. The solution is 👌, it's described in the related issue: #10044. As far as I remember, we can make the spacing screen size invariant.

[oliviertassinari]

A new demo

[oliviertassinari]

@joshwooding Thank you