S-button do not show icons when in page action slots

Polaris
1

For example, the page actions will not show any icons here:

export default function Demo() {
  return (
    <s-page heading="No icons?">
      <s-button href="" slot="primary-action" icon="plus">
        {"<--No icon"}
      </s-button>
      <s-button href="" slot="secondary-actions" icon="plus">
        {"<--No icon"}
      </s-button>
    </s-page>
  );
}

Not sure this is deliberate.

2

Only Button elements with a variant of primary are allowed in the primary-action slot.

3

@Mateus_Ferreira Ok, good to know. Without the variant prop the button in the primary-action slot is given the primary variant styling regardless.

Anyway, it doesn’t change the icon issue for me. Does it for you?

4

@_Ryan the icon is rendering properly for me. Do you mind replicating this in a codesandbox and sharing it? I’ll investigate it further. Thanks.

5

@Mateus_Ferreira it works fine in a code sandbox, but if you run it in an embedded app in the admin you will be able to replicate what I’m seeing. The code I shared you can paste into the react-router template “additional page” to try it. Or try it in any app.

It’s different because the rendering is fundamentally different in the two contexts. In code sandbox it renders using s- components. But in the admin it renders outside of the iFrame, presumably using app-bridge-js, and uses different components. So you have to replicate it in the appropriate context, not in the code sandbox.

7

Thanks, we’re digging into this and will let you know when we have updates.

8

@Anthony_Frehner and @Mateus_Ferreira It appears that with some updates to the web components, buttons with an icon set do not render at all in the page header (when viewed embedded in the admin). E.g. now this code does not show any buttons at all.

export default function Demo() {
  return (
    <s-page heading="No icons?">
      <s-button href="" slot="primary-action" variant="primary" icon="plus">
        {"<--No icon"}
      </s-button>
      <s-button href="" slot="secondary-actions" icon="plus">
        {"<--No icon"}
      </s-button>
    </s-page>
  );
}

Without the icon=plus bit, the buttons show fine.

9

Hey folks! We found the issue and have a fix but rolling out it is a bit slow. Can you exclude the icons for the next little bit as you build? We’ll post here once the fix is fully deployed.

10

Thanks @Fio, looking forward to the fix roll out.