feat(step): new variant to support the steps with circular railing

[ko2in]

Description

This PR add the new variant railing to the steps which suppose to display the steps with circular railing horizontally or vertically.

I used the name raliing since we already have rail component which can conflict each other. If you have better name for this variant, please suggest.

Testcase

https://jsfiddle.net/ko2in/n9dum7fg/

Screenshot (if possible)

Closes

#2170

[ko2in]

I had to fix stylelint errors and rebase to take out this commit, and done forced push. Would it be OK?

[lubber-de]

Great! But why dont we just name it circular as we already have for image, icon, label and button?

[ko2in]

I didn't implement for inverted yet. I don't know how the inverted should be at the moment.

[lubber-de]

The connection line cover background could be avoided by

.ui.railing.vertical.steps .step:not(:last-child) .content::before {
margin-top: 2.2em;
}

it seems....

I wonder why i had so many issues doing that for connected feed... perhaps more difficult markup, Will take a look for that again

[ko2in]

Great! But why dont we just name it circular as we already have for image, icon, label and button?

That sound also OK for me. I will update the PR with that name and other fixes.

[lubber-de]

I didn't implement for inverted yet. I don't know how the inverted should be at the moment.

Not much to be done i believe. I suggest to:

• use dedicated less variables (yes, even if those would have the same value) for the inverted variant
• increase specificity, so the normal inverted variant does not override the railing ones (would already fix the inner circle color from black to green)
• dont use white as background (perhaps no background at all/transparent in case my margin-top idea works for you would already fix that)
• use a light color for the connection lines
• use the default inverted green colors

[jamessampford]

Nice! Would it be possible to have an option to have a title and/or description on the horizontal variant below the step circles?

[ko2in]

disabled step does not have any visual effect (you removed that on purpose...why?)

I don't see any difference style for disabled step like box item. Maybe, remove the small circle disc?

[lubber-de]

disabled step does not have any visual effect (you removed that on purpose...why?)

I don't see any difference style for disabled step like box item. Maybe, remove the small circle disc?

A disabled variant almost always has

• a lower opacity value

• greyed out (if lower opacity doesn't make it visually clear already (IMHO not necessary when doing the example given above)

• pointer-events: none (already implemented)

[ko2in]

Disabled state would OK with completed or active. The default state already looks similar to the disabled item as it's color and background is grayed out.

[ko2in]

If this looks OK for you, then I'll apply also the opacity for the default state.

[lubber-de]

the opacity can be applied to either normal state or completed state. But you should still see the default (non-disabled, non completed) state greyed out (if no color is given as suggested above) and opacity:1 (it gets more clear when text is used in the vertical variant

If you meant the same, then: yes 😄

[ko2in]

@lubber-de Here we go! I've finished the implementation with the other variantions and all your suggestions.

Due to the nature and design approaches, the circular step doesn't have the following variations: stackable, unstackable, attached and evenly divided.

I'm not sure what is going on with jsfiddle.net. It seems to be stopped working for me since yesterday. I cannot browse the website anymore.

So, I've created the examples and demonstrations in CodeSandbox.

[jamessampford]

Looking good 😊

The only bit I’m unsure about is the coloured line appearing after the active step, I think it should only go backwards to the previous step (so between completed and active)

Possibly should have an option not to change the header colour as well on the horizontal version (or possibly if by adding .active to the header it inherits the same colour?)

Any possibility of having header supported below the horizontal version?

Not sure if possible at all, but could even be pretty cool to have an optional pulsating active version (of the circle, could possibly have the line between active and last completed pulsating as well separately but certainly the active circle by itself)

[ko2in]

The only bit I’m unsure about is the coloured line appearing after the active step, I think it should only go backwards to the previous step (so between completed and active)

@jamessampford Yeah! That would be better I guess. What do you think @lubber-de ?

[lubber-de]

Yes, agree

[ko2in]

Now, the color rule for the rail line is changed as suggested by @jamessampford.

The line only after the completed step is now showing the particular color. The rest of the states would use the default color for the rail line.

Jsfiddle: ~~https://jsfiddle.net/ko2in/86spora2/~~ https://jsfiddle.net/lubber/t1j7yxoz/ CodeSandbox: https://codesandbox.io/s/fui-circular-step-hqc7k7?file=/index.html

[jamessampford]

I’ve managed to add optional pulsating to active - https://codesandbox.io/s/fui-circular-step-forked-7tqhs6?file=/index.html - probably needs some tweaking … borrowed from transitions, though needs to target the ::before - I did try ::after as well, but think the former looks better on its own instead of the latter or both

[ko2in]

I’ve managed to add optional pulsating to active - https://codesandbox.io/s/fui-circular-step-forked-7tqhs6?file=/index.html - probably needs some tweaking … borrowed from transitions, though needs to target the ::before - I did try ::after as well, but think the former looks better on its own instead of the latter or both

@jamessampford You can submit your own PR later for any improvements. I would like to keep it as simple for now.

[ko2in]

That's very awesome by now! Just a little comment (see below) and a general question (not a request):

There are now a very lot of :not(.circular) selector enhancements. Would it be easier (less code?) to instead override the circular setting (which would be needed for non circular only) instead directly. This is especially noticable for all the evenly divided variants (.x.steps) I understand you did that because circular steps are styled differently, but perhaps it's worth some minutes to think about that again.

So instead of

.ui.steps:not(.circular) {
	display: inline-flex;
}

just override it for the ciscular variant like

.ui.steps {
	display: inline-flex;
}
.ui.circular.steps {
	display: block;
}

I'll try to review again and find out whether it's possible to avoid excluding with :not(.circular) and describe the specific style directly.

[lubber-de]

I tried to remove the :not(.circular) for the evenly divided variants (.two.steps, .three.steps etc.) and it seems it works well with circular variant (because it only affects the width), so at least those can be removed i think, but you may check yourself, too

[ivangomes]

Guys this project still good?