Check for input-group-* sizing

This checks that .input-group-* sizes are used on .input-group when
.btn-lg, .btn-sm, .input-lg and .input-sm are used within the
.input-group class.

Refs #47
Closes #54 by merging it (after squashing & trivial grammar fix)

dist/browser/bootlint.js

@@ -9369,6 +9369,18 @@ var cheerio = require('cheerio');
             return "Tooltips and popovers within button groups should have their `container` set to 'body'. Found tooltips/popovers that might lack this setting.";
         }
     };
+    exports.lintMissingInputGroupSizes = function ($) {
+        var selector = [
+            '.input-group:not(.input-group-lg) .btn-lg',
+            '.input-group:not(.input-group-lg) .input-lg',
+            '.input-group:not(.input-group-sm) .btn-sm',
+            '.input-group:not(.input-group-sm) .input-sm'
+        ].join(',');
+        var badInputGroupSizing = $(selector);
+        if (badInputGroupSizing.length) {
+            return "Button and input sizing within `.input-group`s can cause issues. Instead, use input group sizing classes `.input-group-lg` or `.input-group-sm`";
+        }
+    };
     exports.lintMultipleFormControlsInInputGroup = function ($) {
         var badInputGroups = $('.input-group').filter(function (i, inputGroup) {
             return $(inputGroup).find('.form-control').length > 1;
@@ -9503,6 +9515,7 @@ var cheerio = require('cheerio');
         errs.push(this.lintTooltipsOnDisabledElems($));
         errs.push(this.lintTooltipsInBtnGroups($));
         errs.push(this.lintMultipleFormControlsInInputGroup($));
+        errs.push(this.lintMissingInputGroupSizes($));
         errs.push(this.lintFormGroupMixedWithInputGroup($));
         errs.push(this.lintGridClassMixedWithInputGroup($));
         errs.push(this.lintInputGroupsWithMultipleAddOnsPerSide($));

src/bootlint.js

@@ -174,6 +174,18 @@ var cheerio = require('cheerio');
             return "Tooltips and popovers within button groups should have their `container` set to 'body'. Found tooltips/popovers that might lack this setting.";
         }
     };
+    exports.lintMissingInputGroupSizes = function ($) {
+        var selector = [
+            '.input-group:not(.input-group-lg) .btn-lg',
+            '.input-group:not(.input-group-lg) .input-lg',
+            '.input-group:not(.input-group-sm) .btn-sm',
+            '.input-group:not(.input-group-sm) .input-sm'
+        ].join(',');
+        var badInputGroupSizing = $(selector);
+        if (badInputGroupSizing.length) {
+            return "Button and input sizing within `.input-group`s can cause issues. Instead, use input group sizing classes `.input-group-lg` or `.input-group-sm`";
+        }
+    };
     exports.lintMultipleFormControlsInInputGroup = function ($) {
         var badInputGroups = $('.input-group').filter(function (i, inputGroup) {
             return $(inputGroup).find('.form-control').length > 1;
@@ -308,6 +320,7 @@ var cheerio = require('cheerio');
         errs.push(this.lintTooltipsOnDisabledElems($));
         errs.push(this.lintTooltipsInBtnGroups($));
         errs.push(this.lintMultipleFormControlsInInputGroup($));
+        errs.push(this.lintMissingInputGroupSizes($));
         errs.push(this.lintFormGroupMixedWithInputGroup($));
         errs.push(this.lintGridClassMixedWithInputGroup($));
         errs.push(this.lintInputGroupsWithMultipleAddOnsPerSide($));

test/bootlint_test.js

@@ -185,6 +185,13 @@ exports['bootlint'] = {
             'should complain when `data-*`-based tooltips or popovers lack `data-container="body"`.');
         test.done();
     },
+    'btn/input sizing used without input-group-* size': function (test) {
+        test.expect(1);
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('input-group/missing-input-group-sizing.html')),
+            ["Button and input sizing within `.input-group`s can cause issues. Instead, use input group sizing classes `.input-group-lg` or `.input-group-sm`"],
+            'should complain when an input/btn sizes are used within input-group.');
+        test.done();
+    },
     'input groups with multiple form controls': function (test) {
         test.expect(1);
         test.deepEqual(bootlint.lintHtml(utf8Fixture('input-group/multiple-form-controls.html')),

test/fixtures/input-group/missing-input-group-sizing.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test</title>
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../lib/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="../../lib/qunit-1.14.0.css">
+        <script src="../../lib/qunit-1.14.0.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+
+      <div class="input-group">
+        <span class="input-group-btn">
+            <button id="button" class="btn btn-default btn-lg" type="button">Go!</button>
+        </span>
+        <input id="input" type="text" class="form-control input-lg" />
+      </div>
+
+      <div class="input-group">
+        <span class="input-group-btn">
+            <button id="button" class="btn btn-default btn-lg" type="button">Go!</button>
+        </span>
+        <input id="input" type="text" class="form-control input-lg" />
+      </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+          <li data-lint="Button and input sizing within `.input-group`s can cause issues. Instead, use input group sizing classes `.input-group-lg` or `.input-group-sm`"></li>
+        </ol>
+    </body>
+</html>