[FR] - New component to represent process stages / timelines

[orecus]

I have a suggestion for a new component, a stepper component; I'm partial to Semantic UI's but Material UI's feels like a good "minmal" version of it.

I could see these options being available on the component.

• Label - A bigger font sized label of the step.
• Description - A short description of the text, usually in a smaller font.
• Icon - An Icon for the step.
• IconCompleted - The icon to display if the step is completed.
• numeralStep - Bool, if true instead of an icon a step count would show. E.G. 1,2,3 and so on.

In which you can combine to use all of them, or just for example the Icon or Label, or any combination of them to create an step item. Preferably the layout and size would go from Big (with all options) to a smaller layout if you just use the Label or Icon for example.

Could be nice if some animations where used while transitioning between steps, such as having the Description hidden until that step is the active one and fading in or whatnot.

A pseudo code example;

const currentStep = 0;

<Stepper currentStep={currentStep} numeralStep={false}>
<Step value={0} icon="fa fa-truck" iconCompleted="fa fa-check" label="Shipping" description="Please enter your shipping details"/>
<Step value={1} icon="fa fa-credit-card-alt" iconCompleted="fa fa-check" label="Credit Card Details" description="Please enter your credit card details"/>
<Step value={2} icon="fa fa-info" iconCompleted="fa fa-check" label="Order Confirmed" description="Your order have been confirmed and sent!"/>
</Stepper>

[giladgray]

lol check the PRs... #189

[giladgray]

feel free to leave comments #189! would love your input as we build it.

[giladgray]

aaand i didn't click on the links! I took Stepper to mean numerical input like iOS: https://developer.apple.com/ios/human-interface-guidelines/ui-controls/steppers/.

looks like we've got a naming problem!

[orecus]

@giladgray Hahaha I was just about to comment that it was not the same kind of component! ;)

But a better name might be <Guide>, <Trail> or <Process> perhaps? Also, some more insperation from Salesforce Lightning System :)

[marutha]

+1 for this

[veeral-patel]

Just for reference -

Equivalent component in Salesforce Lightning Design System:
https://www.lightningdesignsystem.com/components/activity-timeline/

And in Ant Design:
https://ant.design/components/timeline/

[adidahiya]

We're aware that this component exists in other UI kits. If you implement this using Blueprint core, it would be nice to see your code or a community-maintained package so that others can re-use your work. Other than that, there are no plans for us to develop this feature right now.

[veeral-patel]

@adidahiya No worries! I wasn't complaining about BlueprintJS not having the component btw - I just linked a few examples to help inspire BlueprintJS's design, if someone wants to implement it.

[davidLeonardi]

Resurrecting an old post to express interest in this !