feat(grid): add zero span columns (#5052)

* docs(Grid): add example of hiding columns * feat(grid): add hiding columns with width 0 Adds functionality requested in (#2435) with more convenient syntax. Originally from PR #4894. * fix(Grid): code impl in wrong location * fix(Grid): update to not allow "-1" span * fix(Grid): revert unintentional scss changes * chore(components): update grid snapshots Co-authored-by: Josh Black <josh@josh.black>
carbon-design-system · Jan 20, 2020 · a0752cd · a0752cd
1 parent 6897733
commit a0752cd
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 42 deletions.
diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -128,6 +128,15 @@ em {
     padding-right: 0.0625rem;
     padding-left: 0.0625rem; }
 
+.bx--col-sm-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-sm-0,
+  .bx--grid--condensed .bx--col-sm-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-sm-1 {
   width: 100%;
   padding-right: 1rem;
@@ -189,19 +198,26 @@ em {
   width: auto;
   max-width: 100%; }
 
+.bx--col-sm-0 {
+  display: none; }
+
 .bx--col-sm-1 {
+  display: block;
   flex: 0 0 25%;
   max-width: 25%; }
 
 .bx--col-sm-2 {
+  display: block;
   flex: 0 0 50%;
   max-width: 50%; }
 
 .bx--col-sm-3 {
+  display: block;
   flex: 0 0 75%;
   max-width: 75%; }
 
 .bx--col-sm-4 {
+  display: block;
   flex: 0 0 100%;
   max-width: 100%; }
 
@@ -217,6 +233,15 @@ em {
 .bx--offset-sm-3 {
   margin-left: 75%; }
 
+.bx--col-md-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-md-0,
+  .bx--grid--condensed .bx--col-md-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-md-1 {
   width: 100%;
   padding-right: 1rem;
@@ -313,28 +338,38 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-md-0 {
+    display: none; }
   .bx--col-md-1 {
+    display: block;
     flex: 0 0 12.5%;
     max-width: 12.5%; }
   .bx--col-md-2 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-md-3 {
+    display: block;
     flex: 0 0 37.5%;
     max-width: 37.5%; }
   .bx--col-md-4 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-md-5 {
+    display: block;
     flex: 0 0 62.5%;
     max-width: 62.5%; }
   .bx--col-md-6 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-md-7 {
+    display: block;
     flex: 0 0 87.5%;
     max-width: 87.5%; }
   .bx--col-md-8 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-md-0 {
@@ -354,6 +389,15 @@ em {
   .bx--offset-md-7 {
     margin-left: 87.5%; } }
 
+.bx--col-lg-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-lg-0,
+  .bx--grid--condensed .bx--col-lg-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-lg-1 {
   width: 100%;
   padding-right: 1rem;
@@ -486,40 +530,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-lg-0 {
+    display: none; }
   .bx--col-lg-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-lg-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-lg-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-lg-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-lg-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-lg-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-lg-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-lg-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-lg-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-lg-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-lg-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-lg-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-lg-0 {
@@ -547,6 +605,15 @@ em {
   .bx--offset-lg-11 {
     margin-left: 91.66667%; } }
 
+.bx--col-xlg-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-xlg-0,
+  .bx--grid--condensed .bx--col-xlg-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-xlg-1 {
   width: 100%;
   padding-right: 1rem;
@@ -679,40 +746,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-xlg-0 {
+    display: none; }
   .bx--col-xlg-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-xlg-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-xlg-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-xlg-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-xlg-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-xlg-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-xlg-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-xlg-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-xlg-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-xlg-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-xlg-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-xlg-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-xlg-0 {
@@ -740,6 +821,15 @@ em {
   .bx--offset-xlg-11 {
     margin-left: 91.66667%; } }
 
+.bx--col-max-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-max-0,
+  .bx--grid--condensed .bx--col-max-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-max-1 {
   width: 100%;
   padding-right: 1rem;
@@ -872,40 +962,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-max-0 {
+    display: none; }
   .bx--col-max-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-max-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-max-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-max-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-max-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-max-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-max-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-max-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-max-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-max-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-max-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-max-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-max-0 {

diff --git a/packages/grid/docs/sass.md b/packages/grid/docs/sass.md
@@ -116,18 +116,25 @@ yet.
 
 ### ❌carbon--make-col [mixin]
 
-Define the width of the column for a given span and column count.
+Define the width of the column for a given span and column count. A width of 0
+will hide the column entirely.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
 @mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly write `display: block` to override
+    display: block;
+    flex: 0 0 percentage($span / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($span / $columns);
+  }
 }
 ```
 
@@ -196,7 +203,7 @@ Output the CSS required for all the columns in a given grid system.
     $columns: map-get(map-get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
+    @for $i from 0 through $columns {
       .#{$prefix}--col#{$infix}-#{$i} {
         @include carbon--make-col-ready();
       }
@@ -224,7 +231,7 @@ Output the CSS required for all the columns in a given grid system.
         max-width: 100%;
       }
 
-      @for $i from 1 through $columns {
+      @for $i from 0 through $columns {
         .#{$prefix}--col#{$infix}-#{$i} {
           @include carbon--make-col($i, $columns);
         }
@@ -559,9 +566,12 @@ Generate the CSS for a grid for the given breakpoints and gutters
     @include carbon--make-row();
   }
 
-  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+  .#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
+    margin-bottom: $condensed-gutter;
+  }
+
+  .#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
+    margin-top: $condensed-gutter;
   }
 
   @include carbon--make-grid-columns($breakpoints, $grid-gutter);