Dashboard v2: Add PageHeader component

[ntsekouras]

Resolves: DS-166

This PR implements the PageHeader component under client/dashboard folder.
I've also updated the hosting dashboard v2 to use this component.

Notes

1. The backButton has no designs in the spec/figma, and it will not be a part of the first iteration.
2. Most of the changed files are from dashboard v2 where I updated the PageLayout component. The actual components files are under page-header folder.

Testing Instructions

• in storybook yarn storybook:start
• in dashboard v2 all the headers should be fine (in terms of functionality and design wise)

Screenshot

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-144256

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-144256&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-144256&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~47 bytes removed 📉 [gzipped])

name                    parsed_size           gzip_size
entry-dashboard-dotcom       -543 B  (-0.0%)     -135 B  (-0.0%)
entry-dashboard-a4a          -543 B  (-0.0%)     -137 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~20 bytes added 📈 [gzipped])

name                parsed_size           gzip_size
import                   +103 B  (+0.0%)      +12 B  (+0.0%)
github-deployments        -13 B  (-0.0%)       +8 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~34 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-automattic-global-styles-src-components-global-styles-variations        -13 B  (-0.0%)      +34 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[youknowriad]

This is one of these components that I'm not sure should be implemented yet as a reusable component in @automattic/components it feels very much related to the layout around it, needs awareness about heading levels.

Would it make sense to hold of making this a reusable component until there's actually a need for it outside the dashboard?

[jasmussen]

I'll defer to Riad on the need for this, can always build it when the need becomes pressing. But I had a question re: the back button, what is the purpose of it as far as specs?

[jasmussen]

Also a curiosity that Storybook uses a serif font. Should we apply a font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif stack somewhere there?

[ntsekouras]

But I had a question re: the back button, what is the purpose of it as far as specs?

@jasmussen the spec mentions: A navigational element used to return to the previous view or move up one level in the navigational hierarchy.

I asked Jay today though about whether we would allow both a backButton and breadcrumbs and he said that we'll probably skip the backButton for v1 (I mention that in the description too).

This is one of these components that I'm not sure should be implemented yet as a reusable component in @automattic/components it feels very much related to the layout around it, needs awareness about heading levels.

That's a tough problem indeed, but do you think that the level detection should be internal of Header component?
Also, your objection is just about being part of @automattic/components vs inside dashboard folder?

[youknowriad]

My hesitation here is that I'm not entirely sure what the reusable bits should be, there's too much unknowns. It feels too premature to extract this component. For things like Breadcrumbs or SummaryButton, it's clearer but here I'm not entirely sure how this component translates to other dashboards / plugins ... whether it's tied to navigation or not, whether it's tied to PageLayout...

Now, breaking changes are allowed in a8c/components so it's not a strong blocker either.

[ciampo]

I was going to mention the same thing as Riad — I don't think that this component should be in the shared components package for now — its usage feels quite specific to the hosting dashboard, and I think that we should validate more usecases before we can generalize it and eventually extract it to the shared components package.

Also a curiosity that Storybook uses a serif font. Should we apply a font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif stack somewhere there?

@jasmussen This is something that I also recently brought up to @mirka . Is the above font-family stack part of the design specs? Is it just for components in @automattic/components or also for Calypso in general?

Based on the answer, we may want to add it just to Storybook, or to some other, more general places in the codebase.

Also, when Theme work will support typography, I assume that font-family will be provided by Theme directly.

[jasmussen]

Is the above font-family stack part of the design specs? Is it just for components in @automattic/components or also for Calypso in general?

That's the de-facto standard, yes, and is the "system fonts" stack we've been using in core as well. However there has been some discussions on whether to use Inter for the A8c side of things. That doesn't mean we can't start with that stack, if you need to, that's certainly what I'd recommend as a starting point.

[jameskoster]

I don't know how much it affects the export timeline, but I wanted to point out that this design has been used extensively across divisions in the Forms & Settings atelier, so it will need to be consistently reusable in some way, at some point.

It seems beneficial for everyone who needs this component to have access to it asap. So if we don't export now, what questions do we think need answering before we can commit to that?

[youknowriad]

Don't consider my comment as a blocker. Especially if there are already usage of this component (and not just hypothetical) outside the hosting dashboard.

[ntsekouras]

@jameskoster with the current code the heading is not well aligned with the actions in dashboard v2, where we use this. Should this alignment be center?

[jameskoster]

@ntsekouras it shouldn't be center because that creates misalignment when the title wraps:

We want the decoration / actions to be aligned with the first line of the title like so:

The alignment issue on the host dashboard seems to be caused by two things:

1. The h1 is inheriting some margin-block-start and margin-block-end styles. Should we reset those in PageHeader?
2. The action buttons are using the large size rather than compact.

For the second point, I think it would be fine to adjust the metrics in the component to match the host dashboard. I'll work on that now.

[jameskoster]

Pushed some small changes, we should now have good alignment across :)

Host dash

Component

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/header-component on your sandbox.