Update grid to only print an expander if the column's width is equal …

…to the total column count
foundation · Mar 21, 2016 · 8bf3618 · 8bf3618
1 parent 97fde35
commit 8bf3618
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 deletions.
diff --git a/lib/makeColumn.js b/lib/makeColumn.js
@@ -23,8 +23,11 @@ module.exports = function(col) {
   }
 
   // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns
-  classes.push(format('small-%s', $(col).attr('small') || this.columnCount));
-  classes.push(format('large-%s', $(col).attr('large') || $(col).attr('small') || Math.floor(this.columnCount/colCount)));
+  var smallSize = $(col).attr('small') || this.columnCount;
+  var largeSize = $(col).attr('large') || $(col).attr('small') || Math.floor(this.columnCount / colCount);
+
+  classes.push(format('small-%s', smallSize));
+  classes.push(format('large-%s', largeSize));
 
   // Add the basic "columns" class also
   classes.push('columns');
@@ -34,17 +37,17 @@ module.exports = function(col) {
   if (!$(col).next(this.components.columns).length) classes.push('last');
 
   // If the column contains a nested row, the .expander class should not be used
-  if (!col.find('.row, row').length) {
-    expander = '<th class="expander"></th>';
+  // The == on the first check is because we're comparing a string pulled from $.attr() to a number
+  if (largeSize == this.columnCount && col.find('.row, row').length === 0) {
+    expander = '\n<th class="expander"></th>';
   }
 
   // Final HTML output
   output = multiline(function() {/*
     <th class="%s">
       <table>
         <tr>
-          <th>%s</th>
-          %s
+          <th>%s</th>%s
         </tr>
       </table>
     </th>

diff --git a/test/grid.js b/test/grid.js
@@ -85,15 +85,13 @@ describe('Grid', () => {
         <table>
           <tr>
             <th>One</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
       <th class="small-12 large-6 columns last">
         <table>
           <tr>
             <th>Two</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
@@ -113,23 +111,20 @@ describe('Grid', () => {
         <table>
           <tr>
             <th>One</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
       <th class="small-12 large-4 columns">
         <table>
           <tr>
             <th>Two</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
       <th class="small-12 large-4 columns last">
         <table>
           <tr>
             <th>Three</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
@@ -165,15 +160,13 @@ describe('Grid', () => {
         <table>
           <tr>
             <th>One</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
       <th class="small-8 large-8 columns last">
         <table>
           <tr>
             <th>Two</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
@@ -192,15 +185,13 @@ describe('Grid', () => {
         <table>
           <tr>
             <th>One</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
       <th class="small-12 large-8 columns last">
         <table>
           <tr>
             <th>Two</th>
-            <th class="expander"></th>
           </tr>
         </table>
       </th>
@@ -225,7 +216,6 @@ describe('Grid', () => {
                       </tbody>
                     </table>
                   </th>
-
                 </tr>
               </table>
             </th>