Align ui-title-bar with design

Polaris
1

Hello,

Right now, the component is interesting, but it unfortunately lacks some important elements to make it fully usable:

  • It would be useful if it could support a badge (like the product page does in the admin). It is needed for all objects that have an active/draft status.
  • Not all pages are meant to be full-width. For instance, in Shopify admin the product edit page (in overall, most edit page) are easier to use when they are not full width. In the Shopify admin, the title bar automatically adjusts. Maybe the width could adapt automatically when inserted into a component that is not fullWidth.
2

I totally agree with @bakura10 and wanna add:

  • No built-in pagination actions

Pagination in PDP
Pagination in PDP898×474 8.61 KB

Questions

  1. Is this component system replacing the current Page component?
  2. Will there be feature parity with the current Page component?

Narrow width
Narrow width1702×1018 43 KB

3

A few extra inconsistency I’ve spotted:

  • Shopify admin uses tertiary button, but the ui-title-bar does not support them, hence causing inconsistent design.
  • Shopify seems to use an icon for breadcrumb, but this is not supported by the component. The problem is that the does not apparently supports the new components, which leads a strange experience (I would have expected ui-title-bar to accept s-button, s-icon,… but it does not).
4

There is also the Inventory part of admin, which has a button with a popover to change the location. Couldn’t find any support for this either.