<ui-title-bar> no longer show buttons

Polaris
1

Hi,

A regression has been introduced to the component, which no longer shows any button, making navigation impossible.

Code to reproduce:

<ui-title-bar title="Custom fields">
  <button>Test</button>
</ui-title-bar>

End result:

image
image2946Ă—154 6.83 KB

Thanks!

2

EDIT: I found that this happens because now seems to support “primary-action” and “secondary-actions”.

It is a bit strange though. In Shopify admin, the s-page actions are at the bottom (typically at the end of the form), while now they appear in the title-bar. This makes it a bit inconsistent as the now seems to do nothing.

3

I believe they do appear at the bottom of the screen on mobile, and at the top on desktop. It also works in a similar way on the mobile app. I do agree that it feels a bit odd.

4

Yeah I’m already getting support emails about this, can you guys please fix this asap?

@Liam-Shopify

5

No buttons anywhere on desktop:

image
image1693Ă—693 77.7 KB

6

@perice @bakura10 Fix coming in shortly.

7

Thanks, can confirm it’s fixed now!

image
image1651Ă—673 74.1 KB

8

:tada: Great! Sorry for the inconvenience and thanks for flagging it :slightly_smiling_face:

9

All back to normal :slight_smile:

1 Like
10

Thanks @Fio . This however caused a regression where the primary-action and secondary-actions no longer work for the component.

11

Hey @bakura10 I’ll take this back to the team but this is actually expected. Our guidance is to not have 2 sets of actions at the top of the page. If you find you have a lot of actions to surface there you can group your actions in the ui-title-bar with:

<ui-title-bar>
  {...}
  <section label="Grouped Actions">
    <button>Additional Action 1</button>
    <button>Additional Action 2</button>
    <button>Additional Action 3</button>
  </section>
</ui-title-bar>

Hope that helps :slightly_smiling_face:

12

@Fio I am referring to the slot of the component:

<s-page>
  <s-button slot="primary-action">Foo</s-button>
</s-page>

This no longer works since yesterday’s change.