Skip to content

Dashboard v2: Add PageHeader component #103159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 14, 2025
Merged

Dashboard v2: Add PageHeader component #103159

merged 14 commits into from
May 14, 2025

Conversation

ntsekouras
Copy link
Member

@ntsekouras ntsekouras commented May 6, 2025

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

Screenshot 2025-05-12 at 11 23 34 AM

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)?

@ntsekouras ntsekouras added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Components [Feature] Hosting Dashboard Enhancement labels May 6, 2025
@ntsekouras ntsekouras self-assigned this May 6, 2025
@ntsekouras ntsekouras requested review from youknowriad and a team as code owners May 6, 2025 11:02
Copy link

github-actions bot commented May 6, 2025

@simison simison mentioned this pull request May 6, 2025
8 tasks
@matticbot
Copy link
Contributor

matticbot commented May 6, 2025

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
Copy link
Contributor

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
Copy link
Member

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?

storybook

@jasmussen
Copy link
Member

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
Copy link
Member Author

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
Copy link
Contributor

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
Copy link
Contributor

ciampo commented May 6, 2025

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
Copy link
Member

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.

Copy link
Contributor

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
Copy link
Contributor

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 ntsekouras force-pushed the add/header-component branch from 7772769 to f9dc7df Compare May 7, 2025 13:04
@ntsekouras
Copy link
Member Author

@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
Copy link
Contributor

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

Screenshot 2025-05-14 at 09 44 07

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

Screenshot 2025-05-14 at 09 44 33

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
Copy link
Contributor

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

Host dash

Screenshot 2025-05-14 at 10 19 28

Component

Screenshot 2025-05-14 at 10 24 22 Screenshot 2025-05-14 at 10 24 54

@ntsekouras ntsekouras force-pushed the add/header-component branch 2 times, most recently from 49662c6 to 23c19d0 Compare May 14, 2025 11:53
@matticbot
Copy link
Contributor

matticbot commented May 14, 2025

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.

@ntsekouras ntsekouras force-pushed the add/header-component branch from 64c76c8 to 247e264 Compare May 14, 2025 14:08
@ntsekouras ntsekouras merged commit d2e3a54 into trunk May 14, 2025
14 checks passed
@ntsekouras ntsekouras deleted the add/header-component branch May 14, 2025 14:41
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.