Domain only flow: Make it more consistent

[zaguiini]

Supersedes #102021.

Proposed Changes

The benchmark for consistency here is /start/onboarding-pm as /setup/onboarding uses StepContainerV2, which has different definitions of page margins and headings. Eventually, all flows will be migrated to StepContainerV2, but while that doesn't happen, let's compare against other flows in /start.

This PR restores the "minor tweaks" from the original work, except the tooltip icon alignment considering the tooltip icon should be gone (W9xI27S6Swvw5Ku21EbZvn-fi-9588_14139).

You should also notice that the "Explainer image", which also doesn't exist in Figma, is now gone.

This PR fixes a bug where the premium domain badge was showing on the same line as the domain and price. And it also centers the price compared to the select button.

Before	After

Finally, I've also aligned the secondary content boundaries with the primary content as they were misaligned on intermediary screen sizes.

Before	After

Other screenshots (both flows should look identical)

Onboarding PM	Domain Only

Onboarding PM	Domain Only

Testing Instructions

The easiest way I could find to test this is to keep both /start/onboarding-pm/domains and /start/domain/domain-only flow tabs open and switch between them while changing the browser's window width, ensuring both look identical.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~872 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
async-step-unified-domains      +2421 B  (+0.1%)     +846 B  (+0.2%)
domains                          -772 B  (-0.0%)     -249 B  (-0.0%)
reader                           +350 B  (+0.0%)      +26 B  (+0.0%)
patterns                         +350 B  (+0.0%)      +26 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 (~910 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-signup-steps-domains                                                  +2622 B  (+0.2%)     +884 B  (+0.3%)
async-load-comment-block-editor                                                   +350 B  (+0.0%)      +26 B  (+0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations       +350 B  (+0.0%)      +26 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.

[ramynasr]

@zaguiini, thanks for looking into that.

The main issue was that domain name suggestions were being wrapped in the onboarding flow. With this PR, I see this is now broken in both the onboarding and the domain-only flows.

Before this PR

With this PR

[ramynasr]

Other differences that I noticed between both flows:

• The recommended and best-alternative suggestions show a blue Select button in onboarding but not in domain-only.
• When a domain is already in the cart, the Select button reads In Cart in the onboarded flow and Selected in the domain-only flow.

I'm not sure if the plan was to sync all UI elements or fix specific bugs. So, maybe those are not within the scope of this change.

[zaguiini]

Interesting @ramynasr. The PR that I've reverted does not fix that problem. I'm trying to fix it, but I'm not sure what should happen for really long domain names:

cc @nuriapenya

I'm not sure if the plan was to sync all UI elements or fix specific bugs. So, maybe those are not within the scope of this change.

The same goes for that. The original PR didn't change it, and both issues you reported are caused by the fact that onboarding-pm is a single-domain flow, while in domain-only you can select multiple domains. I'm not sure we should change that, especially in this PR.

[m1r0]

Overall, it looks great! It's a nice improvement. I have just a few minor nitpicks:

• The domain name looks off-center when there's no badge.

• The horizontal line that divides the items is inconsistently spaced. This issue seems to be present in the other view, so it may not be related to this PR.

[ramynasr]

Interesting @ramynasr. The PR that I've reverted does not fix that problem. I'm trying to fix it, but I'm not sure what should happen for really long domain names:

@zaguiini I'm assuming that's because you are testing the PR that was reverted, but not the follow-up PR ( #102308 ) that wasn't.

What I can see is that the main difference between the domain-only flow and the onboarding flow (before this PR) is the max-width, which makes it a bit harder for the domains to break as I am showing in the screenshots above.

Is there a specific reason to limit the max-width of the domain suggestions list if the screen/viewport width allows it?

The example you are showing in your screenshot is very unlikely. For example, a search string like mymemorablemoments is closer to a real-life one that should not break the UI. It currently breaks the onboarding flow, not the domain-only flow (in production).

Here is a suggestion:

• Shortening Free for the first year with annual paid plans to Free first year with annual plans.
• Moving Free first year with annual plans to the same line as the price, still aligned right, so it won't be under the domain name and distract the user.
• This would allow the domain name to use all the space available to the Select button, which should cover most cases.
• For the unfortunate case of a long string close to the maximum allowed (63 characters), we should truncate it with an ellipsis, displaying the beginning and end of the domain with an ellipsis in the middle (e.g., veryverlong...wdqndl.blog) and allow the whole string to be shown on hover (in a tooltip)

How does that sound?

[zaguiini]

Sure @ramynasr, this is how it looks right now:

"Long domain name" means 24 characters and above. Here's the logic.

And thanks, @m1r0. Great catch. Here's what they look like now:

[m1r0]

Looks great! Thanks for the updates, Luis. 🙌

I have no more feedback, but let's wait for the final approval from @ramynasr.

[ramynasr]

Thanks for making those changes! LGTM. Just left a suggestion about method naming.

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug domain-only-consistency-with-onboarding-pm on your sandbox.