SX Design: should invalid Text nesting throw invariant error?

[mrtnzlml]

Hi! 👋 This is a design decision question. I am looking for what's better from the developer's point of view.

So basically, nesting of some HTML elements is not allowed. For example:

<p>
  <p>invalid nesting</p>
</p>

With SX Design you can write something like this (equivalent of the HTML code above):

<Text as="p">
  <Text as="p">invalid nesting</Text>
</Text>

// Or simply like this (it's the same):
<Text>
  <Text>invalid nesting</Text>
</Text>

In this situation React itself prints the following warning (related React tests):

Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

However, it's not a hard error - it's just a console warning. In other words, SX Design allows the creation of invalid HTML. Does it make sense to prevent this behavior and throw an invariant error instead? The implementation is not complicated, I basically have it done - just not sure if it's the right thing to do (or we should just keep the React warning and move on).

Why do I even bother with this question?

I encountered this situation in my application when I was sending <Text/> component from my application to SX Design and I created these nested paragraphs completely by mistake (I didn't know the underlying component uses <Text/> as well). And, of course, I managed to integrate this code without noticing the warning. 🙈

[mrtnzlml]

I decided to rely only on the React warning, see:

• SX Design: render individual Tabs as span #3072
• SX Design: throw on invalid Text nesting #3073 (possible alternative implementation - rejected draft)

We can change this decision in the future if this turns out to be a recurring problem.

[tbergquist-godaddy]

I wouldn't throw an error on this, I think a warning is appropriate.

Even though it is invalid html, browsers will render it. Throwing an error might crash an application unnecessarily, especially if there is some conditional rendering going on.

[mrtnzlml]

Makes sense. I left the warning only. :)