Material-ui: [Divider] Support displaying text inside

[liesislukas]

How about having text inside the divider? <Divider>Text</Divider>

Result would be like this:

sample code:

<>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider>Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider orientation="left">Left Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider orientation="right">Right Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>

just like ant design has: https://ant.design/components/divider/#header

[oliviertassinari]

@liesislukas I was tracking this feature in https://trello.com/c/7RLugLrH/1963-divider-add-children-support. Benchmark:

• https://semantic-ui.com/elements/divider.html
• https://ant.design/components/divider/#header
• https://arc.dev/signup?service=codementor&to=https%3A%2F%2Fwww.codementor.io%2Fuser-onboarding

What about we bring it as a new component, like DividerTypography?

[adamsr123]

The intuition for me says it should not be a separate component and just get it as children

[liesislukas]

I think that this should be an attribute for current <Divider/>

<Divider title={'some text'} />

and

<Divider title={'some text'} titlePosition={'right'} />

or it could be just a child but position would still be the attribute

<Divider titlePosition={'left|right|center|inherit'}>text</Divider>

but i think i would go with attributes for title and position. To stay consistent and not introduce extra requirement of child. Not sure if some other component that use divider would expect divider to have a child.

p.s. trello link needs login

p.s.s the name of attribute title, label or else should match whatever is for similar thing on other material-ui components

[oliviertassinari]

@liesislukas Well, if the overhead for implementing the title prop is small. Why not. My guess would be that if people are using Divider over a border CSS property, they aren't that sensitive in the first place about the fear of bloat.

[liesislukas]

I find Divider more explicit, that's why i personally tend to use it. And was using ant design for some projects and i liked the way to segment sections with that extra text inside divider. So that's the story why i creates this issue :)

I think for someone who is used to the codebase of material-ui it should not be a big task to implement something like this 🤗

[ShehryarShoukat96]

@oliviertassinari @liesislukas is this ticket up for grab? I have implemented this in a storybook using Divider children.

[oliviertassinari]

Yes, exploration on the problem is welcome.

[ShehryarShoukat96]

@oliviertassinari can you take a look at this code? It is in rough form and many things are still missing, but is this good approach?
I think passing text as a prop (text) will be better than passing it as children.

[oliviertassinari]

@ShehryarShoukat96 It looks like a great start. I think that we could:

• add more spacing around the text
• support vertical mode

Feel free to open a pull request :)

[lsqproduction]

is this ready to be used? I can't find the documentation for it.

[oliviertassinari]

@lsqproduction You can find the documentation in https://next.material-ui.com/components/dividers/#dividers-with-text.