Rewrite progress component without <progress> element

- <progress> element didn't allow animation, labels overlaid, multiple bars, etc.

- Revamps CSS to use something more similar to v3's implementation

- Ditches variant mixin for `bg-` utils

- Rebuilds docs to match, including adding a new Height section for customizing that.

Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.

diff --git a/docs/components/progress.md b/docs/components/progress.md
index d137fad140afee53b7d0a88db75bf8a81b87c501..29436c365f0f628dfee67d033db534d86fbfc4b8 100644 (file)
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -5,71 +5,139 @@ description: Documentation and examples for using Bootstrap progress bars.
 group: components
 ---
 
-Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.
+Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-## Example
+## How it works
 
-To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
+Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
+
+- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
+- We use the inner `.progress-bar` to indicate the progress so far.
+- The `.progress-bar` requires an inline style or custom CSS to set their width.
+- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
+
+Put that all together, and you have the following examples.
 
 {% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
 
-<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
-<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
+## Customizing
 
-<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
-<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
+Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more.
 
-<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
-<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
+### Labels
 
-<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
-<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
+Add labels to your progress bars by placing text within the `.progress-bar`.
 
-<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
-<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
+{% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+</div>
 {% endexample %}
 
-## Contextual alternatives
+### Height
 
-Progress bars use some of the same button and alert classes for consistent styles.
+We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly.
 
 {% example html %}
-<progress class="progress progress-success" value="25" max="100"></progress>
-<progress class="progress progress-info" value="50" max="100"></progress>
-<progress class="progress progress-warning" value="75" max="100"></progress>
-<progress class="progress progress-danger" value="100" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
+
+### Backgrounds
+
+Use background utility classes to change the appearance of individual progress bars.
+
+{% example html %}
+<div class="progress">
+  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
+
+### Multiple bars
+
+Include multiple progress bars in a progress component if you need.
+
+{% example html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 {% endexample %}
 
 ### Striped
 
-Uses a gradient to create a striped effect.
+Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
 
 {% example html %}
-<progress class="progress progress-striped" value="10" max="100"></progress>
-<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
-<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
-<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
-<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 {% endexample %}
 
 ### Animated stripes
 
-The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
+The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
 
-**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
+**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations.
 
 <div class="bd-example">
-  <progress class="progress progress-striped" value="25" max="100"></progress>
-  <button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
+  <div class="progress">
+    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+  </div>
+  <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>
 
 {% highlight html %}
-<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+</div>
 {% endhighlight %}

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 19bf4d41f3949048a13d51a48c778b60b8f0fc51..d207a335b224b7ecb553ad69b1f5bdc0ee03212d 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -43,7 +43,6 @@
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
-@import "mixins/progress";
 @import "mixins/table-row";
 
 // // Skins

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 800138cdc2677f3952f7fde160807982574b2c34..02e4c3bd2db8b1b95e5b6d71873b57f187ef7c0f 100644 (file)
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,103 +1,32 @@
-//
 // Progress animations
-//
-
 @keyframes progress-bar-stripes {
-  from { background-position: $spacer-y 0; }
+  from { background-position: $progress-height 0; }
   to { background-position: 0 0; }
 }
 
-
-//
 // Basic progress bar
-//
-
 .progress {
-  display: block;
-  width: 100%;
-  height: $spacer-y; // todo: make a new var for this
-  margin-bottom: $spacer-y;
+  display: flex;
   overflow: hidden; // force rounded corners by cropping it
-}
-.progress[value] {
-  // Set overall background
+  font-size: $progress-font-size;
+  line-height: $progress-height;
+  text-align: center;
   background-color: $progress-bg;
-  // Remove Firefox and Opera border
-  border: 0;
-  // Reset the default appearance
-  appearance: none;
-  // Set overall border radius
   @include border-radius($progress-border-radius);
 }
-
-// Filled-in portion of the bar
-.progress[value]::-ms-fill {
-  background-color: $progress-bar-color;
-  // Remove right-hand border of value bar from IE10+/Edge
-  border: 0;
-}
-.progress[value]::-moz-progress-bar {
-  background-color: $progress-bar-color;
-}
-.progress[value]::-webkit-progress-value {
-  background-color: $progress-bar-color;
+.progress-bar {
+  height: $progress-height;
+  color: $progress-bar-color;
+  background-color: $progress-bar-bg;
 }
 
-// Unfilled portion of the bar
-.progress[value]::-webkit-progress-bar {
-  background-color: $progress-bg;
-  @include box-shadow($progress-box-shadow);
-}
-base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
-.progress[value] {
-  background-color: $progress-bg;
-  @include box-shadow($progress-box-shadow);
-}
-
-
-//
 // Striped
-//
-
-.progress-striped[value]::-webkit-progress-value {
+.progress-bar-striped {
   @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-moz-progress-bar {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-ms-fill {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
+  background-size: $progress-height $progress-height;
 }
 
-
-//
 // Animated
-//
-
-.progress-animated[value]::-webkit-progress-value {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-.progress-animated[value]::-moz-progress-bar {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-
-//
-// Variations
-//
-
-.progress-success {
-  @include progress-variant($progress-bar-success-bg);
-}
-.progress-info {
-  @include progress-variant($progress-bar-info-bg);
-}
-.progress-warning {
-  @include progress-variant($progress-bar-warning-bg);
-}
-.progress-danger {
-  @include progress-variant($progress-bar-danger-bg);
+.progress-bar-animated {
+  animation: progress-bar-stripes $progress-bar-animation-timing;
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 948ac0354a652da1010b9cfadd0c3eb58bb2c15c..4e95bb1ed4bb9320056a6421c61d92618f22628e 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -852,17 +852,14 @@ $alert-danger-border:         $state-danger-border !default;
 
 // Progress bars
 
-$progress-bg:                 $gray-lighter !default;
-$progress-bar-color:          $brand-primary !default;
-$progress-border-radius:      $border-radius !default;
-$progress-box-shadow:         inset 0 .1rem .1rem rgba($black,.1) !default;
-
-$progress-bar-bg:             $brand-primary !default;
-$progress-bar-success-bg:     $brand-success !default;
-$progress-bar-warning-bg:     $brand-warning !default;
-$progress-bar-danger-bg:      $brand-danger !default;
-$progress-bar-info-bg:        $brand-info !default;
-
+$progress-height:               1rem !default;
+$progress-font-size:            .75rem !default;
+$progress-bg:                   $gray-lighter !default;
+$progress-border-radius:        $border-radius !default;
+$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
+$progress-bar-color:            $white !default;
+$progress-bar-bg:               $brand-primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
 
 // List group
 

diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
deleted file mode 100644 (file)
index 5674679..0000000
--- a/scss/mixins/_progress.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Progress bars
-
-@mixin progress-variant($color) {
-  &[value]::-webkit-progress-value {
-    background-color: $color;
-  }
-
-  &[value]::-moz-progress-bar {
-    background-color: $color;
-  }
-
-  // IE10+, Microsoft Edge
-  &[value]::-ms-fill {
-    background-color: $color;
-  }
-}