[EuiSteps] Updates for Amsterdam and added disabled and loading states
#4338
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4338/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4338/ |
|
Minor visual comment. Do you think about putting the loading ring on the step-circle itself, rather than inside the circle? |
| warning: 'euiStepNumber--warning', | ||
| danger: 'euiStepNumber--danger', | ||
| disabled: 'euiStepNumber--disabled', | ||
| complete: 'euiStepNumber--complete', |
There was a problem hiding this comment.
Should we also add selected as a status?
There was a problem hiding this comment.
The selected status isn't actually any different from the default (blue background, white number). So there would be nothing to change here.
There was a problem hiding this comment.
I looked at the code and tested it locally in Safari, Chrome, Edge, and Firefox, and LGTM. 🎉
+1 for what @snide is suggesting:
Do you think about putting the loading ring on the step-circle itself
|
Originally I had thought it would clash with the connecting lines which is why I had it inside, but I tried it out and it doesn't 👍 !
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4338/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4338/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4338/ |
Also updated the docs a bit too.
Added
disabledas astatusfor EuiStepCloses #3339
Added
loadingas astatusfor EuiStepCloses #4322
Updated Amsterdam styling
We aligned the styles between Vertical and Horizontal steps and removed center line indicators.
The design
BEFORE
AFTER
Some notes
status. I've marked these as**DEPRECATED IN AMSTERDAM**.incomplete, while the new one does. I ended up changing this to always render the number but hide visually in the default theme.Checklist
[ ] Checked Code Sandbox works for the any docs examples[ ] Checked for breaking changes and labeled appropriately