Skip to content

Commit a0752cd

Browse files
zachhardesty7joshblack
zachhardesty7
and
joshblack
committed
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>
1 parent 6897733 commit a0752cd

File tree

4 files changed

+192
-42
lines changed

4 files changed

+192
-42
lines changed

‎packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap

+104
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,15 @@ em {
128128
padding-right: 0.0625rem;
129129
padding-left: 0.0625rem; }
130130
131+
.bx--col-sm-0 {
132+
width: 100%;
133+
padding-right: 1rem;
134+
padding-left: 1rem; }
135+
.bx--row--condensed .bx--col-sm-0,
136+
.bx--grid--condensed .bx--col-sm-0 {
137+
padding-right: 0.0625rem;
138+
padding-left: 0.0625rem; }
139+
131140
.bx--col-sm-1 {
132141
width: 100%;
133142
padding-right: 1rem;
@@ -189,19 +198,26 @@ em {
189198
width: auto;
190199
max-width: 100%; }
191200
201+
.bx--col-sm-0 {
202+
display: none; }
203+
192204
.bx--col-sm-1 {
205+
display: block;
193206
flex: 0 0 25%;
194207
max-width: 25%; }
195208
196209
.bx--col-sm-2 {
210+
display: block;
197211
flex: 0 0 50%;
198212
max-width: 50%; }
199213
200214
.bx--col-sm-3 {
215+
display: block;
201216
flex: 0 0 75%;
202217
max-width: 75%; }
203218
204219
.bx--col-sm-4 {
220+
display: block;
205221
flex: 0 0 100%;
206222
max-width: 100%; }
207223
@@ -217,6 +233,15 @@ em {
217233
.bx--offset-sm-3 {
218234
margin-left: 75%; }
219235
236+
.bx--col-md-0 {
237+
width: 100%;
238+
padding-right: 1rem;
239+
padding-left: 1rem; }
240+
.bx--row--condensed .bx--col-md-0,
241+
.bx--grid--condensed .bx--col-md-0 {
242+
padding-right: 0.0625rem;
243+
padding-left: 0.0625rem; }
244+
220245
.bx--col-md-1 {
221246
width: 100%;
222247
padding-right: 1rem;
@@ -313,28 +338,38 @@ em {
313338
flex: 1 0 0%;
314339
width: auto;
315340
max-width: 100%; }
341+
.bx--col-md-0 {
342+
display: none; }
316343
.bx--col-md-1 {
344+
display: block;
317345
flex: 0 0 12.5%;
318346
max-width: 12.5%; }
319347
.bx--col-md-2 {
348+
display: block;
320349
flex: 0 0 25%;
321350
max-width: 25%; }
322351
.bx--col-md-3 {
352+
display: block;
323353
flex: 0 0 37.5%;
324354
max-width: 37.5%; }
325355
.bx--col-md-4 {
356+
display: block;
326357
flex: 0 0 50%;
327358
max-width: 50%; }
328359
.bx--col-md-5 {
360+
display: block;
329361
flex: 0 0 62.5%;
330362
max-width: 62.5%; }
331363
.bx--col-md-6 {
364+
display: block;
332365
flex: 0 0 75%;
333366
max-width: 75%; }
334367
.bx--col-md-7 {
368+
display: block;
335369
flex: 0 0 87.5%;
336370
max-width: 87.5%; }
337371
.bx--col-md-8 {
372+
display: block;
338373
flex: 0 0 100%;
339374
max-width: 100%; }
340375
.bx--offset-md-0 {
@@ -354,6 +389,15 @@ em {
354389
.bx--offset-md-7 {
355390
margin-left: 87.5%; } }
356391
392+
.bx--col-lg-0 {
393+
width: 100%;
394+
padding-right: 1rem;
395+
padding-left: 1rem; }
396+
.bx--row--condensed .bx--col-lg-0,
397+
.bx--grid--condensed .bx--col-lg-0 {
398+
padding-right: 0.0625rem;
399+
padding-left: 0.0625rem; }
400+
357401
.bx--col-lg-1 {
358402
width: 100%;
359403
padding-right: 1rem;
@@ -486,40 +530,54 @@ em {
486530
flex: 1 0 0%;
487531
width: auto;
488532
max-width: 100%; }
533+
.bx--col-lg-0 {
534+
display: none; }
489535
.bx--col-lg-1 {
536+
display: block;
490537
flex: 0 0 8.33333%;
491538
max-width: 8.33333%; }
492539
.bx--col-lg-2 {
540+
display: block;
493541
flex: 0 0 16.66667%;
494542
max-width: 16.66667%; }
495543
.bx--col-lg-3 {
544+
display: block;
496545
flex: 0 0 25%;
497546
max-width: 25%; }
498547
.bx--col-lg-4 {
548+
display: block;
499549
flex: 0 0 33.33333%;
500550
max-width: 33.33333%; }
501551
.bx--col-lg-5 {
552+
display: block;
502553
flex: 0 0 41.66667%;
503554
max-width: 41.66667%; }
504555
.bx--col-lg-6 {
556+
display: block;
505557
flex: 0 0 50%;
506558
max-width: 50%; }
507559
.bx--col-lg-7 {
560+
display: block;
508561
flex: 0 0 58.33333%;
509562
max-width: 58.33333%; }
510563
.bx--col-lg-8 {
564+
display: block;
511565
flex: 0 0 66.66667%;
512566
max-width: 66.66667%; }
513567
.bx--col-lg-9 {
568+
display: block;
514569
flex: 0 0 75%;
515570
max-width: 75%; }
516571
.bx--col-lg-10 {
572+
display: block;
517573
flex: 0 0 83.33333%;
518574
max-width: 83.33333%; }
519575
.bx--col-lg-11 {
576+
display: block;
520577
flex: 0 0 91.66667%;
521578
max-width: 91.66667%; }
522579
.bx--col-lg-12 {
580+
display: block;
523581
flex: 0 0 100%;
524582
max-width: 100%; }
525583
.bx--offset-lg-0 {
@@ -547,6 +605,15 @@ em {
547605
.bx--offset-lg-11 {
548606
margin-left: 91.66667%; } }
549607
608+
.bx--col-xlg-0 {
609+
width: 100%;
610+
padding-right: 1rem;
611+
padding-left: 1rem; }
612+
.bx--row--condensed .bx--col-xlg-0,
613+
.bx--grid--condensed .bx--col-xlg-0 {
614+
padding-right: 0.0625rem;
615+
padding-left: 0.0625rem; }
616+
550617
.bx--col-xlg-1 {
551618
width: 100%;
552619
padding-right: 1rem;
@@ -679,40 +746,54 @@ em {
679746
flex: 1 0 0%;
680747
width: auto;
681748
max-width: 100%; }
749+
.bx--col-xlg-0 {
750+
display: none; }
682751
.bx--col-xlg-1 {
752+
display: block;
683753
flex: 0 0 8.33333%;
684754
max-width: 8.33333%; }
685755
.bx--col-xlg-2 {
756+
display: block;
686757
flex: 0 0 16.66667%;
687758
max-width: 16.66667%; }
688759
.bx--col-xlg-3 {
760+
display: block;
689761
flex: 0 0 25%;
690762
max-width: 25%; }
691763
.bx--col-xlg-4 {
764+
display: block;
692765
flex: 0 0 33.33333%;
693766
max-width: 33.33333%; }
694767
.bx--col-xlg-5 {
768+
display: block;
695769
flex: 0 0 41.66667%;
696770
max-width: 41.66667%; }
697771
.bx--col-xlg-6 {
772+
display: block;
698773
flex: 0 0 50%;
699774
max-width: 50%; }
700775
.bx--col-xlg-7 {
776+
display: block;
701777
flex: 0 0 58.33333%;
702778
max-width: 58.33333%; }
703779
.bx--col-xlg-8 {
780+
display: block;
704781
flex: 0 0 66.66667%;
705782
max-width: 66.66667%; }
706783
.bx--col-xlg-9 {
784+
display: block;
707785
flex: 0 0 75%;
708786
max-width: 75%; }
709787
.bx--col-xlg-10 {
788+
display: block;
710789
flex: 0 0 83.33333%;
711790
max-width: 83.33333%; }
712791
.bx--col-xlg-11 {
792+
display: block;
713793
flex: 0 0 91.66667%;
714794
max-width: 91.66667%; }
715795
.bx--col-xlg-12 {
796+
display: block;
716797
flex: 0 0 100%;
717798
max-width: 100%; }
718799
.bx--offset-xlg-0 {
@@ -740,6 +821,15 @@ em {
740821
.bx--offset-xlg-11 {
741822
margin-left: 91.66667%; } }
742823
824+
.bx--col-max-0 {
825+
width: 100%;
826+
padding-right: 1rem;
827+
padding-left: 1rem; }
828+
.bx--row--condensed .bx--col-max-0,
829+
.bx--grid--condensed .bx--col-max-0 {
830+
padding-right: 0.0625rem;
831+
padding-left: 0.0625rem; }
832+
743833
.bx--col-max-1 {
744834
width: 100%;
745835
padding-right: 1rem;
@@ -872,40 +962,54 @@ em {
872962
flex: 1 0 0%;
873963
width: auto;
874964
max-width: 100%; }
965+
.bx--col-max-0 {
966+
display: none; }
875967
.bx--col-max-1 {
968+
display: block;
876969
flex: 0 0 8.33333%;
877970
max-width: 8.33333%; }
878971
.bx--col-max-2 {
972+
display: block;
879973
flex: 0 0 16.66667%;
880974
max-width: 16.66667%; }
881975
.bx--col-max-3 {
976+
display: block;
882977
flex: 0 0 25%;
883978
max-width: 25%; }
884979
.bx--col-max-4 {
980+
display: block;
885981
flex: 0 0 33.33333%;
886982
max-width: 33.33333%; }
887983
.bx--col-max-5 {
984+
display: block;
888985
flex: 0 0 41.66667%;
889986
max-width: 41.66667%; }
890987
.bx--col-max-6 {
988+
display: block;
891989
flex: 0 0 50%;
892990
max-width: 50%; }
893991
.bx--col-max-7 {
992+
display: block;
894993
flex: 0 0 58.33333%;
895994
max-width: 58.33333%; }
896995
.bx--col-max-8 {
996+
display: block;
897997
flex: 0 0 66.66667%;
898998
max-width: 66.66667%; }
899999
.bx--col-max-9 {
1000+
display: block;
9001001
flex: 0 0 75%;
9011002
max-width: 75%; }
9021003
.bx--col-max-10 {
1004+
display: block;
9031005
flex: 0 0 83.33333%;
9041006
max-width: 83.33333%; }
9051007
.bx--col-max-11 {
1008+
display: block;
9061009
flex: 0 0 91.66667%;
9071010
max-width: 91.66667%; }
9081011
.bx--col-max-12 {
1012+
display: block;
9091013
flex: 0 0 100%;
9101014
max-width: 100%; }
9111015
.bx--offset-max-0 {

‎packages/grid/docs/sass.md

+21-11
Original file line numberDiff line numberDiff line change
@@ -116,18 +116,25 @@ yet.
116116

117117
### ❌carbon--make-col [mixin]
118118

119-
Define the width of the column for a given span and column count.
119+
Define the width of the column for a given span and column count. A width of 0
120+
will hide the column entirely.
120121

121122
<details>
122123
<summary>Source code</summary>
123124

124125
```scss
125126
@mixin carbon--make-col($span, $columns) {
126-
flex: 0 0 percentage($span / $columns);
127-
// Add a `max-width` to ensure content within each column does not blow out
128-
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
129-
// do not appear to require this.
130-
max-width: percentage($span / $columns);
127+
@if $span == 0 {
128+
display: none;
129+
} @else {
130+
// Explicitly write `display: block` to override
131+
display: block;
132+
flex: 0 0 percentage($span / $columns);
133+
// Add a `max-width` to ensure content within each column does not blow out
134+
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
135+
// do not appear to require this.
136+
max-width: percentage($span / $columns);
137+
}
131138
}
132139
```
133140

@@ -196,7 +203,7 @@ Output the CSS required for all the columns in a given grid system.
196203
$columns: map-get(map-get($breakpoints, $breakpoint), columns);
197204

198205
// Allow columns to stretch full width below their breakpoints
199-
@for $i from 1 through $columns {
206+
@for $i from 0 through $columns {
200207
.#{$prefix}--col#{$infix}-#{$i} {
201208
@include carbon--make-col-ready();
202209
}
@@ -224,7 +231,7 @@ Output the CSS required for all the columns in a given grid system.
224231
max-width: 100%;
225232
}
226233

227-
@for $i from 1 through $columns {
234+
@for $i from 0 through $columns {
228235
.#{$prefix}--col#{$infix}-#{$i} {
229236
@include carbon--make-col($i, $columns);
230237
}
@@ -559,9 +566,12 @@ Generate the CSS for a grid for the given breakpoints and gutters
559566
@include carbon--make-row();
560567
}
561568

562-
.#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
563-
padding-top: $condensed-gutter / 2;
564-
padding-bottom: $condensed-gutter / 2;
569+
.#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
570+
margin-bottom: $condensed-gutter;
571+
}
572+
573+
.#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
574+
margin-top: $condensed-gutter;
565575
}
566576

567577
@include carbon--make-grid-columns($breakpoints, $grid-gutter);

0 commit comments

Comments
 (0)