Wp-calypso: Onboarding Checklist: Guided Tour prompts can be misaligned and can overlap content

[andrewspittle]

Steps to reproduce

These steps were taken as part of a clean signup for a new user account and new site. The first step is the page you land on after signing up for a free site. The "siteurl" bit will be your own site address.

1. Starting at URL: https://wordpress.com/checklist/siteurl.wordpress.com/free
2. Click "Do it!" next to "Upload a site icon"
3. Note the black modal pointing you to the site icon upload. Do not dismiss this.
4. Click the globe placeholder to upload a site icon.
5. Note the black modal pointing you to the file picker button. Do not dismiss this.
6. Drag any image on your computer onto the window.
7. Once the image uploads click "Continue" in the bottom right.
8. You will now be in the image crop tool...along with the modal from Step 5.
9. Leave the modal alone. Don't dismiss it.
10. Click "Done" to crop the site icon image.
11. You will now be back at your site's General Settings page...along with the modal from Step 5. But now that modal is up in the top-left.
12. Click "All done, continue" on the modal.
13. You will be on your site's General Settings page...with no clear way to return to the checklist from Step 1.

What I expected

I expected two main things. First to have the modal not persist as an overlay as I was uploading a site icon. I also wasn't expecting it to then relocate to the top-left. Second, I was expecting to be redirected, or at least have a clear path back to, the checklist after completing this first step. As-is I'm unsure how to return to the checklist and finish the steps required in building my site.

What happened instead

Instead the modal floated above the steps I was taking and the became misaligned on the page after a successful image upload and crop. And instead of being directed back to the checklist I was left adrift. Short of my browser's back button I'm not sure how to get back there.

Browser / OS version

Safari 11.0.3 and macOS High Sierra 10.13.3

Screenshot / Video

Screenshot of Step 8 and the persistent modal:

Screenshot of Step 11 and the misaligned modal:

Context / Source

I found this through #manual-testing and #dogfooding. :)

[lancewillett]

Good finds, @andrewspittle.

CC @fditrapani and @lsinger on the Guided Tour layout issues, misaligned modal.

[designsimply]

Tested and confirmed that the continue button in the image upload part of site icon step does not dismiss the guided tour prompt as expected and that the same guided tour prompt appears misaligned and partially off-screen at the end of the site icon step if you complete the steps without dismissing the guided tour prompts directly (54s).

^{Tested with Safari 11.0.3 on macOS 10.13.3 on production.}

[rachelmcr]

I believe the alignment issue is the one reported in https://github.com/Automattic/wp-calypso/issues/22252 — the dialog is misaligned when switching pages during a guided tour.

[fditrapani]

Thanks for reporting this @andrewspittle. When we implemented this, I wasn't aware of any way to detect some of these events. We've since made some updates thanks to @taggon and can probably address this now.

@taggon can you take a look?

[andrewspittle]

@taggon, any update on tidying these things up?

[taggon]

@andrewspittle Yup, I've been working on the PR #23080 to fix the issue.

[taggon]

Close this issue as the fix is merged. :)