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 4 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
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
77 changes: 53 additions & 24 deletions packages/grid/examples/preview/src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function App() {
)
),
Prism.languages.javascript,
'javscript'
'javascript'
),
}}
/>
Expand Down Expand Up @@ -156,6 +156,37 @@ const sections = [
</div>
),
},
{
name: 'Hide column per breakpoint',
description:
'Use the column helpers to specify a column span of 0 at different widths',
content: () => (
<div className="bx--grid">
<div className="bx--row">
<div className="bx--col-sm-1 bx--col-md-2 bx--col-lg-6">
<div className="outside">
<div className="inside">Never Hidden</div>
</div>
</div>
<div className="bx--col-sm-2 bx--col-md-0 bx--col-lg-6">
<div className="outside">
<div className="inside">Hidden on Medium Screens</div>
</div>
</div>
<div className="bx--col-sm-0 bx--col-md-3 bx--col-lg-4">
<div className="outside">
<div className="inside">Hidden on Small Screens</div>
</div>
</div>
<div className="bx--col-sm-1 bx--col-md-3 bx--col-lg-0">
<div className="outside">
<div className="inside">Hidden on Large Screens</div>
</div>
</div>
</div>
</div>
),
},
],
},
{
Expand Down Expand Up @@ -322,7 +353,7 @@ const sections = [
{
id: 'no-gutters',
name: 'No gutters',
desription:
description:
'Sometimes it is useful to have no gutters in a layout, particularly for fluid layouts. You can specify no gutters on a column-by-column basis or for all columns in a row.',
examples: [
{
Expand Down Expand Up @@ -488,7 +519,7 @@ const sections = [
id: 'hang',
name: 'Hanging content',
description:
'When working with no gutters, it is helpful to keep content inside of the columns aligned with other rows in the same grid. In order to do this, we use a combinated of no-gutter and hang classes.',
'When working with no gutters, it is helpful to keep content inside of the columns aligned with other rows in the same grid. In order to do this, we use a combination of no-gutter and hang classes.',
examples: [
{
name: 'Hanging text',
Expand Down Expand Up @@ -757,35 +788,33 @@ const sections = [
id: 'full-bleed',
name: 'Full bleed',
description:
'When wanting background colors to go edge-to-edge, you will need to create a wrapping node around your grid with the color that you are looking to apply.',
'When wanting background colors to go edge-to-edge, you can apply your desired color directly to the grid',
examples: [
{
name: 'Usage',
description:
'In this example, we create an outer div and give it the class name bleed which we then style with a background color.',
'In this example, we give the grid element the class name "bleed" which we then style with a background color.',
content: () => (
<div className="bleed">
<div className="bx--grid">
<div className="bx--row">
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
<div className="bx--grid bleed">
<div className="bx--row">
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
</div>
<div className="bx--col">
<div className="outside">
<div className="inside">1</div>
</div>
</div>
</div>
Expand Down
30 changes: 20 additions & 10 deletions packages/grid/scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,23 @@
}

/// Define the width of the column for a given span and column count.
/// A width of 0 will hide the column entirely.
/// @param {Number} $span - The number of columns covered
/// @param {Number} $columns - The total number of columns available
/// @access private
/// @group @carbon/grid
@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 include `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);
}
}

/// Create a column offset for a given span and column count.
Expand Down Expand Up @@ -88,7 +95,7 @@
$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 @@ -116,7 +123,7 @@
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 @@ -320,9 +327,12 @@ $carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1), (1, 2));
@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) {
zachhardesty7 marked this conversation as resolved.
Show resolved Hide resolved
margin-bottom: $condensed-gutter;
}

.#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
margin-top: $condensed-gutter;
}

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