search

jquery-archive / css-chassis

An attempt at creating an open standard for both CSS and JavaScript UI libraries.
https://css-chassis.com
Other
351 stars 67 forks source link

Progress and Meter styling #116

Closed geekman-rohit closed 7 years ago

geekman-rohit commented 8 years ago

Some basic styling for progress bar. Still working on it.

I would love some suggestions on making them visually look different a bit, I setup a codepen Would like suggestions on a better file organization too.

geekman-rohit commented 8 years ago

Its based on #111 , will change and remove the commit if we decide not to use that.

cvrebert commented 8 years ago

I recommend against the approach of putting the percentage text within the progress bar itself. (1) It results in inconsistency between <div>-based bars and <progress>-based bars (one has text, one doesn't) (2) It breaks at low percentages; example: http://codepen.io/anon/pen/aOMKvZ . There's insufficient room for the text. And even if you tweak the position of the text, it might overlap both the filled and the unfilled portion of the progress bar; it is difficult to ensure that the text color will offer sufficient contrast against the background color in both situations.

As an alternative, I would suggest putting the text directly below the progress bar, and centered horizontally.

kborchers commented 8 years ago

Sorry for jumping in here but it seems like anything around what text and how it's displayed in a progress bar should be left up to a UI lib/framework built on top of Chassis. It feels too overbearing IMO to define that much detail but again, this is just my 2 cents so take it as such.

arschmitz commented 8 years ago

@kborchers I agree for the most part though i think we should offer some default styling.

@cvrebert I agree inside is troublesome i think we should opt for very basic styling either above or below what ever we use as a default style for any other label probably ( progress and meter elements are label-able elements ). For the most part unless its a percentage read out the text should probably be a label anyway.

Since we are using BEM that means inheritance is not an issue. That means its fairly trivial to provide default styles that don't matter if they are inside the toolbar or not. Then you can just put a span with the proper class where ever you like to get it properly styled ( and make sure your including proper aria attributes to get it properly associated )

arschmitz commented 8 years ago

sorry slipped wrong button DOH!

cvrebert commented 8 years ago

The pen's <progress> doesn't seem to work in Edge: edge

cvrebert commented 8 years ago

:indeterminate progress bars also need to be considered.

geekman-rohit commented 8 years ago

@cvrebert , I need to check how progress works on edge and make changes accordingly, thanks for pointing out!

geekman-rohit commented 7 years ago

Closing for now, until things move on with foms/redoing typography. will open/redo again once other things are done.