Adapt to table changes (#455)

Port E027
twbs · Aug 19, 2019 · c499d3a · c499d3a
1 parent f0e63c6
commit c499d3a
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/src/bootlint.js b/src/bootlint.js
@@ -824,14 +824,22 @@ var LocationIndex = _location.LocationIndex;
             reporter('`.card-title` must have a `.card` ancestor.', badCardTitle);
         }
     });
-    /*
     addLinter('E027', function lintTableResponsive($, reporter) {
-        var badStructure = $('.table.table-responsive, table.table-responsive');
+
+        var tableSelectors = ['.table', 'table'];
+        var badStructureSelectors = [];
+
+        for (var i = 0; i < tableSelectors.length; i++) {
+            for (var j = 0; j < NUM2SCREEN.length; j++) {
+                badStructureSelectors.push(tableSelectors[i] + '.table-responsive-' + NUM2SCREEN[j]);
+            }
+        }
+
+        var badStructure = $(badStructureSelectors.join(','));
         if (badStructure.length) {
-            reporter('`.table-responsive` is supposed to be used on the table\'s parent wrapper `<div>`, not on the table itself', badStructure);
+            reporter('`.table-responsive*` is supposed to be used on the table\'s parent wrapper `<div>`, not on the table itself', badStructure);
         }
     });
-    */
     /*
     addLinter('E028', function lintFormControlFeedbackWithoutHasFeedback($, reporter) {
         var ancestorsMissingClasses = $('.form-control-feedback').filter(function () {

diff --git a/test/bootlint_test.js b/test/bootlint_test.js
@@ -428,20 +428,18 @@ exports.bootlint = {
         );
         test.done();
     },
-    /*
     '.table-responsive on the table itself': function (test) {
         test.expect(2);
         test.deepEqual(lintHtml(utf8Fixture('table/responsive-valid.html')),
             [],
             'should not complain when .table-responsive is used on the table\'s wrapper div.'
         );
         test.deepEqual(lintHtml(utf8Fixture('table/responsive-incorrect.html')),
-            ['`.table-responsive` is supposed to be used on the table\'s parent wrapper `<div>`, not on the table itself'],
+            ['`.table-responsive*` is supposed to be used on the table\'s parent wrapper `<div>`, not on the table itself'],
             'should complain when .table-responsive is used on the table itself.'
         );
         test.done();
     },
-    */
     'redundant grid column classes': function (test) {
         test.expect(2);
         test.deepEqual(lintHtml(utf8Fixture('grid/cols-not-redundant.html')),

diff --git a/..._fixtures/table/responsive-incorrect.html → .../fixtures/table/responsive-incorrect.html b/..._fixtures/table/responsive-incorrect.html → .../fixtures/table/responsive-incorrect.html
@@ -17,7 +17,7 @@
         <script src="../generic-qunit.js"></script>
     </head>
     <body>
-        <table class="table table-responsive">
+        <table class="table table-responsive-xl">
             <tbody>
                 <tr>
                     <td>Cell</td>
@@ -27,7 +27,7 @@
 
         <div id="qunit"></div>
         <ol id="bootlint">
-            <li data-lint="`.table-responsive` is supposed to be used on the table's parent wrapper `<div>`, not on the table itself"></li>
+            <li data-lint="`.table-responsive*` is supposed to be used on the table's parent wrapper `<div>`, not on the table itself"></li>
         </ol>
     </body>
 </html>
diff --git a/..._old_fixtures/table/responsive-valid.html → test/fixtures/table/responsive-valid.html b/..._old_fixtures/table/responsive-valid.html → test/fixtures/table/responsive-valid.html
@@ -27,6 +27,36 @@
             </table>
         </div>
 
+        <div class="table-responsive-sm">
+            <table class="table">
+                <tbody>
+                    <tr>
+                        <td>Cell</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="table-responsive-md">
+            <table class="table">
+                <tbody>
+                    <tr>
+                        <td>Cell</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="table-responsive-lg">
+            <table class="table">
+                <tbody>
+                    <tr>
+                        <td>Cell</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
         <div id="qunit"></div>
         <ol id="bootlint"></ol>
     </body>