Skip to content

Tourkit: focus the step after opening #38963

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.

Sign up for GitHub

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

Jump to bottom
Merged
chihsuan merged 4 commits into from
Jul 6, 2023
Merged

Tourkit: focus the step after opening #38963

chihsuan merged 4 commits into from
Jul 6, 2023

Conversation

@chihsuan
Copy link
Member

@chihsuan chihsuan commented Jun 27, 2023

Submission Review Guidelines:

Changes proposed in this Pull Request:

Closes #36512.

Update tour-kit component to automatically focus the step button if the focused element is not provided.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Run pnpm --filter=storybook run storybook
  2. Go to http://localhost:6007/?path=/story/woocommerce-admin-components-tourkit--auto-scroll
  3. Click on Start Tour button
  4. Observe that the Next button is focused.
  5. Navigate to next step using keyboard ➡️
  6. Should see the next step, and the input box is focused.
Screen.Recording.2023-06-27.at.20.33.04.mov
  1. Go to /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
  2. Enable Try the new product editor (Beta) feature
  3. Go to /wp-admin/admin.php?page=wc-admin&path=%2Fadd-product
  4. Wait a few seconds
  5. Observe that Meet the product editing formBeta tour is shown.
  6. Observe that View highlights button is focused.

Screenshot 2023-06-27 at 20 24 16

Changelog entry

  • Automatically create a changelog entry from the details below.

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement

Message

Comment

@chihsuan chihsuan marked this pull request as ready for review June 27, 2023 12:36
@chihsuan chihsuan self-assigned this Jun 27, 2023
@github-actions github-actions bot added the package: @woocommerce/components issues related to @woocommerce/components label Jun 27, 2023
@chihsuan chihsuan changed the title Tourkit: focus the step after opening if focusElement is not provided Tourkit: focus the step after opening when focusElement is not provided Jun 27, 2023
@chihsuan chihsuan changed the title Tourkit: focus the step after opening when focusElement is not provided Tourkit: focus the step after opening Jun 27, 2023
@chihsuan chihsuan requested review from a team, adrianduffell and moon0326 June 27, 2023 12:36
@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023 •
edited
Loading

Hi @moon0326, @adrianduffell, @woocommerce/mothra, @woocommerce/ghidorah

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 18a392d

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202611m 12s
E2E Tests1900018020816m 31s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

rjchow
rjchow approved these changes Jun 28, 2023
View reviewed changes
Copy link
Contributor

@rjchow rjchow left a comment

Choose a reason for hiding this comment

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

PR tests well according to the instructions!
Did note that there's a deprecation warning unrelated to this PR but in the same touched code -

Card isElevated prop is deprecated since version 5.9. Please use elevation instead.

There's not really any documentation about this but it seems like an internal P2 post suggests that elevation={2} would have the same effect as isElevated.

@chihsuan
Copy link
Member Author

chihsuan commented Jun 28, 2023

Card isElevated prop is deprecated since version 5.9. Please use elevation instead.

There's not really any documentation about this but it seems like an internal P2 post suggests that elevation={2} would have the same effect as isElevated.

Thank you for looking into it! 👍

That does work well. I've just updated the prop in 18a392d.

adrianduffell
adrianduffell approved these changes Jul 6, 2023
View reviewed changes
Copy link
Contributor

@adrianduffell adrianduffell left a comment

Choose a reason for hiding this comment

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

It tested well and LGTM! Thanks @chihsuan 🚀

@chihsuan chihsuan merged commit 16d50ed into trunk Jul 6, 2023
@chihsuan chihsuan deleted the update/tour-kit-auto-focus branch July 6, 2023 11:06
@github-actions github-actions bot added this to the 8.0.0 milestone Jul 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@moon0326 moon0326 Awaiting requested review from moon0326

2 more reviewers

@adrianduffell adrianduffell adrianduffell approved these changes

@rjchow rjchow rjchow approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@chihsuan chihsuan

Labels

package: @woocommerce/components issues related to @woocommerce/components

Projects

None yet

Milestone

8.0.0

Development

Successfully merging this pull request may close these issues.

Tour kit should focus the first step after opening

4 participants

@chihsuan @adrianduffell @rjchow