Stacks with empty elements

Polaris
1

Hey team,

It would be great if the spacing of a s-stack element would only be applied on non-empty elements. Currently, when an element doesn’t contain any details, it will still have the spacing applied.

For example consider this HTML:

<s-stack gap="base">
  <s-paragraph>This is some text</s-paragraph>
  <s-box id="anchor"></s-box>
</s-stack>

The s-box would function as an anchor. To add something afterwards using JavaScript. However, currently, we’re seeing excessive spacing because the s-stack element will add a gap to each element.

For s-stack elements, a better approach would be to use Andy Bell’s “stack” pattern: The Stack: Every Layout . It would even allow the use of the :empty selector which allows the margin to only apply when the child elements are not empty (see here: :empty CSS pseudo-class - CSS | MDN).