Use node in prop validation for Header's title prop about react-mdl HOT 7 CLOSED

Not sure to understand.
In the title of the header, you're not using a text string, but a dom node? Is that the issue?

from react-mdl.

Exactly 👍

from react-mdl.

I think only strings are allowing based on the MDL spec, but we could probably allow node/component as well and assign the mdl-layout-title class on it.

from react-mdl.

I'm not sure if it matters.
Users can just put some span or strong tag there or some complicated custom markup and I wouldn't restrict them.
I'm also not sure if mdl-layout-title is necessary or not.

from react-mdl.

I have the same need where I just need to pass some markup instead of a string to the title prop as I need to display two pieces of information, like: "Area / The Title", where I pass <span><span style={{ color: '#ddd' }}>Area / </span><strong>The Title</strong></span> as the title. See a real example in the screenshot below.

The title props in the Header and HeaderRow components just needs their propTypes changed to any or specific types (string, number, element, node). That takes care of everything. We then could even pass it something like <span><Icon name="..." /> The Area Title</span>.

This would be very useful and it would not impact anything else. The MDL specs never took the React way of coding into consideration and the need to pass components around that displays formatted text. I hope you will consider this.

Update: I would love to see the same done to CardTitle which will make it so much more useful.

from react-mdl.

CardTitle already accepts anything as a child, but in that case it won't use the default h2.mdl-card__title-text.

The reason for that is because of the Event card in the demos: https://github.com/tleunen/react-mdl/blob/master/demo/card/card.js#L51-L57

from react-mdl.

That is fantastic Tommy. Thank you.

from react-mdl.