Merge pull request #94 from ovh-ux/fix/progress

fix(progress): fix progress bugs and design

Author: jimmyfortinx

packages/oui-progress/README.md

@@ -62,6 +62,12 @@ oui-progress is a package which provide styles for the progress component.
 ### Thresholds
 
 ```html:preview
+<div class="oui-progress oui-progress_error">
+  <div class="oui-progress__threshold" style="left: 70%"></div>
+  <div class="oui-progress__bar oui-progress__bar_error oui-progress__bar_text-left" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
+    <span class="oui-progress__label">Progression: 80%</span>
+  </div>
+</div>
 <div class="oui-progress oui-progress_info">
   <div class="oui-progress__threshold" style="left: 25%"></div>
   <div class="oui-progress__threshold" style="left: 50%"></div>

packages/oui-progress/_mixins.less

@@ -64,7 +64,6 @@
     @height: @oui-progress-height,
     @force-radius: false
   ) {
-    position: relative;
     height: @height;
     text-align: right;
     transition: width @oui-animation-default-timing @oui-animation-default;
@@ -105,6 +104,7 @@
     font-size: @oui-progress-bar-text-font-size;
     font-weight: @oui-progress-bar-text-font-weight;
     line-height: @oui-progress-height;
+    white-space: nowrap;
   }
 
   .progress-bar-threshold() {
@@ -122,7 +122,7 @@
       height: @oui-progress-height;
       width: 1px;
       left: -1px;
-      background-color: rgba(100, 100, 100, .5);
+      background-color: rgba(100, 100, 100, .3);
     }
 
     font-size: @oui-progress-bar-text-font-size;

packages/oui-progress/_variables.less

@@ -1,7 +1,7 @@
 // Progress
 @oui-progress-height: 23px;
 @oui-progress-margin: rem-calc(10) 0;
-@oui-progress-bar-text-spacing: rem-calc(10);
+@oui-progress-bar-text-spacing: rem-calc(12);
 @oui-progress-bar-text-font-size: rem-calc(16);
 @oui-progress-bar-text-font-weight: 600;