Skip to content
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

Add show on hover to info popover #48990

Merged
merged 7 commits into from
Jan 20, 2021
Merged

Conversation

becdetat
Copy link
Contributor

Changes proposed in this Pull Request

  • Adds a show on hover feature to the info popover component
  • Uses that feature for the "Store" menu item info popover

Testing instructions

  • Smoke test the "Store" menu item info popover

Fixes #48982

@becdetat becdetat requested a review from a team January 18, 2021 06:10
@matticbot
Copy link
Contributor

@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 18, 2021
@matticbot
Copy link
Contributor

matticbot commented Jan 18, 2021

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

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

name         parsed_size           gzip_size
entry-login       +236 B  (+0.0%)      +60 B  (+0.0%)

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

Sections (~3166 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
zoninator                          +861 B  (+0.4%)     +195 B  (+0.3%)
wp-super-cache                     +861 B  (+0.3%)     +195 B  (+0.3%)
woocommerce                        +861 B  (+0.0%)     +208 B  (+0.0%)
themes                             +861 B  (+0.2%)     +195 B  (+0.2%)
theme                              +861 B  (+0.3%)     +195 B  (+0.2%)
stats                              +861 B  (+0.2%)     +203 B  (+0.1%)
site-purchases                     +861 B  (+0.1%)     +202 B  (+0.1%)
site-blocks                        +861 B  (+0.3%)     +207 B  (+0.2%)
settings-writing                   +861 B  (+0.2%)     +181 B  (+0.1%)
settings-security                  +861 B  (+0.3%)     +208 B  (+0.2%)
settings-performance               +861 B  (+0.2%)     +202 B  (+0.2%)
settings-jetpack                   +861 B  (+0.3%)     +208 B  (+0.3%)
settings-discussion                +861 B  (+0.3%)     +204 B  (+0.3%)
settings                           +861 B  (+0.1%)     +180 B  (+0.1%)
sensei                             +861 B  (+0.7%)     +215 B  (+0.6%)
security                           +861 B  (+0.2%)     +207 B  (+0.2%)
reader                             +861 B  (+0.1%)     +185 B  (+0.1%)
purchases                          +861 B  (+0.1%)     +223 B  (+0.1%)
purchase-product                   +861 B  (+0.5%)     +202 B  (+0.5%)
privacy                            +861 B  (+0.3%)     +207 B  (+0.3%)
posts-custom                       +861 B  (+0.2%)     +210 B  (+0.2%)
posts                              +861 B  (+0.2%)     +210 B  (+0.2%)
plugins                            +861 B  (+0.2%)     +204 B  (+0.2%)
plans                              +861 B  (+0.1%)     +202 B  (+0.1%)
people                             +861 B  (+0.2%)     +195 B  (+0.2%)
pages                              +861 B  (+0.3%)     +201 B  (+0.3%)
notification-settings              +861 B  (+0.2%)     +207 B  (+0.2%)
me                                 +861 B  (+0.3%)     +207 B  (+0.3%)
marketing                          +861 B  (+0.2%)     +202 B  (+0.1%)
jetpack-connect                    +861 B  (+0.1%)     +202 B  (+0.1%)
jetpack-cloud-settings             +861 B  (+0.4%)     +201 B  (+0.3%)
jetpack-cloud-pricing              +861 B  (+0.2%)     +202 B  (+0.2%)
jetpack-cloud-partner-portal       +861 B  (+0.3%)     +202 B  (+0.3%)
import                             +861 B  (+0.3%)     +195 B  (+0.3%)
help                               +861 B  (+0.1%)     +207 B  (+0.1%)
hello-dolly                        +861 B  (+0.7%)     +207 B  (+0.6%)
happychat                          +861 B  (+0.3%)     +207 B  (+0.3%)
google-my-business                 +861 B  (+0.3%)     +192 B  (+0.2%)
export                             +861 B  (+0.5%)     +205 B  (+0.4%)
email                              +861 B  (+0.2%)     +205 B  (+0.2%)
earn                               +861 B  (+0.3%)     +203 B  (+0.2%)
domains                            +861 B  (+0.1%)     +202 B  (+0.1%)
comments                           +861 B  (+0.1%)     +210 B  (+0.1%)
checkout                           +861 B  (+0.1%)     +202 B  (+0.1%)
activity                           +861 B  (+0.1%)     +202 B  (+0.1%)
account-close                      +861 B  (+0.2%)     +207 B  (+0.2%)
account                            +861 B  (+0.2%)     +207 B  (+0.2%)
media                              +236 B  (+0.0%)      +60 B  (+0.0%)
home                               +236 B  (+0.0%)      +60 B  (+0.0%)
backup                             +236 B  (+0.0%)      +60 B  (+0.0%)
accept-invite                      +236 B  (+0.2%)      +60 B  (+0.2%)

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 (~1427 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-design-playground                              +990 B  (+0.1%)     +236 B  (+0.1%)
async-load-design                                         +990 B  (+0.0%)     +235 B  (+0.0%)
async-load-calypso-my-sites-sidebar                       +876 B  (+0.4%)     +196 B  (+0.3%)
async-load-signup-steps-theme-selection                   +861 B  (+1.3%)     +195 B  (+1.1%)
async-load-signup-steps-plans-atomic-store                +861 B  (+0.6%)     +202 B  (+0.6%)
async-load-signup-steps-plans                             +861 B  (+0.4%)     +202 B  (+0.3%)
async-load-signup-steps-domains                           +861 B  (+0.3%)     +226 B  (+0.3%)
async-load-signup-steps-clone-credentials                 +861 B  (+1.2%)     +219 B  (+1.1%)
async-load-signup-steps-about                             +861 B  (+1.5%)     +206 B  (+1.3%)
async-load-design-blocks                                  +861 B  (+0.0%)     +206 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover             +861 B  (+0.2%)     +196 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal           +861 B  (+0.1%)     +202 B  (+0.1%)
async-load-signup-steps-user                              +236 B  (+0.2%)      +60 B  (+0.2%)
async-load-signup-steps-clone-point                       +236 B  (+0.1%)      +60 B  (+0.2%)
async-load-calypso-post-editor-editor-media-modal         +236 B  (+0.1%)      +60 B  (+0.1%)
async-load-calypso-layout-masterbar-drafts-popover        +236 B  (+0.5%)      +60 B  (+0.4%)
async-load-calypso-components-web-preview-component       +236 B  (+0.0%)      +60 B  (+0.0%)
async-load-calypso-components-sites-popover               +236 B  (+0.3%)      +60 B  (+0.3%)

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.

Copy link
Member

@mattsherman mattsherman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not think we should make this change.

It is inconsistent with the use of the info popover everywhere else in Calypso. And, by hovering, there are accessibility issues... if the user does not carefully move their mouse pointer to the "Learn more" link in the popover, the whole thing disappears. This can be very frustrating. (Though, it could probably be made less likely by increasing the timeout before auto-dismissing the popover.)

And by putting this support in the common InfoPopover component, we are inviting other developers to start using this sometimes, which will lead to further inconsistent usage. Either this component should always work with hover, everywhere, or never, in my opinion.

It's not a big deal if the user doesn't realize to click on the info button in this case, as clicking on the entire "Store" menu item will take them to a page that has a large notice at the top of it providing even more detail than this popover does.

I've tested the change and it works, including on iOS (both with touch and trackpad). And existing use of the info popover elsewhere seems to be functioning properly still too.

/cc @elizaan36 Do you feel strongly that we should still make this change at this point, even if inconsistent with usage elsewhere in Calypso?

@elizaan36
Copy link

Hey @mattsherman

Yes let's make sure the tooltip stays active while the user hovers over it in order to access the learn more link.

As for requiring the click, I'm a little unclear as to why this is being brought up now after many design specs that specify "tooltip on hover", but I don't think it's a problem to diverge from Calypso for this temporary feature. That said, I don't think this functionality should be included in the common component for usage elsewhere.

Imo, it's more of a problem to require users to think about if they need to click in order to open the tooltip, and will they accidentally click on the nav.

@becdetat
Copy link
Contributor Author

Hover to show the tooltip is inconsistent with the rest of Calypso, I debated with myself whether it was appropriate to diverge the behaviour especially since we (Isotope) don't work in Calypso much and don't have the full context over the use of this component. However I'm ok with deferring to @elizaan36 on this.

I don't see a big problem with leaving the functionality in the InfoPopover component, I would like to assume that future developers are going to use this maturely - it's opt-in functionality for a start, the default behaviour is still 'show on click'.

Copy link
Member

@mattsherman mattsherman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still not a fan of making this change, but I also do not want to hold up a change that others believe should be made... this is not an change I feel strongly enough about to actively block. There are pros and cons to it, and I can see the argument for making the change.

I'd like to see the timeout increased a bit to make the auto-dismiss a bit more forgiving for users that don't precisely position the cursor when going to click on a link in the popover.

I'm approving this pre-emptively, based on my review of the code and testing conducted yesterday. The code changes seem solid and well done. It's just the functionality in the context of the existing system that I disagree with.

}

this.setState( { showPopover: false }, this.recordStats );
}, 100 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you try bumping this up a bit and seeing if it still feel okay? It would help prevent the popover from auto-dismissing when the user accidentally moves the cursor briefly outside of the info button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

250ms seems to be the sweet spot, thanks for the review @mattsherman

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels much better!

Copy link
Member

@mattsherman mattsherman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested with increased auto-dismiss timeout... much better! Thanks for making the change.

@mattsherman mattsherman added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jan 20, 2021
@becdetat becdetat merged commit 7ecca39 into trunk Jan 20, 2021
@becdetat becdetat deleted the add/show-on-hover-to-info-popover branch January 20, 2021 23:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Store menu link tooltip should appear on hover
4 participants