[EuiTour] Support for previous, next and go to step

[andreadelrio]

I wanted to check with the team and ask if we would consider adding "go to next", "go to previous", "go to nth step" support to EuiTour. Or if this was considered during the development of the component but not implemented for some reason.

We plan to start using EuiTour for Discover and the steps we have are not dependant on each other. In this scenario, being able to skip steps (and go back if needed) could be beneficial for the user. Right now the requirement is to have a Next button which I could fit in the step "body" but wanted to see what we think about doing something like this too.

[snide]

I think the full screen example has an example of how to handle this? I'm not super familiar with the component, but that should at least get you what you need?

          <EuiTourStep
            {...euiTourStepTwo}
            footerAction={
              <EuiButtonEmpty
                color="text"
                flush="right"
                size="xs"
                onClick={actions.incrementStep}>
                {"I don't have a favorite color"}
              </EuiButtonEmpty>
            }>

Does look like we might want to by default add onClick steps to "dots" themselves though.

[andreadelrio]

I think the full screen example has an example of how to handle this? I'm not super familiar with the component, but that should at least get you what you need?

          <EuiTourStep
            {...euiTourStepTwo}
            footerAction={
              <EuiButtonEmpty
                color="text"
                flush="right"
                size="xs"
                onClick={actions.incrementStep}>
                {"I don't have a favorite color"}
              </EuiButtonEmpty>
            }>

Does look like we might want to by default add onClick steps to "dots" themselves though.

Yes, I think adding onClick to the dots would be ideal.

[thompsongl]

Yes, I think adding onClick to the dots would be ideal.

I don't recall any discussion about clickable dots, but I don't see any reason why they can't be clickable.

Follow-up question: Would you want to define the onClick yourself or is having it perform go-to-nth-step good enough?

[snide]

Follow-up question: Would you want to define the onClick yourself or is having it perform go-to-nth-step good enough?

I can't see any time where it wouldn't be go to nth step. Only thing I could see is that you would want to turn it off for cases where one step can't be completed before another.

[cchaos]

A couple thoughts I've had on this in the past.

1. Small dots are so hard to actually click.
2. Without any context (no text) is it really necessary for users to jump around the different steps?
3. I do still think it's super helpful to show an indicator of how many total steps there are, but is there a better way to present this? What if there are 10+ steps?
4. I can see the most wanted action is just to skip to the next step, so maybe we prioritize that functionality?

[andreadelrio]

A couple thoughts I've had on this in the past.

1. Small dots are so hard to actually click.
2. Without any context (no text) is it really necessary for users to jump around the different steps?
3. I do still think it's super helpful to show an indicator of how many total steps there are, but is there a better way to present this? What if there are 10+ steps?
4. I can see the most wanted action is just to skip to the next step, so maybe we prioritize that functionality?

Those are good points. I agree that the small dots can be hard to click and while I'm guessing a scenario with 10+ steps is unlikely it is true that the current layout could break with so many dots (plus I think it'd be hard for the user to mentally keep track of which steps they've seen). Maybe we could provide two options for counter. The current one with the dots and another one with something shorter like 2/4.

If we have to prioritize I'd would say that yes, skipping to the next step should be at top. Like I mentioned, a Next button is something the consumer could include in the body of the step but I think it'd be nice if we could figure out how to place this in a fixed location (footer, etc).

One option for the Next button/element placement could be the right side of the footer. In the Discover use case we were planning on using that area for the End tour button but we could also replace this with an (x) at the upper right corner leaving that area free.

[cchaos]

Based on all this, it seems like the functionality getting very similar to pagination. So what if EuiTour just used EuiPagination in place of the dots, allowing users to use the back/next arrows to go back/forward through the steps and possibly jumping to a specific step if need be. Then you can keep the high priority item of ending the tour where it is (right side of footer) and still prominently allow "Next" or "Okay" buttons in the body of the tour content for specific call-to-actions.

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[banderror]

Hey all, Security Solution is interested in this as well. We'd like to have some built-in previous/next buttons in the tour steps that would allow the user to navigate between the steps.

So far we had to add our custom buttons to the content of every step: https://github.com/elastic/kibana/pull/128405

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.