Merge branch 'master' into docs_derp

Conflicts:
	docs/components.html
	docs/css.html

.travis.yml

@@ -20,9 +20,12 @@ env:
     - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
     - secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
     - secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
+    - secure: "Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w="
+    - secure: "Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew="
   matrix:
     - TWBS_TEST=core
     - TWBS_TEST=validate-html
     - TWBS_TEST=sauce-js-unit
+    - TWBS_TEST=browserstack-js-unit
 matrix:
   fast_finish: true

Gruntfile.js

@@ -348,6 +348,7 @@ module.exports = function (grunt) {
 
   // These plugins provide necessary tasks.
   require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+  grunt.loadNpmTasks('browserstack-runner');
 
   // Docs HTML validation task
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
@@ -369,6 +370,12 @@ module.exports = function (grunt) {
     testSubtasks.push('connect');
     testSubtasks.push('saucelabs-qunit');
   }
+  // Only run BrowserStack tests if there's a BrowserStack access key
+  if (typeof process.env.BROWSERSTACK_KEY !== 'undefined'
+      // Skip BrowserStack if running a different subset of the test suite
+      && (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'browserstack-js-unit')) {
+    testSubtasks.push('browserstack_runner');
+  }
   grunt.registerTask('test', testSubtasks);
 
   // JS distribution task.

browserstack.json

@@ -0,0 +1,43 @@
+{
+  "username": "--secure--",
+  "key": "--secure--",
+  "test_path": "js/tests/index.html",
+  "browsers": [
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mavericks"
+    },
+    {
+      "browser": "safari",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mavericks"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mavericks"
+    },
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "8.1"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "8.1"
+    },
+    {
+      "browser": "Mobile Safari",
+      "os": "ios",
+      "os_version": "7.0",
+      "device": "iPhone 5S"
+    }
+  ]
+}

dist/css/bootstrap.css

@@ -4341,6 +4341,10 @@ textarea.input-group-sm > .input-group-btn > .btn {
   position: relative;
   top: -1px;
 }
+.btn-xs .badge {
+  top: 0;
+  padding: 1px 5px;
+}
 a.badge:hover,
 a.badge:focus {
   color: #fff;

docs/assets/js/blob.js

@@ -1,5 +1,4 @@
-/*!
- * Blob.js
+/* Blob.js
  * A Blob implementation.
  * 2013-12-27
  * 

docs/assets/js/filesaver.js

@@ -1,5 +1,4 @@
-/*!
- * FileSaver.js
+/* FileSaver.js
  * A saveAs() FileSaver implementation.
  * 2013-12-27
  *

docs/components.html

@@ -29,7 +29,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
   <div class="bs-callout bs-callout-danger">
     <h4>Don't mix with other components</h4>
-    <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
+    <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
   </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
@@ -181,7 +181,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 
   <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
 
-  <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning">
     <h4>Tooltips &amp; popovers in button groups require special setting</h4>
     <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
   </div>
@@ -795,6 +795,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Tooltips &amp; popovers in input groups require special setting</h4>
+    <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Don't mix with other components</h4>
+    <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
+  </div>
 
   <h2 id="input-groups-sizing">Sizing</h2>
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
@@ -1417,7 +1425,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
     <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
   </div>
 
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>

docs/css.html

@@ -1568,6 +1568,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
 {% endhighlight %}
+    <div class="bs-callout bs-callout-warning">
+      <h4>Don't mix form groups with input groups</h4>
+      <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+    </div>
 
 
   <h2 id="forms-inline">Inline form</h2>
@@ -1576,7 +1580,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Requires custom widths</h4>
     <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
   </div>
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>
@@ -2349,7 +2353,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." alt="..." class="img-thumbnail">
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-info">
     <h4>Responsive images</h4>
     <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
   </div>

docs/javascript.html

@@ -925,7 +925,7 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       <h4>Opt-in functionality</h4>
       <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
     </div>
-    <div class="bs-callout bs-callout-info">
+    <div class="bs-callout bs-callout-warning">
       <h4>Tooltips in button groups and input groups require special setting</h4>
       <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
     </div>
@@ -1110,7 +1110,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
       <h4>Opt-in functionality</h4>
       <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
     </div>
-    <div class="bs-callout bs-callout-info">
+    <div class="bs-callout bs-callout-warning">
       <h4>Popovers in button groups and input groups require special setting</h4>
       <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
     </div>

js/tests/index.html

@@ -4,12 +4,17 @@
   <title>Bootstrap Plugin Test Suite</title>
 
   <!-- jquery -->
-  <!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>-->
   <script src="vendor/jquery.js"></script>
 
   <!-- qunit -->
   <link rel="stylesheet" href="vendor/qunit.css" media="screen">
   <script src="vendor/qunit.js"></script>
+  <script>
+    // See https://github.com/axemclion/grunt-saucelabs#test-result-details-with-qunit
+    QUnit.done(function(results) {
+      window.global_test_results = results
+    })
+  </script>
 
   <!--  plugin sources -->
   <script src="../../js/transition.js"></script>

less/badges.less

@@ -28,6 +28,10 @@
     position: relative;
     top: -1px;
   }
+  .btn-xs & {
+    top: 0;
+    padding: 1px 5px;
+  }
 }
 
 // Hover state, but only for links

package.json

@@ -25,6 +25,7 @@
     }
   ],
   "devDependencies": {
+    "browserstack-runner": "~0.0.13",
     "btoa": "~1.1.1",
     "grunt": "~0.4.2",
     "grunt-banner": "~0.2.0",