Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Grid): enable zero span columns #5052

Merged
merged 12 commits into from
Jan 20, 2020
Merged

feat(Grid): enable zero span columns #5052

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d58d80a
docs(Grid): add example of hiding columns
zachhardesty7 Jan 15, 2020
595b8b3
feat(grid): add hiding columns with width 0
zachhardesty7 Jan 15, 2020
267b28f
fix(Grid): code impl in wrong location
zachhardesty7 Jan 17, 2020
7354c74
fix(Grid): update to not allow "-1" span
zachhardesty7 Jan 17, 2020
1cdf6df
Merge branch 'master' into grid-zero-span-columns
zachhardesty7 Jan 17, 2020
a778420
fix(Grid): revert unintentional scss changes
zachhardesty7 Jan 17, 2020
0a0902c
Merge branch 'master' into grid-zero-span-columns
joshblack Jan 17, 2020
3549248
chore(components): update grid snapshots
joshblack Jan 17, 2020
c7527e6
Merge branch 'master' into grid-zero-span-columns
joshblack Jan 20, 2020
109551d
Merge branch 'master' into grid-zero-span-columns
joshblack Jan 20, 2020
d2ec0b7
Merge branch 'master' into grid-zero-span-columns
joshblack Jan 20, 2020
e7f03b1
Merge branch 'master' into grid-zero-span-columns
joshblack Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%; }

Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
32 changes: 21 additions & 11 deletions packages/grid/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
```

Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down
Loading