EUI Tour Component Improvement

[bojanasan]

EUI Tour component improvement:
Currently, the EUI tour components can only be dismissed by interacting with the component in the UI. This is done by either clicking on the buttons in the footer, or interacting with the button or area the component is pointing to (no footer).

Ideally the user could also be able to click outside of the EUI Tour component to dismiss it and essentially exit the tour flow. This doesn't seem to be supported currently.

Describe a specific use case for the feature:
The intention is to make sure that the user can easily get out of any EUI Tour, especially given that there will be a number of additional tours added now and going forward.

cc @gavinwye @alisonelizabeth

[elasticmachine]

Pinging @elastic/platform-onboarding (Team:Journey/Onboarding)

[alisonelizabeth]

Thanks for opening up this issue @bojanasan!

If we move forward with this change, I think it is something we would want to solve on the EUI side. @elastic/eui-design do you have any thoughts on this?

[miukimiu]

Hi @bojanasan,

Ideally the user could also be able to click outside of the EUI Tour component to dismiss it and essentially exit the tour flow. This doesn't seem to be supported currently.

This was a design decision. Users can click by mistake outside of the tour and then they don't see the tour. Is there a way to restart the tour? If, yes I think it makes sense to be able to click outside.

And this can be easily implemented as seen on the following CodeSandbox: https://codesandbox.io/s/black-thunder-8p20ey?file=/demo.js.

Alternative approach

What do you think if in EUI, we implement a way of having at least two actions in the footer? One action could be used to "skip the tour" and the other to "next".

Here are a few examples of this pattern:

Let me know your thoughts.

[alisonelizabeth]

Thanks for the feedback @miukimiu!

This was a design decision. Users can click by mistake outside of the tour and then they don't see the tour. Is there a way to restart the tour? If, yes I think it makes sense to be able to click outside.

There is not a way to restart the tour currently.

What do you think if in EUI, we implement a way of having at least two actions in the footer? One action could be used to "skip the tour" and the other to "next".

I think this is already possible, and the approach we are currently taking.

@bojanasan thoughts?

[miukimiu]

Hi @alisonelizabeth,

Where is this screenshot coming from? I would love to see the code to find out what was the approach to make the buttons in line.

I'm assuming the approach is similar to the following one:

<EuiTourStep
   { ... }
    footerAction={
          <span>
              <EuiButtonEmpty size="s">Skip tour</EuiButtonEmpty>{" "}
              <EuiButton size="s">Next</EuiButton>
          </span>
        }
/>

But ff this is a pattern we're going to use, I can improve the component so that consumers just need to pass an array of buttons.

[alisonelizabeth]

Here is the code for the 2 buttons:

    <EuiFlexGroup gutterSize="s" alignItems="baseline">
      <EuiFlexItem>
        <EuiButtonEmpty
          onClick={() => endTour()}
          size="xs"
          color="text"
          // Used for testing and to track FS usage
          data-test-subj="onboarding--observTourSkipButton"
        >
          {i18n.translate('xpack.observability.tour.skipButtonLabel', {
            defaultMessage: 'Skip tour',
          })}
        </EuiButtonEmpty>
      </EuiFlexItem>
      <EuiFlexItem>
        <EuiButton
          onClick={() => incrementStep()}
          size="s"
          color="success"
          // Used for testing and to track FS usage
          data-test-subj="onboarding--observTourNextStepButton"
        >
          {i18n.translate('xpack.observability.tour.nextButtonLabel', {
            defaultMessage: 'Next',
          })}
        </EuiButton>
      </EuiFlexItem>
    </EuiFlexGroup>

There is also some conditional logic, if it is the last step in the tour, an "End tour" link is shown.

But ff this is a pattern we're going to use, I can improve the component so that consumers just need to pass an array of buttons.

👍 that would be great

[alisonelizabeth]

I'm going to close this one as there is no direct action for the Onboarding team at this time.