The current set of Admin UI components is used around Gutenberg, for example, on the new Fonts and AI Connectors pages:
| Fonts |
Connectors |
 |
 |
We've just adopted the components also in the Jetpack plugin, where it helps a lot to bring consistency between core and our plugin!
However, we also noticed that there could be some small adjustments to improve the component's visual appearance for consumers:
- Breadcrumbs and Titles should follow the same size
- Header should support adding a logo or symbol
- Page background
#fcfcfc instead of #ffffff
- No double border when tabs are used
Breadcrumbs and Titles should follow the same size
While both work fine independently, there's an issue when one browses between multiple pages, where some use breadcrumbs, and some use titles. There's a "jump" in text size between the two currently:
Suggest using the same 20/15 from the design system for both. This makes the title slightly smaller than it is today, and breadcrumbs slightly bigger:
Header should support adding a logo or symbol
It's currently possible to pass title prop a logo, which kinda works, but can be fragile in future when header has changes, particularly on mobile. Ad-hoc logo addition, of course, doesn't guarantee consistency between different consumers using the component either like officially supported would.
We propose officially supporting a logo or symbol in the header:
Official support would also ensure better semantic support since the logo could go outside the h2 tag:
It would also avoid needing to pass a separate ariaLabel to maintain good accessibility. Title+logo obviously doesn't work for aria label, since it's not purely just a string, so currently when using logos you have to pass both title and ariaLabel.
Page background #fcfcfc instead of #ffffff
Currently white background lacks dimension between different surfaces, such as when adding cards to the page:
| #ffffff |
#fcfcfc |
 |
 |
Full-page containers, such as pages using DataViews tables, would still be fully #ffffff.
No double border when tabs are used
Described in more detail:
By avoiding additional border above tabs, the header layout looks less busy and less boxy:
To separate from content particularly when backgrounds are white (like in full-page DataViews) and since the header is sticky, we'd still keep the bottom-border for headers visible at all times.
The current set of Admin UI components is used around Gutenberg, for example, on the new Fonts and AI Connectors pages:
We've just adopted the components also in the Jetpack plugin, where it helps a lot to bring consistency between core and our plugin!
However, we also noticed that there could be some small adjustments to improve the component's visual appearance for consumers:
#fcfcfcinstead of#ffffffBreadcrumbs and Titles should follow the same size
While both work fine independently, there's an issue when one browses between multiple pages, where some use breadcrumbs, and some use titles. There's a "jump" in text size between the two currently:
Suggest using the same 20/15 from the design system for both. This makes the title slightly smaller than it is today, and breadcrumbs slightly bigger:
Header should support adding a logo or symbol
It's currently possible to pass
titleprop a logo, which kinda works, but can be fragile in future when header has changes, particularly on mobile. Ad-hoc logo addition, of course, doesn't guarantee consistency between different consumers using the component either like officially supported would.We propose officially supporting a logo or symbol in the header:
Official support would also ensure better semantic support since the logo could go outside the
h2tag:It would also avoid needing to pass a separate
ariaLabelto maintain good accessibility. Title+logo obviously doesn't work for aria label, since it's not purely just a string, so currently when using logos you have to pass bothtitleandariaLabel.Page background
#fcfcfcinstead of#ffffffCurrently white background lacks dimension between different surfaces, such as when adding cards to the page:
Full-page containers, such as pages using DataViews tables, would still be fully
#ffffff.No double border when tabs are used
Described in more detail:
By avoiding additional border above tabs, the header layout looks less busy and less boxy:
To separate from content particularly when backgrounds are white (like in full-page DataViews) and since the header is sticky, we'd still keep the bottom-border for headers visible at all times.