S-stack with direction="inline" does not align children as expected

Polaris
1

When using the <s-stack direction="inline"> component to align two <s-select> elements horizontally (as described in the documentation), the elements do not align inline as expected. The layout only works as intended if each <s-select> is wrapped in an <s-box> component.

Environment

  • Extension Type: Admin Extension
  • Framework: Preact ^10.10.x
  • TypeScript: ^5.8.3
  • Shopify CLI: ^3.80.7
  • @shopify/ui-extensions: ~2025.10.0-rc
  • Node.js: 22.x
  • pnpm: 8.15.4

Steps to Reproduce

  1. Use the following JSX in an admin extension:

    <s-stack direction="inline" gap="base">
  <s-select label="A" />
  <s-select label="B" />
</s-stack>

  2. Observe that the two selects are not aligned inline as expected.

  3. If you wrap each <s-select> in an <s-box>, the alignment works:

    <s-stack direction="inline" gap="base">
  <s-box><s-select label="A" /></s-box>
  <s-box><s-select label="B" /></s-box>
</s-stack>

Expected Behavior

  • Children of <s-stack direction="inline"> should be aligned horizontally, as shown in the documentation and as is standard for stack/row components.

Actual Behavior

  • Children are not aligned inline unless each is wrapped in an <s-box>.
  • This is not documented and is counterintuitive for developers.

Documentation Reference

Additional Notes

  • Switching to <s-grid> and <s-grid-item> works as expected, but this is not always desirable for simple inline layouts.
2

Thank you for reporting this!

We’ll look into this, as ultimately it affects how s-select (and other Form-related components) behave when both inside and outside of s-stack.

In the meantime, as noted, you can use s-grid to work around this for now.

<s-grid gridtemplatecolumns="1fr 1fr">...</s-grid>

I’ll post an update when one is available.

5

@Anthony_Frehner there’s a typo on the documentation here: Using Polaris web components

Where it says display="inline" should say direction="inline". This got me for a bit.