eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiTour] Built-in 'Next' button

Open thompsongl opened this issue 2 years ago • 3 comments

Would it be possible to have default Next behaviour added to the bottom of the tour steps? Right now I have to pass a custom footer action to each step except the final one, which is a bit clunky - I understand that, in the examples included in the documentation, the tour steps progress via actions such as copy pasting and clicking other buttons rather than clicking Next; however, I think that a Next button would, at the very least, be a common use case worth considering. Here is an example of what we had in our original tour for what was considered the 'default' footerAction:

<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
  <EuiFlexItem grow={false}>
    <EuiButtonEmpty color="text" size="xs" onClick={actions.finishTour()}>
      Skip tour
    </EuiButtonEmpty>
  </EuiFlexItem>
  <EuiFlexItem grow={false}>
    <EuiButton size="s" color="success" onClick={actions.incrementStep()}>
      Next
    </EuiButton>
  </EuiFlexItem>
</EuiFlexGroup>

Which rendered to this:

image

Originally posted by @Heenawter in https://github.com/elastic/eui/issues/5696#issuecomment-1062191573

thompsongl avatar Mar 14 '22 15:03 thompsongl

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

banderror avatar Mar 24 '22 11:03 banderror

👋 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] avatar Sep 20 '22 16:09 github-actions[bot]

I think this would still be a valuable addition 👍

Heenawter avatar Sep 20 '22 16:09 Heenawter

It was fixed by https://github.com/elastic/eui/pull/6384. We just added support to pass an array of buttons to footerAction.

miukimiu avatar Jan 17 '23 18:01 miukimiu