Limit Global Styles: Add notice to newsletter onboarding

[mmtr]

Fixes https://github.com/Automattic/dotcom-forge/issues/894

Proposed Changes

• Add a notice to the newsletter onboarding to highlight that a color change during onboarding is a paid feature and requires upgrading for those changes to be made public.
• Also add the limit-global-styles feature flag to the wpcalyps.json config file so it's easier to test in that environment.

Further reading: paYJgx-2p8-p2

Testing Instructions

• Use the Calypso live link below
• Go to /setup/newsletterSetup?flow=newsletter
• Make sure the favorite color input displays a premium badge
• Hover the badge
• Make sure a notice shows up
• Add a ?flags=-limit-global-styles param to the URL to disable the feature flag
• Make sure the premium badge doesn't show up

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper      +1525 B  (+0.0%)     +445 B  (+0.0%)

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

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.

[mmtr]

We might want to replace "premium design tools" here with whatever feature name we finally give to Global Styles. See pdgrnI-1Ix-p2

[BogdanUngureanu]

hey @mmtr, looks nice, great work! I've noticed some small issues while on mobile:

• I've tested this on my phone and I've noticed that the pop-up is not displayed because the colorpicker takes control when I tap the label. On desktop, when I click on the label, the colorpicker takes control as well.
• On desktop, on small resolutions, the pop-up div is not responsive and adds a vertical scroll when you hover it.

[mmtr]

I've tested this on my phone and I've noticed that the pop-up is not displayed because the colorpicker takes control when I tap the label. On desktop, when I click on the label, the colorpicker takes control as well.

Good catch, @BogdanUngureanu.

@SaxonF do you have any ideas on how to prevent this? One thing that could avoid the issue is to display the tooltip on click, but I don't think it's immediately obvious that the badge is clickable.

[mmtr]

do you have any ideas on how to prevent this?

Finally found out a way in 75d5e21 so the tooltip shows up when hovering on desktop, and when clicking/tapping on mobile.

[BogdanUngureanu]

Looks and the interactions are way better now, thanks for implementing the suggestions.

There's one small thing that maybe we should also implement: On mobile, when the popover is opened, it's not automatically closed when the user taps on other elements than the "Premium" badge.

[dsas]

it's not automatically closed when the user taps on other elements than the "Premium" badge.

It'd be great if tapping on the tooltip dismissed it rather than launching the colour picker.

[dsas]

Actually it looks like onClickOut

wp-calypso/packages/components/src/popover/index.jsx

Line 158 in 8ad918c

onClickout = ( event ) => {

should do dismiss when clicking outside but isn't working?

[mmtr]

@dsas that's the Calypso component, not the Gutenberg one which is the one I decided to use. But I'll probably switch to the Calypso component if it works better.

[mmtr]

The Popover component from Calypso works great! The tooltip is automatically closed now when clicking/tapping outside.

[BogdanUngureanu]

Works great on both mobile and desktop! 🎉

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7578092

Thank you @mmtr for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.