From 44447eeefe61dbb16cab59900c3c061d9f207fbc Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 24 Nov 2014 17:09:32 -0800
Subject: Give all embedded live docs examples data-example-id attrs

Refs #11410
---
 docs/_includes/components/progress-bars.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs/_includes/components/progress-bars.html')

diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html
index a7132e763..88340105b 100644
--- a/docs/_includes/components/progress-bars.html
+++ b/docs/_includes/components/progress-bars.html
@@ -10,7 +10,7 @@
 
   <h3 id="progress-basic">Basic example</h3>
   <p>Default progress bar.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-progress-bar">
     <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
         <span class="sr-only">60% Complete</span>
@@ -27,7 +27,7 @@
 
   <h3 id="progress-label">With label</h3>
   <p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="progress-bar-with-label">
     <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
         60%
@@ -44,7 +44,7 @@
 
   <h3 id="progress-low-percentages">Low percentages</h3>
   <p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="progress-bar-at-low-percentage">
     <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
         0%
@@ -72,7 +72,7 @@
 
   <h3 id="progress-alternatives">Contextual alternatives</h3>
   <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
         <span class="sr-only">40% Complete (success)</span>
@@ -119,7 +119,7 @@
 
   <h3 id="progress-striped">Striped</h3>
   <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="striped-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
         <span class="sr-only">40% Complete (success)</span>
@@ -166,7 +166,7 @@
 
   <h3 id="progress-animated">Animated</h3>
   <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="animated-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
     </div>
@@ -182,7 +182,7 @@
 
   <h3 id="progress-stacked">Stacked</h3>
   <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="stacked-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-success" style="width: 35%">
         <span class="sr-only">35% Complete (success)</span>
-- 
cgit v1.2.3


From d9c3e5f3ad28a55102a6c880324ef8ac80ddf276 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 10 Dec 2014 16:50:21 +0000
Subject: Fix/merge advice on low percentage progress bars

- actually add the ``min-width`` extra style (and use ``em`` rather than
``px``) to the 0% and 2% example
- remove the unnecessarily redundant sentence in the "With labels"
section
- remove the unnecessary heading/section specifically for low percentage
case, make it flow naturally as part of the "With labels" section
---
 docs/_includes/components/progress-bars.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

(limited to 'docs/_includes/components/progress-bars.html')

diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html
index 88340105b..68d87e090 100644
--- a/docs/_includes/components/progress-bars.html
+++ b/docs/_includes/components/progress-bars.html
@@ -26,7 +26,7 @@
 {% endhighlight %}
 
   <h3 id="progress-label">With label</h3>
-  <p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
+  <p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
   <div class="bs-example" data-example-id="progress-bar-with-label">
     <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
@@ -41,29 +41,27 @@
   </div>
 </div>
 {% endhighlight %}
-
-  <h3 id="progress-low-percentages">Low percentages</h3>
-  <p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
+  <p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p>
   <div class="bs-example" data-example-id="progress-bar-at-low-percentage">
     <div class="progress">
-      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
         0%
       </div>
     </div>
     <div class="progress">
-      <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
+      <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
         2%
       </div>
     </div>
   </div>
 {% highlight html %}
 <div class="progress">
-  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
     0%
   </div>
 </div>
 <div class="progress">
-  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
+  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
     2%
   </div>
 </div>
-- 
cgit v1.2.3