Progress

[eddywashere]

http://v4-alpha.getbootstrap.com/components/progress/

• Progress
  • animated
  • striped
  • color

[TheSharpieOne]

While this component is relatively simple, the problem lies with HTML5, bootstrap, and their being different way to render what is essentially the same thing.
I am all for using HTML5 components, but for better backwards compatibility at no real cost; I would use the div elements over progress. Even for modern browsers (as in, do not wrap the div within a progress element).
Animation doesn't seem to work on most modern browsers anyways (also, this comment from the linked issue may suggest that bootstrap will itself go back to just the div)

What do you think?

[eddywashere]

Nice find! I tried creating a div version without the progress element wrapping it and it didn't seem to show a progress bar at all. If it does work without progress, that sounds like a better option. Otherwise, I think sticking to the progress element is not so bad since it's broken in bootstrap and can be fixed on their end. If the markup does change the component can be updated without people having to worry too much about what's changed between bootstrap releases.

[TheSharpieOne]

I forgot I had add some custom styles to get the div to work in all browsers. This is because bootstrap only targets the div in IE9 which is blah.
For now, we can just go with progress, using the div fallback within the progress so it should work with IE9. We can have the animated props which will add the class, but animations will not work until bootstrap fixes them. It probably the best route.

Edit
Well, with the tag prop, we can let the user choose, defaulting to progress. We can do some special logic for when the tag is progress or not; since they have different markup.