Horizontal & Complex Steps

[cchaos]

Horizontal Steps #305

For use when forms/setup instruction can and should be split into multiple pages.

To do:

• Not sure how to handle or if it should handle clicks like the EuiTabs component does.
• Animate the blue bar? The animation would only show if there is no full page refresh and only the content below changes. Is this likely the implementation?
• Small screen design (just remove the titles?)

cc @gjones

---

Complex Steps #275

By complex, it just means that it allows for a subset of content to be contained in a shaded area to distinguish it between the rest of the step content.

To do:

• Create a new component that's just a class wrapper.

cc @alexfrancoeur

[cchaos]

@cjcenizal or @snide Any thoughts on the question relating to the complex steps as a css class or component?

[snide]

Sorry, saw the WIP tag...

Do we rely on implementers to know the class to wrap that subset of content in as is implemented now or do we create a new component and make the steps implementation more complex?

I'd make a separate component, just so that we can adjust it later (as we tend to do). Even if it's just a simple wrapper one that does nothing but add the class. I'd prefer people don't need to know about classes with implementation.

Animate the blue bar? The animation would only show if there is no full page refresh and only the content below changes. Is this likely the implementation?

Sounds cool to me, but feel free to merge without it. Always something we can add later. SInce this stuff is all react, it shouldn't ever have a page refresh.

[cchaos]

Thanks @snide

I'll work on a wrapper component for the substeps.

I did try to find a quick CSS solution for animating, but other features were fighting it, so I'll leave that for later.

[cjcenizal]

🏛 Nice! I have a couple design-oriented thoughts on states. The locked and disabled states look really similar to me. Do we want to make locked steps easier to distinguish from regular disabled steps? When would locked steps be used? I assume locked steps will always be disabled as well, right? If we want to make them a little easier to tell apart, maybe we could do something like this, using outlines:

I found the focus state a little difficult to spot. I really liked the transition-in when the element first takes focus, but after that it was hard for me to tell which step had focus. Can we also give the text below it a focus treatment, maybe similar to the way we handle links?

And I noticed that there wasn't a hover state, so it was hard to tell which step I was hovering over when my mouse was in between them. Maybe we could add a slight animation and/or drop shadow, sort of the way the KeyPadMenu behaves.

[cjcenizal]

Also, can we put some realistic content inside of the sub-steps? I would give suggestions, but I'm not sure what kind of content we expect to put in here. 😄 Do we know it will always be text, or is it possible someone will want to put a code-block in there or even just inlined code? Or paragraphs of text, or even buttons? I think I'm mostly concerned about two things: 1) color contrast between things like code-blocks and the blue background of the sub-steps and 2) how well this component scales to accommodate varying kinds and amounts of content.

[cjcenizal]

Aside from my thoughts on the design stuff, this looks great! I just found one minor formatting thing.

[cjcenizal]

Minor OCD nit, but I think there's an extra space here.

[snide]

Looks good to me. Visual stuff seems ok to me but made a PR for you for some slants on the inactive / hover states. But this looks great.

cchaos#1

[cchaos]

@cjcenizal

The disabled state is the same as locked. I'm just using the locked icon to show it's disabled. Maybe you mean the incomplete looks like the disabled state? Although now that I think about it, we may not want to change the number to a locked icon because in most cases the user will be forced to go step by step (vs jumping around) so you could end up with 5/6 steps having the locked icon which kind of defeats the purpose of the numbers... I'll work on that a bit.

As for the complex steps, the original ask was from the Add Data pages: elastic/kibana#14749 (review). I can pull that content in to the example. But It should be used in place of code blocks not wrapping code blocks. Meaning, if the instructions aren't bash commands or the like, and they're just numbered(lettered) instructions, this will help make them stand out amongst instruction introductions or what have you.

@snide Thanks, that contrast is better. I merged it in. Will try to do some clean up of the SASS to make some parts reusable.

[cchaos]

All comments regarding the horizontal steps have been addressed.

I think the talk around the sub steps is less about the component and more about how to use it (guidelines). I'm going to merge this in so others can start using the horizontal steps.

[snide]

Yep. Go for it, this looks good. Nice work.