Adds & uses hoverintent component

[cpapazoglou]

Build on #47238

Changes proposed in this Pull Request

• Added https://www.npmjs.com/package/react-hoverintent npm package and used it in client/layout/sidebar/expandable.jsx
• sensitivity, interval={ 90 }, timeout={ 200 } are the same as in wp-admin
• This change will not affect production unless you use ?flags=nav-unification in URL

Testing instructions

• add ?flags=nav-unification in URL
• hover fast the sidebar menus vertically, none should open
• hover fast the sidebar menus vertically and stay over one randomly, the flyout should open.
• hover the Setting menu, try moving the cursor to General in a straight line (fast enough). The flyout should not close.
• hover the Setting menu, try moving the cursor to General in a straight line (slowly). The flyout should close.
• hover the Posts menu, try moving the cursor to Tags in a straight line(fast enough). The flyout should not close. Links flyout should not open.

Before	After

Fixes #46094

[matticbot]

Test live: https://calypso.live/?branch=fix/flyouts-hoverintent

[matticbot]

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

Sections (~310 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
woocommerce                  +34 B  (+0.0%)      +27 B  (+0.0%)
site-blocks                  +34 B  (+0.0%)      +27 B  (+0.0%)
security                     +34 B  (+0.0%)      +27 B  (+0.0%)
purchases                    +34 B  (+0.0%)      +14 B  (+0.0%)
privacy                      +34 B  (+0.0%)      +27 B  (+0.0%)
notification-settings        +34 B  (+0.0%)      +27 B  (+0.0%)
me                           +34 B  (+0.0%)      +27 B  (+0.0%)
help                         +34 B  (+0.0%)      +27 B  (+0.0%)
happychat                    +34 B  (+0.0%)      +27 B  (+0.0%)
devdocs                      +34 B  (+0.0%)      +26 B  (+0.0%)
account-close                +34 B  (+0.0%)      +27 B  (+0.0%)
account                      +34 B  (+0.0%)      +27 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 (~1400 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-calypso-reader-sidebar                  +1818 B  (+3.0%)     +469 B  (+3.3%)
async-load-calypso-my-sites-sidebar-unified        +1818 B  (+3.6%)     +448 B  (+3.2%)
async-load-calypso-my-sites-sidebar                +1818 B  (+1.2%)     +457 B  (+1.1%)
async-load-calypso-components-jetpack-sidebar        +34 B  (+0.1%)      +26 B  (+0.4%)

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.

[cpapazoglou]

@scinos are there any hesitations regarding the new package added?

[mreishus]

react and react-dom being added to the yarn.lock raise a yellow flag for me - we already have react 16 installed but this is adding react 15 to the lockfile.

[cpapazoglou]

react and react-dom being added to the yarn.lock raise a yellow flag for me - we already have react 16 installed but this is adding react 15 to the lockfile.

Indeed, would it be better if we just rewrote that file on our own?
https://github.com/nerdchacha/react-hoverintent/blob/master/src/components/index.js

[mreishus]

That sounds like a good idea, since:

• We only need one file
• The package is version 0.0.10
• It hasn't been touched in almost a year

[jsnajdr]

Another option is to instruct Yarn to force react@15 resolution to the 16.x (and soon 17.x) version that we are using and avoid the duplication. The <HoverIntent> component does only things that are perfectly compatible: componentDidMount, componentWillUnmount, cloneElement.

@scinos is the expert on Yarn-related things. I'm not even sure if this forced resolution is a good idea. Just putting an extra option on the table.

[scinos]

I share the same concerns about bringing in react@15 to the codebase. I think we should consider:

• Use a different package that depends on react@16 (or even better, declares react as a peer dependency)
• Raise PRs to react-hoverintent to update react@16 and use it.
• Fork it.
• Write our own.

[tyxla]

Not much to add to what folks already added here, but I agree we very much should avoid bringing another version of React on the table. Forking it and bumping the React dependency shouldn't be a big deal, because as Jarda pointed out, the React lifecycle methods used in this package should be fully compatible with the ones in a newer React version.

[cpapazoglou]

Thanks everybody for chiming in!
I eventually ported the component to calypso/lib, since it seems there is no recent activity (bugs, issues etc) and we need to move fast here.

[tyxla]

I've left some drive-by nits in case you find those helpful 😉

[mreishus]

I ran prettier on the readme file. [fix/flyouts-hoverintent fb33741] Run prettier on the README file

[frontdevde]

Just noting that I tested this as per testing instructions and from a functional perspective it's working nicely as intended.

[cpapazoglou]

I have addressed all feedback, I can't imagine what I would do without you all ❤️, THANKS!

[mreishus]

Below it says " Check code style (Calypso) — TeamCity build failed " failed, but I see no difference in the output of yarn run lint on this branch and master.

[mreishus]

This is working well for me. ✔️

[scinos]

There were a couple of lint errors in the README.md file:

I've fixed them, should be green now.