Skip to content

Commit 2409f05

Browse files
exahexah
committed
💥 Rename Grid → FlexGrid 
1 parent 7bde336 commit 2409f05

File tree

8 files changed

+248
-241
lines changed

8 files changed

+248
-241
lines changed

‎src/feed/about.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Feed } from './index'
1515

1616
## Description
1717

18-
Masonry-like grid component, created with [Grid](#/grid).
18+
Masonry-like grid component, created with [FlexGrid](#/flex-grid).
1919

2020
## Usage
2121

‎src/feed/index.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
22
import { withTheme } from 'emotion-theming'
33
import { compose } from '@exah/utils'
44
import { withCurrentMedia } from '../current-media-provider'
5-
import { Grid, GridItem, GridContent } from '../grid'
5+
import { FlexGrid, FlexGridItem, FlexGridContent } from '../flex-grid'
66

77
const groupChildren = (children = [], length = 3) => {
88
const placeholder = [ ...Array(length) ].map(() => [])
@@ -62,13 +62,13 @@ class FeedContainer extends PureComponent {
6262
: childrenArr
6363

6464
return (
65-
<Grid {...rest}>
65+
<FlexGrid {...rest}>
6666
{childrenGroups.map((child, index) => (
67-
<GridItem key={`feed-item-${index}`} {...rest}>
67+
<FlexGridItem key={`feed-item-${index}`} {...rest}>
6868
{child}
69-
</GridItem>
69+
</FlexGridItem>
7070
))}
71-
</Grid>
71+
</FlexGrid>
7272
)
7373
}
7474
}
@@ -78,9 +78,9 @@ const Feed = compose(
7878
withTheme
7979
)(FeedContainer)
8080

81-
Feed.Item = GridContent
81+
Feed.Item = FlexGridContent
8282

8383
export {
8484
Feed,
85-
GridContent as FeedItem
85+
FlexGridContent as FeedItem
8686
}

‎src/flex-grid/about.mdx

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
---
2+
name: FlexGrid
3+
route: /flex-grid
4+
order: -5
5+
---
6+
7+
import { Playground } from 'docz'
8+
import { ThemeProvider } from 'emotion-theming'
9+
import { Box } from '../box'
10+
import { FlexGrid } from './index'
11+
12+
13+
# FlexGrid
14+
15+
## Description
16+
17+
FlexGrid component created with [`FlexBox`](#/flex-box).
18+
19+
- Default to `12` columns. Must be defined in `theme.grid`
20+
- Item size can be set with `col` or `size` prop in `FlexGrid.Item` component
21+
- Space between items can be set with `space`, `spacex` and `spacey` props
22+
23+
Components:
24+
25+
- `FlexGrid` — Container component. Control space between items with props:
26+
+ Possible values can be set in `theme.space`, see [space docs](https://github.com/exah/pss/blob/master/docs/api.md#space)
27+
+ `space` — setting horizontal and vertical space
28+
+ `spacex` — setting horizontal space
29+
+ `spacey` — setting vertical space
30+
+ `spaceContent` — apply space to `FlexGrid.Content` instead of `FlexGrid.Item`
31+
- `FlexGrid.Item` — Item / column component, size can be set with props:
32+
+ `col` — Number in range `1...theme.grid`, result is precentage size. (`col / theme.grid`, i.e. `3 / 12 = 25%`)
33+
+ `size` — Number from `0...1`, result is percentage (`0.5` is `50%`)
34+
- `FlexGrid.Content` — Content wrapper same as [`Box`](#/box)
35+
36+
## Usage
37+
38+
```js
39+
import { FlexGrid } from 'pss-components'
40+
```
41+
42+
```js
43+
<ThemeProvider theme={{ grid: 12 }}>
44+
<FlexGrid space={2}>
45+
<FlexGrid.Item col={6}>
46+
<FlexGrid.Content>
47+
Content
48+
</FlexGrid.Content>
49+
</FlexGrid.Item>
50+
<FlexGrid.Item col={4}>
51+
<FlexGrid.Content>
52+
Content
53+
</FlexGrid.Content>
54+
</FlexGrid.Item>
55+
<FlexGrid.Item col={2}>
56+
<FlexGrid.Content>
57+
Content
58+
</FlexGrid.Content>
59+
</FlexGrid.Item>
60+
</FlexGrid>
61+
</ThemeProvider>
62+
```
63+
64+
65+
## Examples
66+
67+
### Basic
68+
69+
<Playground>
70+
<FlexGrid spacex={1}>
71+
<FlexGrid.Item col={2}>
72+
<FlexGrid.Content bg='gray.0'>
73+
2
74+
</FlexGrid.Content>
75+
</FlexGrid.Item>
76+
<FlexGrid.Item col={2}>
77+
<FlexGrid.Content bg='gray.0'>
78+
2
79+
</FlexGrid.Content>
80+
</FlexGrid.Item>
81+
<FlexGrid.Item col={2}>
82+
<FlexGrid.Content bg='gray.0'>
83+
2
84+
</FlexGrid.Content>
85+
</FlexGrid.Item>
86+
<FlexGrid.Item col={2}>
87+
<FlexGrid.Content bg='gray.0'>
88+
2
89+
</FlexGrid.Content>
90+
</FlexGrid.Item>
91+
<FlexGrid.Item col={2}>
92+
<FlexGrid.Content bg='gray.0'>
93+
2
94+
</FlexGrid.Content>
95+
</FlexGrid.Item>
96+
<FlexGrid.Item col={2}>
97+
<FlexGrid.Content bg='gray.0'>
98+
2
99+
</FlexGrid.Content>
100+
</FlexGrid.Item>
101+
</FlexGrid>
102+
</Playground>
103+
104+
### Vertical and horizontal space between items
105+
106+
<Playground>
107+
<ThemeProvider theme={{ grid: 12 }}>
108+
<FlexGrid space={1}>
109+
<FlexGrid.Item col={1}>
110+
<FlexGrid.Content bg='gray.0'>
111+
1
112+
</FlexGrid.Content>
113+
</FlexGrid.Item>
114+
<FlexGrid.Item col={2}>
115+
<FlexGrid.Content bg='gray.0'>
116+
2
117+
</FlexGrid.Content>
118+
</FlexGrid.Item>
119+
<FlexGrid.Item col={3}>
120+
<FlexGrid.Content bg='gray.0'>
121+
3
122+
</FlexGrid.Content>
123+
</FlexGrid.Item>
124+
<FlexGrid.Item col={6}>
125+
<FlexGrid.Content bg='gray.0'>
126+
6
127+
</FlexGrid.Content>
128+
</FlexGrid.Item>
129+
<FlexGrid.Item col={12}>
130+
<FlexGrid.Content bg='gray.0'>
131+
12
132+
</FlexGrid.Content>
133+
</FlexGrid.Item>
134+
<FlexGrid.Item col={4}>
135+
<FlexGrid.Content bg='gray.0'>
136+
4
137+
</FlexGrid.Content>
138+
</FlexGrid.Item>
139+
<FlexGrid.Item col={4}>
140+
<FlexGrid.Content bg='gray.0'>
141+
4
142+
</FlexGrid.Content>
143+
</FlexGrid.Item>
144+
<FlexGrid.Item col={4}>
145+
<FlexGrid.Content bg='gray.0'>
146+
4
147+
</FlexGrid.Content>
148+
</FlexGrid.Item>
149+
</FlexGrid>
150+
</ThemeProvider>
151+
</Playground>
152+
153+
### Dynamic 'size' prop
154+
155+
<Playground>
156+
<FlexGrid space={1}>
157+
<FlexGrid.Item size={1 / 12}>
158+
<FlexGrid.Content bg='gray.0'>
159+
1
160+
</FlexGrid.Content>
161+
</FlexGrid.Item>
162+
<FlexGrid.Item size={2 / 12}>
163+
<FlexGrid.Content bg='gray.0'>
164+
2
165+
</FlexGrid.Content>
166+
</FlexGrid.Item>
167+
<FlexGrid.Item size={3 / 12}>
168+
<FlexGrid.Content bg='gray.0'>
169+
3
170+
</FlexGrid.Content>
171+
</FlexGrid.Item>
172+
<FlexGrid.Item size={6 / 12}>
173+
<FlexGrid.Content bg='gray.0'>
174+
6
175+
</FlexGrid.Content>
176+
</FlexGrid.Item>
177+
<FlexGrid.Item size={12 / 12}>
178+
<FlexGrid.Content bg='gray.0'>
179+
12
180+
</FlexGrid.Content>
181+
</FlexGrid.Item>
182+
<FlexGrid.Item size={4 / 12}>
183+
<FlexGrid.Content bg='gray.0'>
184+
4
185+
</FlexGrid.Content>
186+
</FlexGrid.Item>
187+
<FlexGrid.Item size={4 / 12}>
188+
<FlexGrid.Content bg='gray.0'>
189+
4
190+
</FlexGrid.Content>
191+
</FlexGrid.Item>
192+
<FlexGrid.Item size={4 / 12}>
193+
<FlexGrid.Content bg='gray.0'>
194+
4
195+
</FlexGrid.Content>
196+
</FlexGrid.Item>
197+
</FlexGrid>
198+
</Playground>

‎src/grid/index.js renamed to ‎src/flex-grid/index.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,34 @@ import styled from 'react-emotion'
33
import { BaseBox } from '../box'
44
import { gridItem, gridRow } from './styles'
55

6-
const GridContent = styled(BaseBox)(system)
6+
const FlexGridContent = styled(BaseBox)(system)
77

8-
const GridItem = styled(BaseBox)(
8+
const FlexGridItem = styled(BaseBox)(
99
{ flexGrow: 0, flexShrink: 0, minHeight: 1 },
1010
system,
1111
flexItem,
1212
gridItem
1313
)
1414

15-
const Grid = styled(BaseBox)(
15+
const FlexGrid = styled(BaseBox)(
1616
{ display: 'flex', flexWrap: 'wrap' },
1717
gridRow({
18-
rowSelector: () => `${Grid} + &`,
18+
rowSelector: () => `${FlexGrid} + &`,
1919
childSelector: (props) => props.spaceContent
20-
? `& > ${GridItem} > ${GridContent}`
21-
: `& > ${GridItem}`
20+
? `& > ${FlexGridItem} > ${FlexGridContent}`
21+
: `& > ${FlexGridItem}`
2222
}),
2323
system,
2424
flex
2525
)
2626

27-
Object.assign(Grid, {
28-
Item: GridItem,
29-
Content: GridContent
27+
Object.assign(FlexGrid, {
28+
Item: FlexGridItem,
29+
Content: FlexGridContent
3030
})
3131

3232
export {
33-
Grid,
34-
GridItem,
35-
GridContent
33+
FlexGrid,
34+
FlexGridItem,
35+
FlexGridContent
3636
}

‎src/grid/styles.js renamed to ‎src/flex-grid/styles.js

File renamed without changes.

0 commit comments

Comments
 (0)