Add info popover for tier dropdown #90600

CodeyGuyDylan · 2024-05-10T19:21:49Z

Proposed Changes

Add info popover for tier dropdown in lightbox

Testing Instructions

Using the Claypso Green go to the /pricing page
Open up the AI lightbox (this will work with stats too once this PR is merged and this is rebased)
Make sure the info popover is there and that it opens and the content makes sense

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 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 · 2024-05-10T19:22:00Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-05-10T19:22:35Z

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

Sections (~517 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
plans                                  +1168 B  (+0.1%)     +251 B  (+0.1%)
jetpack-connect                        +1168 B  (+0.1%)     +251 B  (+0.1%)
jetpack-cloud-pricing                  +1168 B  (+0.1%)     +251 B  (+0.1%)
jetpack-cloud-features-comparison      +1168 B  (+0.2%)     +266 B  (+0.1%)

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.

Aurorum · 2024-05-11T07:45:44Z

client/my-sites/plans/jetpack-plans/product-lightbox/style.scss

+// The lightbox z-index is 100200, consequences of updating the popover z-index
+// to higher than that are unclear, so we'll manually set it to 100200 here so we
+// can see the popover in the lightbox.
+.popover {


Should this be more specific (with a class name added to the popover) to prevent styles seeping elsewhere after this stylesheet is loaded? Perhaps also included alongside the other z-index mappings: https://github.com/Automattic/wp-calypso/blob/trunk/client/assets/stylesheets/shared/functions/_z-index.scss

I agree with that! Especially since <InfoPopover /> allows for adding custom modifier class names, we should leverage that - instead of providing a global change as it's not our intention.

Thank you both on this, I went ahead and added the class that was added to the component to specify it more. I can't nest it because the popover itself is rendered outside the parent component but this should keep it specific to this popover

robertsreberski

Besides the comments, the change tests good!

robertsreberski · 2024-05-13T16:47:56Z

client/my-sites/plans/jetpack-plans/product-lightbox/style.scss

+// The lightbox z-index is 100200, consequences of updating the popover z-index
+// to higher than that are unclear, so we'll manually set it to 100200 here so we
+// can see the popover in the lightbox.
+.popover {


I agree with that! Especially since <InfoPopover /> allows for adding custom modifier class names, we should leverage that - instead of providing a global change as it's not our intention.

robertsreberski · 2024-05-13T16:49:15Z

client/my-sites/plans/jetpack-plans/product-lightbox/quantity-dropdown.tsx

+						screenReaderText={ translate( 'Learn more' ) }
+						className="product-lightbox__variants-dropdown--popover"
+					>
+						{ PRODUCT_OPTIONS_HEADER_INFO_CONTENT[ product?.productSlug ] }


We might want to use preventWidows() formatting function - currently I see the widow on the screenshot attached to the PR.

Nice suggestion for improvement thank you!

robertsreberski

Looks good!

matticbot · 2024-05-15T15:19:59Z

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

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

odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/info-popover-for-tiers-dropdown on your sandbox.

* Add info popover for tier dropdown * Prevent widows and specify css class for zindex * Remove conflicting imports

Aurorum reviewed May 11, 2024

View reviewed changes

robertsreberski requested changes May 13, 2024

View reviewed changes

robertsreberski approved these changes May 15, 2024

View reviewed changes

CodeyGuyDylan added 2 commits May 15, 2024 09:00

Add info popover for tier dropdown

193555d

Prevent widows and specify css class for zindex

79320c9

CodeyGuyDylan force-pushed the add/info-popover-for-tiers-dropdown branch from 17b72da to 79320c9 Compare May 15, 2024 15:00

Remove conflicting imports

896744b

CodeyGuyDylan merged commit 83ccf7c into trunk May 15, 2024
11 checks passed

CodeyGuyDylan deleted the add/info-popover-for-tiers-dropdown branch May 15, 2024 15:39

chad1008 pushed a commit that referenced this pull request May 21, 2024

Add info popover for tier dropdown (#90600)

573bc98

* Add info popover for tier dropdown * Prevent widows and specify css class for zindex * Remove conflicting imports

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add info popover for tier dropdown #90600

Add info popover for tier dropdown #90600

CodeyGuyDylan commented May 10, 2024

github-actions bot commented May 10, 2024 •

edited by matticbot

matticbot commented May 10, 2024 •

edited

Aurorum May 11, 2024

robertsreberski May 13, 2024

CodeyGuyDylan May 14, 2024

robertsreberski left a comment

robertsreberski May 13, 2024

robertsreberski May 13, 2024

CodeyGuyDylan May 14, 2024

robertsreberski left a comment

matticbot commented May 15, 2024 •

edited

Add info popover for tier dropdown #90600

Add info popover for tier dropdown #90600

Conversation

CodeyGuyDylan commented May 10, 2024

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented May 10, 2024 • edited by matticbot

matticbot commented May 10, 2024 • edited

Aurorum May 11, 2024

Choose a reason for hiding this comment

robertsreberski May 13, 2024

Choose a reason for hiding this comment

CodeyGuyDylan May 14, 2024

Choose a reason for hiding this comment

robertsreberski left a comment

Choose a reason for hiding this comment

robertsreberski May 13, 2024

Choose a reason for hiding this comment

robertsreberski May 13, 2024

Choose a reason for hiding this comment

CodeyGuyDylan May 14, 2024

Choose a reason for hiding this comment

robertsreberski left a comment

Choose a reason for hiding this comment

matticbot commented May 15, 2024 • edited

github-actions bot commented May 10, 2024 •

edited by matticbot

matticbot commented May 10, 2024 •

edited

matticbot commented May 15, 2024 •

edited