Automattic
Show spotlight on focus elements during each of the steps of the tour
Goal
We're trying to replicate the same spotlight effect we see during the WooCommerce's product page tour. We'll show a gradient over the rest of the screen and put spotlight on the element we need to focus on.
Context [Optional]
We can follow the logic WooCommerce have for it here - https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/client/guided-tours/add-product-tour/index.tsx
We should be able to put spotlight on multiple elements. For example, in the Course Outline block, we may need to put spotlight on both the '+' button and the context menu that opens after clicking it.
[List of steps with elements to focus on will be added here]
Scope
- Showing spotlight
- Screen resizings
- Scrolling
- Focused element size getting changed (For example, if a lesson gets added in the Course Outline block, it'll get bigger, the spotlight needs to cover that)
- Handle the focused element getting removed, closed (like menu), re-added etc cases
- Showing a gray overlay effect like Woo does on the screen outside the element with spotlight
Out of Scope
- Showing the tooltip-style tour like Woo does. We're only working on creating the spotlight effect here.
Acceptance Criteria
Scenario: Happy Path Given I have opened the Course editor When I am taking the tour Then I see the spotlight on the focus element for each tour step
*Scenario: Screen resize Given I have opened the Course editor When I am taking the tour And I am resizing the browser window Then I see the spotlight size and position getting adjusted based on the size and position of the focus element
*Scenario: Focus element resize Given I have opened the Course editor When I am taking the tour And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it) Then I see the spotlight size getting adjusted based on the size of the focus element
*Scenario: Focus element resize Given I have opened the Course editor When I am taking the tour And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it) Then I see the spotlight size getting adjusted based on the size of the focus element
Resources
Woo product tour
https://github.com/Automattic/sensei/assets/6820724/79629cf8-c843-4d91-bcf7-7712916be0d0
