Skip to content

Commit 9749b68

Browse files
adamraideradamraider
authored
fix(grid): add some utils (#77)
* fix(grid): add some utils * make story prettier * docs(button): better examples
1 parent 175a640 commit 9749b68

File tree

4 files changed

+118
-43
lines changed

4 files changed

+118
-43
lines changed

‎docs/components/grid.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ Ray features three primary breakpoints: desktop, tablet, and mobile. Our grid sy
1616
<div class="ray-grid__inner">
1717
<div class="ray-grid__cell">I'm a cell</div>
1818
<div class="ray-grid__cell--span-4">I'm another cell that is 4 columns</div>
19+
<div class="ray-grid__cell--span-full">
20+
I'm another cell that will always span full width
21+
</div>
1922
</div>
2023
</div>
2124
```
@@ -24,7 +27,9 @@ Ray features three primary breakpoints: desktop, tablet, and mobile. Our grid sy
2427
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
2528
| ray-grid | Mandatory, for the layout grid element |
2629
| ray-grid--align-<left\|right> | Optional, align the grid to the left or right side of the container (default: center) |
30+
| ray-grid--justify-<left\|center\|right> | Optional, align the cells of the grid (default: left, does not affect nested grids |
2731
| ray-grid\_\_inner | Mandatory, for wrapping grid cells (_must_ be child of `.ray-grid`) |
2832
| ray-grid\_\_cell | Mandatory, for the layout grid cell |
2933
| ray-grid\_\_cell--align-<top\|middle\|bottom> | Optional, align the cell to the top, middle, or center of the containing grid |
3034
| ray-grid\_\_cell--span-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE> | Optional, specifies the number of columns the cell spans on a type of device (desktop, tablet, phone) |
35+
| ray-grid\_\_cell--span-full | Optional, specify that the cell should span the full width of the grid |

‎packages/core/src/global/material-grid/mdc-layout-grid.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@
7777
$gutter
7878
);
7979

80+
&--span-full {
81+
$max-columns: map-get($mdc-layout-grid-columns, $size);
82+
83+
@include mdc-layout-grid-cell($size, $max-columns, $gutter);
84+
}
85+
8086
@for $span
8187
from 1
8288
through map-get($mdc-layout-grid-columns, $upper-breakpoint)
@@ -123,5 +129,23 @@
123129
margin-right: 0;
124130
margin-left: auto;
125131
}
132+
133+
.#{$mdc-prefix}grid--justify-left {
134+
> .#{$mdc-prefix}grid__inner {
135+
justify-content: left;
136+
}
137+
}
138+
139+
.#{$mdc-prefix}grid--justify-center {
140+
> .#{$mdc-prefix}grid__inner {
141+
justify-content: center;
142+
}
143+
}
144+
145+
.#{$mdc-prefix}grid--justify-right {
146+
> .#{$mdc-prefix}grid__inner {
147+
justify-content: right;
148+
}
149+
}
126150
// postcss-bem-linter: end
127151
}

‎packages/core/stories/grid.stories.js

Lines changed: 59 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,58 @@ import React from 'react';
22
import { storiesOf } from '@storybook/react';
33
import { range } from 'lodash';
44

5+
/* eslint-disable react/prop-types */
6+
7+
function SampleContent(props) {
8+
return (
9+
<div
10+
{...props}
11+
style={{
12+
minHeight: '4vh',
13+
backgroundColor: 'hsl(255, 100%, 75%)'
14+
}}
15+
/>
16+
);
17+
}
18+
19+
function RayGridInnerWithBackground(props) {
20+
return (
21+
<div
22+
{...props}
23+
className="ray-grid__inner"
24+
style={{ backgroundColor: 'hsl(0, 100%, 75%)', ...props.style }}
25+
/>
26+
);
27+
}
28+
529
storiesOf('Grid', module)
630
.add('default', () => (
731
<div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
832
<div className="ray-grid">
9-
<div
10-
className="ray-grid__inner"
11-
style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
12-
>
33+
<RayGridInnerWithBackground>
1334
{range(12).map(n => (
14-
<div className="ray-grid__cell--span-1" key={n}>
15-
<div
16-
style={{
17-
minHeight: '4vh',
18-
backgroundColor: 'hsl(255, 100%, 75%)'
19-
}}
20-
>
21-
{n + 1}
22-
</div>
35+
<div className="ray-grid__cell" key={n}>
36+
<SampleContent>{n + 1}</SampleContent>
2337
</div>
2438
))}
25-
</div>
39+
<div className="ray-grid__cell">
40+
<div
41+
style={{
42+
minHeight: '4vh',
43+
backgroundColor: 'hsl(255, 100%, 75%)'
44+
}}
45+
>
46+
yo
47+
</div>
48+
</div>
49+
</RayGridInnerWithBackground>
2650
</div>
2751
</div>
2852
))
2953
.add('overlap', () => (
3054
<div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
3155
<div className="ray-grid">
32-
<div
33-
className="ray-grid__inner"
34-
style={{
35-
position: 'relative'
36-
}}
37-
>
56+
<RayGridInnerWithBackground>
3857
<div
3958
className="ray-grid__cell--span-4"
4059
style={{
@@ -49,7 +68,8 @@ storiesOf('Grid', module)
4968
<div
5069
style={{
5170
backgroundColor: '#fff',
52-
padding: '1rem'
71+
padding: '1rem',
72+
width: '100%'
5373
}}
5474
>
5575
<pre
@@ -85,7 +105,24 @@ storiesOf('Grid', module)
85105
}}
86106
/>
87107
</div>
88-
</div>
108+
</RayGridInnerWithBackground>
109+
</div>
110+
</div>
111+
))
112+
.add('sample utils', () => (
113+
<div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
114+
<div className="ray-grid ray-grid--justify-center">
115+
<RayGridInnerWithBackground>
116+
<div className="ray-grid__cell">
117+
<SampleContent />
118+
</div>
119+
<div className="ray-grid__cell--span-full">
120+
<SampleContent />
121+
</div>
122+
<div className="ray-grid__cell">
123+
<SampleContent />
124+
</div>
125+
</RayGridInnerWithBackground>
89126
</div>
90127
</div>
91128
));

‎packages/docs-app/src/components/GridDocumentation/index.js

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,46 @@ function GridDocumentation() {
2424
);
2525
}
2626

27+
function SampleContent(props) {
28+
return (
29+
<div
30+
{...props}
31+
style={{
32+
minHeight: '4vh',
33+
backgroundColor: 'hsl(255, 100%, 75%)'
34+
}}
35+
/>
36+
);
37+
}
38+
39+
function RayGridInnerWithBackground(props) {
40+
return (
41+
<div
42+
{...props}
43+
className="ray-grid__inner"
44+
style={{ backgroundColor: 'hsl(0, 100%, 75%)', ...props.style }}
45+
/>
46+
);
47+
}
2748
function GridExample() {
2849
return (
2950
<div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
3051
<div className="ray-grid">
31-
<div
32-
className="ray-grid__inner"
33-
style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
34-
>
52+
<RayGridInnerWithBackground>
3553
{range(12).map(n => (
3654
<div className="ray-grid__cell--span-1" key={n}>
37-
<div
38-
style={{
39-
minHeight: '4vh',
40-
backgroundColor: 'hsl(255, 100%, 75%)'
41-
}}
42-
>
43-
span-1
44-
</div>
55+
<SampleContent>cell</SampleContent>
4556
</div>
4657
))}
4758
<div className="ray-grid__cell">
48-
<div
49-
style={{
50-
minHeight: '4vh',
51-
backgroundColor: 'hsl(255, 100%, 75%)'
52-
}}
53-
>
54-
span
55-
</div>
59+
<SampleContent>cell</SampleContent>
60+
</div>
61+
<div className="ray-grid__cell--span-full">
62+
<SampleContent>
63+
{"I'm a cell that will always span full width"}
64+
</SampleContent>
5665
</div>
57-
</div>
66+
</RayGridInnerWithBackground>
5867
</div>
5968
</div>
6069
);

0 commit comments

Comments
 (0)