Remove elementClasses warning from Fragment

[bryceosterhaus]

I think this needs to be removed because it's not always consistent and really annoying when you intentionally want to have elementClasses added to the first child element. If anything, this should be added to documentation instead.

[jbalsas]

Hey @bryceosterhaus, I'm fine with this, just a bit confused about the statement

when you intentionally want to have elementClasses added to the first child element

How does that look like? As far as I understood Fragment was inert and rendered only its children... how does that look like in code and what's the expected (or current) output?

[bryceosterhaus]

An example of intentionally wanting to add elementClasses to the first child would be. Fragment does only render its children, however, elementClasses will still get passed to the element attached to that component(compoenent.element). In the case below, <button> is the element attached to the component.

class Dropdown extends Component {
	render() {
		return (
			<Fragment>
				<button>Show Menu</button>

				{this.props.active && (
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				)}
			</Fragment>
		);
	}
}


<Dropdown elementClasses="blue-button" />

// renders
// <button class="blue-button">Show Menu</button>

[jbalsas]

I see, @bryceosterhaus!

So, for

<Dropdown elementClasses="blue-button" active={true} />

// We expect
// <button class="blue-button">Show Menu</button>
// <ul>
//    <li>one</li>
//    <li>two</li>
//    <li>three</li>
// </ul>

But if Dropdown implementation were to be reversed:

class Dropdown extends Component {
	render() {
		return (
			<Fragment>
				{this.props.active && (
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				)}

				<button>Show Menu</button>
			</Fragment>
		);
	}
}

You'd then expect

<Dropdown elementClasses="blue-button" active={true} />

// We expect
// <ul class="blue-button">
//    <li>one</li>
//    <li>two</li>
//    <li>three</li>
// </ul>
// <button>Show Menu</button>

<Dropdown elementClasses="blue-button" />

// We expect
// <button class="blue-button">Show Menu</button>

Does that match your expectations?

[bryceosterhaus]

Yeah, that's what I would expect. I think we should note this in the Fragment docs.

[jbalsas]

I find this behaviour a bit confusing... 🤔

Maybe inside Fragment we could somehow expose it as props.elementClasses so the developer would actually clearly opt-in on how and where to use it?

@brunobasto, would this have any effect on you?

[brunobasto]

No, I think it should be fine for me.

[jbalsas]

@bryceosterhaus, @mthadley, as you guys are the main users of it, and @brunobasto has no objections at this point...

If you think it's fine as it is, could you please add a note of this behaviour in https://github.com/metal/metal.js/blob/master/packages/metaljs.com/src/pages/docs/guides/jsx-components.md#fragment- so we can have it documented at the time of merging?

Thanks!