From 34248437c3bc7278f912c9005d3fd4877b723d83 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 19 Jun 2014 19:54:25 -0700
Subject: tweak alert per #13875

---
 docs/_includes/js/buttons.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/js/buttons.html')

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index 154320e48..ee5b3d71d 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -144,7 +144,7 @@ $('.btn').button()
 
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
-    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
   </div>
 
   <h4>$().button('reset')</h4>
-- 
cgit v1.2.3


From 976441ac1bad923a718d9db355153954b067f01a Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 18 Jul 2014 11:48:00 -0700
Subject: Document limitations of buttons JS plugin

Addresses #14148.
---
 docs/_includes/js/buttons.html | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'docs/_includes/js/buttons.html')

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index ee5b3d71d..dbacb632c 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -41,6 +41,10 @@
     <h4>Pre-checked options need <code>.active</code></h4>
     <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
   </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Visual checked state only updated on click</h4>
+    <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
+  </div>
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
@@ -74,6 +78,10 @@
     <h4>Preselected options need <code>.active</code></h4>
     <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
   </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Visual checked state only updated on click</h4>
+    <p>If the checked state of a radio button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
+  </div>
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
-- 
cgit v1.2.3


From fc19cad60810684d6669ac55eaece2d96500f82a Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 18 Jul 2014 13:59:37 -0700
Subject: Use autocomplete="off" in buttons plugin docs examples

Refs #13875.
---
 docs/_includes/js/buttons.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'docs/_includes/js/buttons.html')

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index ee5b3d71d..6d812e70a 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -44,26 +44,26 @@
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
-        <input type="checkbox" checked> Option 1 (pre-checked)
+        <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox"> Option 2
+        <input type="checkbox" autocomplete="off"> Option 2
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox"> Option 3
+        <input type="checkbox" autocomplete="off"> Option 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
-    <input type="checkbox" checked> Option 1 (pre-checked)
+    <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox"> Option 2
+    <input type="checkbox" autocomplete="off"> Option 2
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox"> Option 3
+    <input type="checkbox" autocomplete="off"> Option 3
   </label>
 </div>
 {% endhighlight %}
@@ -77,26 +77,26 @@
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
-        <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
+        <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option2"> Option 2
+        <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option3"> Option 3
+        <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
-    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2"> Option 2
+    <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3"> Option 3
+    <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
   </label>
 </div>
 {% endhighlight %}
-- 
cgit v1.2.3


From db352bcc94287bcef015752c059b31dd1d8ee4c3 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 18 Jul 2014 14:01:33 -0700
Subject: Make warning from #13875 slightly more detailed

[skip sauce]
---
 docs/_includes/js/buttons.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/js/buttons.html')

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index 6d812e70a..a0801b56c 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -144,7 +144,7 @@ $('.btn').button()
 
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
-    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
   </div>
 
   <h4>$().button('reset')</h4>
-- 
cgit v1.2.3


From 2c625c7d1a82147ac81c3038cdfd84c5a34d97d9 Mon Sep 17 00:00:00 2001
From: Heinrich Fenkart <hnrch02@gmail.com>
Date: Tue, 5 Aug 2014 12:56:33 +0200
Subject: Clean up buttons documentation

---
 docs/_includes/js/buttons.html | 145 ++++++++++++++++-------------------------
 1 file changed, 55 insertions(+), 90 deletions(-)

(limited to 'docs/_includes/js/buttons.html')

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index a8f2ffc26..f07e716c8 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -1,169 +1,134 @@
 <div class="bs-docs-section">
   <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
 
-  <h2 id="buttons-examples">Example uses</h2>
-  <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+  <p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
 
-  <h4>Stateful</h4>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Cross-browser compatibility</h4>
+    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+  </div>
+
+  <h2 id="buttons-stateful">Stateful</h2>
   <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
+  <div class="bs-callout bs-callout-info">
+    <h4>Use whichever state you like!</h4>
+    <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
+  </div>
+  <div class="bs-example">
+    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
       Loading state
     </button>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
   Loading state
 </button>
+
 <script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
+  $('#myButton').on('click', function () {
+    var $btn = $(this).button('loading')
+    // business logic...
+    $btn.button('reset')
+  })
 </script>
 {% endhighlight %}
 
-  <h4>Single toggle</h4>
+  <h2 id="buttons-single-toggle">Single toggle</h2>
   <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+  <div class="bs-example">
+    <button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
+      Single toggle
+    </button>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
+<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
+  Single toggle
+</button>
 {% endhighlight %}
 
-  <h4>Checkbox</h4>
-  <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
+  <h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
+  <p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
   <div class="bs-callout bs-callout-warning">
-    <h4>Pre-checked options need <code>.active</code></h4>
-    <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
+    <h4>Preselected options need <code>.active</code></h4>
+    <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Visual checked state only updated on click</h4>
     <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
   </div>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
-        <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
+        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox" autocomplete="off"> Option 2
+        <input type="checkbox" autocomplete="off"> Checkbox 2
       </label>
       <label class="btn btn-primary">
-        <input type="checkbox" autocomplete="off"> Option 3
+        <input type="checkbox" autocomplete="off"> Checkbox 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
-    <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
+    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Option 2
+    <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Option 3
+    <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
 </div>
 {% endhighlight %}
 
-  <h4>Radio</h4>
-  <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
-  <div class="bs-callout bs-callout-warning">
-    <h4>Preselected options need <code>.active</code></h4>
-    <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
-  </div>
-  <div class="bs-callout bs-callout-warning">
-    <h4>Visual checked state only updated on click</h4>
-    <p>If the checked state of a radio button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
-  </div>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
-        <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
+        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
+        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
       </label>
       <label class="btn btn-primary">
-        <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
+        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
       </label>
     </div>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
   </label>
 </div>
 {% endhighlight %}
 
-
-  <h2 id="buttons-usage">Usage</h2>
-  <p>Enable buttons via JavaScript:</p>
-{% highlight js %}
-$('.btn').button()
-{% endhighlight %}
-
-  <h3>Markup</h3>
-  <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
-
-  <h3>Options</h3>
-  <p><em>None</em></p>
-
-  <h3>Methods</h3>
+  <h2 id="buttons-methods">Methods</h2>
 
   <h4>$().button('toggle')</h4>
   <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-  <div class="bs-callout bs-callout-info">
-    <h4>Auto toggling</h4>
-    <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
-  </div>
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">...</button>
-{% endhighlight %}
-
-  <h4>$().button('loading')</h4>
-  <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
-  </p>
-{% highlight html %}
-<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
-<script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
-</script>
-{% endhighlight %}
-
-  <div class="bs-callout bs-callout-danger">
-    <h4>Cross-browser compatibility</h4>
-    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
-  </div>
 
   <h4>$().button('reset')</h4>
   <p>Resets button state - swaps text to original text.</p>
 
   <h4>$().button(string)</h4>
-  <p>Resets button state - swaps text to any data defined text state.</p>
+  <p>Swaps text to any data defined text state.</p>
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
+<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
+  ...
+</button>
+
 <script>
-  $('.btn').button('complete')
+  $('#myStateButton').on('click', function () {
+    $(this).button('complete') // button text will be "finished!"
+  })
 </script>
 {% endhighlight %}
 </div>
-- 
cgit v1.2.3