AppBridge TitleBar web component does not align with Polaris Page component styles

[cyberwombat]

I'm quite confused - I am following tutorials on shopify.dev that for example use ui-title-bar for the title which effectively makes my app look out of place. If instead I use <Page title... it now looks the same. But if I use <Page... and its corresponding primaryActions and secondaryActions I once again have something out of place since the S admin doesn't use buttons like that but instead uses a regular <button element which renders this useless. So I have to use a bunch of css to fix the ui-title-bar. Why does Polaris not look like the admin when I thought that was the entire point.

[chloerice]

Hey @cyberwombat 👋🏽 Sorry the confusion! Polaris React is what the Shopify Admin is built with. Can you tell us more about what you mean by ui-title-bar? Can you share doc links and or screenshots of what's rendering for you using the non-Polaris React components? Are you using AppBridge React?

[cyberwombat]

Yes - here's a shot showing the use of ui-title-bar and a <button/> and below that the <Page title... primaryActions.. component. As you can see if I wanted to match the shopify admin - say the Product section I would need to use the <Page title but be able to use a custom <button/> as on top row

Code:

<Page
      fullWidth
      title="Page element title"
      primaryAction={{ content: 'Save', disabled: true }}
      secondaryActions={[
        {
          content: 'SecondaryAction',
          accessibilityLabel: 'Secondary action label',
          onAction: () => alert('Duplicate action')
        }
      ]}
      actionGroups={[
        {
          title: 'Promote',
          actions: [
            {
              content: 'Share on Facebook',
              accessibilityLabel: 'Individual action label',
              onAction: () => alert('Share on Facebook action')
            }
          ]
        }
      ]}
    >
      <ui-title-bar title="UI Title Bar">
        <button variant="primary" onClick={() => navigate('/app/sheets/new')}>
          Button Element
        </button>
      </ui-title-bar>

      <Layout>
        <Layout.Section>
          <Card>
            <Text as="h2" variant="bodyMd">
              Content inside a card
            </Text>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>

I am following this tutorial.

I would like it to look like this:

[chloerice]

Thank you, this helps a lot! It looks like you're using the new vanilla Web Component version of the AppBridge TitleBar. Have you already migrated to Polaris v12.0.0? I will flag this issue with the AppBridge team, I believe this will be fixed once they upgrade to v12.0.0 of Polaris.

[cyberwombat]

I just migrated everything - was on v11 and now on v12 but it looks exactly the same as before. You mention this is the vanilla Web Component... but the docs use them in a React context:

<Page>
      <ui-title-bar title="QR codes">
        <button variant="primary" onClick={() => navigate("/app/qrcodes/new")}>
          Create QR code
        </button>
      </ui-title-bar>

Why are the title attributes of the Page component not used here? I started from the shopify-app-template-remix and following tutorial but the template doesn't look like the admin even after the upgrade to v12. The title is the most obvious one - its barely styled in the ui-title-bar. I'm ok if the migration is still in beta etc but its unclear what the correct method is to style the page elements since I can't tell by looking at them. Sounds like ui-title-bar is the way to go and hope it will match someday?