S-button-group renders an empty shadow root - slotted secondary-actions buttons never project

[Luke]

Trying to build a segmented split button (primary action + chevron menu), like the one on the native inventory transfer shipment card (“Receive items”).

Minimal repro, just the polaris.js script and no framework: https://codepen.io/editor/Luke-Spoor/pen/019f9eb0-c88b-7aaf-b912-382e02a12730

<s-button-group gap="none">
  <s-button slot="secondary-actions" variant="primary">Receive items</s-button>
  <s-button slot="secondary-actions" variant="primary" icon="chevron-down"
    accessibilitylabel="More actions"></s-button>
</s-button-group>

renders nothing. The shadow root contains only an empty - no slot elements, so the buttons never project.

This is the exact markup topic 22806 was resolved with, and slot=“primary-action” isn’t an alternative because it’s unsupported with gap=“none” (topic 27963, console warning confirms).

The pen also shows:

• the same markup without gap=“none” renders, but as separate rounded buttons, not a segmented group
• primary-action + secondary-actions without gap renders, but also not segmented - and the secondary button lands to the LEFT of the primary

So right now there appears to be no working markup that produces a segmented button group. Is gap=“none” + secondary-actions broken, or is there a supported combination we’re missing?

[SamR-Shopify]

Hi Luke! The s-button-group only support gap="none" with secondary buttons (not primary). This is an intentional design decision to prevent pairing a secondary and primary button together without a gap.

However, multiple secondary actions can be grouped together without a gap, so long as the variant is either not defined (auto) or is secondary.

<s-button-group gap="none">
  <s-button slot="secondary-actions">Receive items</s-button>
  <s-button slot="secondary-actions" icon="chevron-down"
    accessibilitylabel="More actions"></s-button>
</s-button-group>

More details on this design constraint here on shopify.dev

[Luke]

Hi @SamR-Shopify any plans to support primary? So we can match how Shopify use it in their admin UI? For example on ‘Receive items’ in inventory transfers.