Carbon: fix[Loading Component]: both loading and inline loading component tweaks

Created on 25 Feb 2019 · 7Comments · Source: carbon-design-system/carbon

fix[Loading Component]: small loading and inline loading

[x] Get rid of clunky toggle state button and try a timer Loading...loading... success
[x] Convert button to sm variant
[x] Check small loader (both loading and inline loading) stoke weight looks narrower than spec (it should be 3px wide in spec and 16px square in total)
[x] Small loader is missing the gray section at the start, then gray section suddenly appears.
[x] Don't we need a failure state beside success state? See failure state design below:

dev 🤖 10

Source

jeanservaas

All 7 comments

Hey, I'll pick this up again if nobody's jumped on it yet. Looks like @jeanservaas had a question about adding a new error state to the loader? @shixiedesign

dakahn on 4 Mar 2019

👍1

In hindsight a timer on the success state would make the page less usable for screen reader users. We could alter our implementation to not have the success state called out, but that would make that component a do as we say not as we do situation in terms of a11y implementation.

So I've gone with the alternate suggestion of using a smaller button in the example. Linked in this PR here. @jeanservaas Let me know if that's sufficient or if you want to go in a different direction. ☮️

dakahn on 5 Mar 2019

@alisonjoseph Reaching the edges of my Gatsby knowledge here as far as the bx--loading__background circle getting onto the page after the bx--loading__stroke (referencing the 3rd checkbox). And ideas about why that's happening?

dakahn on 5 Mar 2019

This is a weird one, I believe this is an issue with the css animation. I made the .bx--loading__stroke transparent and the bx--loading__background red so I could see what was going on with the background, and the background is animating at the beginning at the same speed as the stroke, so it looks like it isn't there.
loading