Dashboard v2: Add SummaryButtonList and SectionHeader components

[ntsekouras]

Resolves: DS-207
Resolves: DS-199

This PR adds a SummaryButtonList first in the dashboard and not directly in '@automattic/components'. It also updates the site settings page of the dashboard v2 to use these.

After some feedback in this PR, I'm also adding SectionHeader component and I'm keeping PageHeader component as a thin wrapper for now, mostly for semantic clarity and make consumption a bit easier by not passing level etc..

This PR needs design input and polishing. At least:

1. Heading styles for low and medium densities
2. padding/alignments for medium density between header and the children.
3. Update some styles in SectionHeader based on the level, such as decoration styles, etc..

Testing Instructions

• in storybook yarn storybook:start
• in dashboard v2 go to a site's settings page

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

[matticbot]

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

App Entrypoints (~182 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
entry-dashboard-dotcom       +866 B  (+0.1%)     +182 B  (+0.1%)
entry-dashboard-a4a          +866 B  (+0.1%)     +182 B  (+0.1%)
entry-subscriptions          +412 B  (+0.0%)      +91 B  (+0.0%)
entry-stepper                +412 B  (+0.0%)      +91 B  (+0.0%)
entry-reauth-required        +412 B  (+0.0%)      +91 B  (+0.0%)
entry-main                   +412 B  (+0.0%)      +91 B  (+0.0%)
entry-login                  +412 B  (+0.0%)      +91 B  (+0.0%)
entry-domains-landing        +412 B  (+0.1%)      +91 B  (+0.0%)
entry-browsehappy            +412 B  (+0.2%)      +91 B  (+0.2%)

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

Sections (~32 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
site-settings       +101 B  (+0.0%)      +17 B  (+0.0%)
hosting             +101 B  (+0.0%)      +15 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.

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.

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

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

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

[jasmussen]

A quick test shows me this, is that the component in question?

Very nice animation, by the way. Speaking of breadcrumbs, I do wonder if for the hosting dashboard we should adopt the simpler "Back" button rather than breadcrumbs here. It seems like a simpler in/out flow, and would likely address the main feedback. We'd still want to explore the breadcrumb in context of more complex settings, but curious what you think, @matt-west @jameskoster.

As for the implementation, it looks close:

Storybook shows me this:

That also looks fairly solid. Just to be sure, this is a separate thing, a Subheading, yes?

[ntsekouras]

A quick test shows me this, is that the component in question?

Yes. You can test it better in storybook.

Just to be sure, this is a separate thing, a Subheading, yes?

@jasmussen I'm not sure what you mean by Subheading but your last screenshot is the ActionsList component.

[jasmussen]

I'm not sure what you mean by Subheading but your last screenshot is the ActionsList component.

In this example, I mean "Actions" and "Danger zone":

Note that there's a recent change to the main heading design of the summarylist, that we're discussing. Previously the heading wasn't part of the button list, but sat above it, just like the above example. I don't have a strong opinion, just want to make sure it was intentional, CC: @matt-west @jameskoster

[jameskoster]

As mentioned in Figma I think we need to support both headers inside and outside to provide flexibility in terms of page structure. Example:

Should both internal and external headers be a feature of this component?

[matt-west]

Should both internal and external headers be a feature of this component?

I’d consider that a nice-to-have. The workaround is pretty easy if we don’t want to complicate the main component with that logic.

[matt-west]

Thanks @ntsekouras! I noticed a couple things testing this in Storybook.

There’s a double border at the bottom of the empty state example.

The dividers between SummaryButtons appear to be a box-shadow that a regular border. Is that intentional?

This combined with the border-radius that’s still applied to SummaryButtons within the list make it look like there’s a gap between the dividers and the left/right borders of the container.

[ntsekouras]

As mentioned in Figma I think we need to support both headers inside and outside to provide flexibility in terms of page structure. Example:

@jameskoster is this component supposed to support any component or it should internally have SummaryButton components? I'm confused with the screenshots you shared.

The dividers between SummaryButtons appear to be a box-shadow that a regular border. Is that intentional?

That is part SummaryButton and was polishing made by Jay. We should polish some styles to both SummaryButton and SummaryButtonList like this one.

As I mention in the description we should definitely look at these too:

This PR needs design input and polishing. At least:

• Heading styles for low and medium densities
• padding/alignments for medium density between header and the children.

[jameskoster]

@ntsekouras we have a few components that share the same format; a Header and some content inside a Card. The example screenshot demonstrates the DataFormFields component, but SummaryButtonList follows the convention:

SummaryButtonList should only have internal SummaryButtons. Apologies for the confusion.

[jameskoster]

SummaryButton content is not aligned with the header:

This seems to be an oversight in the medium density SummaryButton. The padding should be $grid-unit-20 and $grid-unit-30.

[jameskoster]

For the header, ideally I think we'd create and use an instance of DS-199 for consistency. DataFormFields and ActionList will both need this same component so there's some value in making it reusable.

If that's out of scope for the PR then I'd suggest we use consistent heading sizes in both the medium and low density variants. That's heading-large (from core tokens) in both cases. They were different in Figma, but I've fixed that. apologies!

Otherwise can we update the spacing to match the SectionHeader spec? They seem pretty close already, the gap between title and description just needs reducing to $grid-unit-10.

[jameskoster]

In the low density variant the gap between the header section and the list of SummaryButtons should be $grid-unit-30. The gap between the SummaryButtons should also be $grid-unit-30.

[jameskoster]

Low prio: In Storybook the density toggle looks like plain text. It works, but should this be a toggle or something? 🤔

[jameskoster]

Another small oversight in the medium density SummaryButton; the bottom border has a subtle blur, it should be solid. box-shadow: inset 0 -1px 0 $gray-100 seems to fix.

Making the shadow inset also means we can remove the 1px gap between the buttons in SummaryButtonList. We'll just need to add a rule to remove the border on the last button in the list—maybe this could be added to SummaryButton using :last-of-type?

Related to this, the medium density SummaryButton shouldn't have a border radius.

[tyxla]

Those long classnames are giving me headaches 😅 Is this some remnant of abiding wpcalypso/jsx-classname-namespace? Should we keep them shorter?