JSX Removes Necessary Whitespace

[CITguy]

See HelixDesignSystem/helix-ui#283 for details.

Problem

There are several cases where white space is necessary to apply HelixUI styles to inline elements.
JSX removes inline whitespace if element nodes are defined on separate physical lines than non-element nodes within JSX source code.

TL;DR

This JSX template

return (
  <button className="hxBtn">
    Text Node
    <hx-icon type="filter"></hx-icon>
  </button>
)

renders to

<button class="hxBtn">Text Node<hx-icon type="filter"></hx-icon></button>

However, JSX stripped significant whitespace between the text node and the <hx-icon> that CSS expects to be present in order to distance the icon properly from the text.

Solution

When building React components, strategically add white-space-only text nodes into JSX templates using the { " " } syntax.

This JSX template

return (
  <button className="hxBtn">
    Text Node
    { " " }
    <hx-icon type="filter"></hx-icon>
  </button>
)

renders to

  <button class="hxBtn">Text Node <hx-icon type="filter"></hx-icon></button>

This time, JSX inserts the needed white space between the text node and <hx-icon> element.

[100stacks]

Issue dated. Considering updated solution.