💥 Rename col → column in FlexGrid, Grid, Feed

Author: exah

src/feed/about.mdx

@@ -27,7 +27,7 @@ import { Feed } from 'pss-components'
 ```js
 <ThemeProvider theme={{ grid: 12 }}>
   <CurrentMediaProvider>
-    <Feed space={2} col={{ all: 3, md: 6, sm: 12 }}>
+    <Feed space={2} column={{ all: 3, md: 6, sm: 12 }}>
       <Feed.Item>
         Item
       </Feed.Item>
@@ -41,7 +41,7 @@ import { Feed } from 'pss-components'
 <Playground>
   <ThemeProvider theme={{ grid: 12 }}>
     <CurrentMediaProvider>
-      <Feed space={2} col={{ all: 3, md: 6, sm: 12 }}>
+      <Feed space={2} column={{ all: 3, md: 6, sm: 12 }}>
         <Feed.Item>
           <Box outline='1px solid' pd={1} minHeight={200}>1</Box>
         </Feed.Item>

src/feed/index.js

@@ -27,12 +27,12 @@ function FeedContainer ({
   currentMediaKey,
   theme = {},
   grid = theme.grid || DEFAULT_GRID,
-  col = DEFAULT_GRID,
+  column = DEFAULT_GRID,
   item,
   ...rest
 }) {
   const itemCol = fallbackTo(
-    col && fallbackTo(col[currentMediaKey[0]], col.all, col),
+    column && fallbackTo(column[currentMediaKey[0]], column.all, column),
     grid
   )
   const groupSize = (grid / itemCol)
@@ -41,7 +41,7 @@ function FeedContainer ({
   return (
     <FlexGrid spaceTarget={FeedItem.toString()} {...rest}>
       {childrenGroups.map((child, index) => (
-        <FlexGridItem key={`feed-item-${index}`} {...item} col={itemCol}>
+        <FlexGridItem key={`feed-item-${index}`} {...item} column={itemCol}>
           {child}
         </FlexGridItem>
       ))}
@@ -66,10 +66,11 @@ const Feed = compose(
 
 Feed.propTypes = {
   grid: PropTypes.number,
-  col: PropTypes.oneOfType([ PropTypes.number, PropTypes.objectOf(PropTypes.number) ])
+  column: PropTypes.oneOfType([ PropTypes.number, PropTypes.objectOf(PropTypes.number) ])
 }
 
 const FeedItem = styled(Box)``
+FeedItem.propTypes = { ...Box.propTypes }
 Feed.Item = FeedItem
 
 export {

src/flex-grid/about.mdx

@@ -33,7 +33,7 @@ Grid component based on [`FlexBox`](#/flex-box).
 
 #### `FlexGrid.Item` — Item / column component, size can be set with props:
 
-- `col` — Number in range `1...theme.grid`
+- `column` — Number in range `1...theme.grid`
 - `size` — Number in range `0...1`, result is percentage (`0.5` is `50%`)
 - `offset` — Number in range `1...theme.grid` — move item by number of columns
 
@@ -47,17 +47,17 @@ import { FlexGrid } from 'pss-components'
 ```js
 <ThemeProvider theme={{ grid: 12 }}>
   <FlexGrid space={2}>
-    <FlexGrid.Item col={6}>
+    <FlexGrid.Item column={6}>
       <Box>
         Content
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={4}>
+    <FlexGrid.Item column={4}>
       <Box>
         Content
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box>
         Content
       </Box>
@@ -73,32 +73,32 @@ import { FlexGrid } from 'pss-components'
 
 <Playground>
   <FlexGrid spacex={1}>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={2}>
+    <FlexGrid.Item column={2}>
       <Box outline='1px solid' pd={1}>
         2
       </Box>
@@ -111,42 +111,42 @@ import { FlexGrid } from 'pss-components'
 <Playground>
   <ThemeProvider theme={{ grid: 12 }}>
     <FlexGrid space={1}>
-      <FlexGrid.Item col={1}>
+      <FlexGrid.Item column={1}>
         <Box outline='1px solid' pd={1}>
           1
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={2}>
+      <FlexGrid.Item column={2}>
         <Box outline='1px solid' pd={1}>
           2
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={3}>
+      <FlexGrid.Item column={3}>
         <Box outline='1px solid' pd={1}>
           3
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={6}>
+      <FlexGrid.Item column={6}>
         <Box outline='1px solid' pd={1}>
           6
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={12}>
+      <FlexGrid.Item column={12}>
         <Box outline='1px solid' pd={1}>
           12
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={4}>
+      <FlexGrid.Item column={4}>
         <Box outline='1px solid' pd={1}>
           4
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={4}>
+      <FlexGrid.Item column={4}>
         <Box outline='1px solid' pd={1}>
           4
         </Box>
       </FlexGrid.Item>
-      <FlexGrid.Item col={4}>
+      <FlexGrid.Item column={4}>
         <Box outline='1px solid' pd={1}>
           4
         </Box>
@@ -159,22 +159,22 @@ import { FlexGrid } from 'pss-components'
 
 <Playground>
   <FlexGrid space={1}>
-    <FlexGrid.Item col={3} mgr='75%'>
+    <FlexGrid.Item column={3} mgr='75%'>
       <Box outline='1px solid' pd={1}>
         3
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={3} offset={3}>
+    <FlexGrid.Item column={3} offset={3}>
       <Box outline='1px solid' pd={1}>
         3
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={3} offset={6}>
+    <FlexGrid.Item column={3} offset={6}>
       <Box outline='1px solid' pd={1}>
         3
       </Box>
     </FlexGrid.Item>
-    <FlexGrid.Item col={3} offset={9}>
+    <FlexGrid.Item column={3} offset={9}>
       <Box outline='1px solid' pd={1}>
         3
       </Box>

src/flex-grid/styles.js

@@ -37,7 +37,7 @@ const flexGridItemStyle = createStyles({
       marginLeft: size
     }
   },
-  col (value, props) {
+  column (value, props) {
     if (value === 'auto' || value === true) {
       return {
         flexGrow: 1,

src/grid/about.mdx

@@ -18,7 +18,7 @@ import { Grid } from './index'
 [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
 - Item conrolled with `col`, `row` prop in `Grid.Item` component
-- [Space](https://github.com/exah/pss/blob/master/docs/api.md#space) between items conrolled with `gap`, `gapx` and `gapy` props
+- [Space](https://github.com/exah/pss/blob/master/docs/api.md#space) between items conrolled with `gap`, `columnGap` and `rowGap` props
 - [Box alignment](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) styles
 
 
@@ -27,12 +27,12 @@ import { Grid } from './index'
 #### `Grid` — Grid layout container
 
 - `gap` — `grid-gap`
-- `gapx` — `grid-column-gap`
-- `gapy` — `grid-row-gap`
+- `columnGap` — `grid-column-gap`
+- `rowGap` — `grid-row-gap`
 - `autoFlow` — `grid-auto-flow`
-- `autoCols` — `grid-auto-columns`
+- `autoColumns` — `grid-auto-columns`
 - `autoRows` — `grid-auto-rows`
-- `templateCols` — `grid-template-columns`
+- `templateColumns` — `grid-template-columns`
 - `templateRows` — `grid-template-rows`
 - `templateAreas` — `grid-template-areas`
 - `alignItems` — `align-items`
@@ -43,7 +43,7 @@ import { Grid } from './index'
 
 #### `Grid.Item`
 
-- `col` — `grid-column`
+- `column` — `grid-column`
 - `row` — `grid-row`
 - `area` — `grod-area`
 - `justifySelf` — `justify-self`
@@ -59,13 +59,13 @@ import { Grid } from 'pss-components'
 
 ```js
 <Grid gap={2}>
-  <Grid.Item col='span 6'>
+  <Grid.Item column='span 6'>
     Content
   </Grid.Item>
-  <Grid.Item col='span 4'>
+  <Grid.Item column='span 4'>
     Content
   </Grid.Item>
-  <Grid.Item col='span 2'>
+  <Grid.Item column='span 2'>
     Content
   </Grid.Item>
 </Grid>
@@ -77,23 +77,23 @@ import { Grid } from 'pss-components'
 ### Basic
 
 <Playground>
-  <Grid templateCols='repeat(12, 1fr)' gapx={1}>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+  <Grid templateColumns='repeat(12, 1fr)' columnGap={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
   </Grid>
@@ -102,29 +102,29 @@ import { Grid } from 'pss-components'
 ### Vertical and horizontal space between items
 
 <Playground>
-  <Grid templateCols='repeat(12, 1fr)' gap={1}>
-    <Grid.Item col='span 1' outline='1px solid' pd={1}>
+  <Grid templateColumns='repeat(12, 1fr)' gap={1}>
+    <Grid.Item column='span 1' pd={1} outline='1px solid'>
         1
     </Grid.Item>
-    <Grid.Item col='span 2' outline='1px solid' pd={1}>
+    <Grid.Item column='span 2' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item col='span 3' outline='1px solid' pd={1}>
+    <Grid.Item column='span 3' pd={1} outline='1px solid'>
         3
     </Grid.Item>
-    <Grid.Item col='span 6' outline='1px solid' pd={1}>
+    <Grid.Item column='span 6' pd={1} outline='1px solid'>
         6
     </Grid.Item>
-    <Grid.Item col='span 12' outline='1px solid' pd={1}>
+    <Grid.Item column='span 12' pd={1} outline='1px solid'>
         12
     </Grid.Item>
-    <Grid.Item col='span 4' outline='1px solid' pd={1}>
+    <Grid.Item column='span 4' pd={1} outline='1px solid'>
         4
     </Grid.Item>
-    <Grid.Item col='span 4' outline='1px solid' pd={1}>
+    <Grid.Item column='span 4' pd={1} outline='1px solid'>
         4
     </Grid.Item>
-    <Grid.Item col='span 4' outline='1px solid' pd={1}>
+    <Grid.Item column='span 4' pd={1} outline='1px solid'>
         4
     </Grid.Item>
   </Grid>
@@ -133,17 +133,17 @@ import { Grid } from 'pss-components'
 ### Control each item `col` and `row` props
 
 <Playground>
-  <Grid templateCols='repeat(12, 1fr)' gap={1}>
-    <Grid.Item row='1' col='1 / span 3' outline='1px solid' pd={1}>
+  <Grid templateColumns='repeat(12, 1fr)' gap={1}>
+    <Grid.Item row='1' column='1 / span 3' pd={1} outline='1px solid'>
         1
     </Grid.Item>
-    <Grid.Item row='2' col='4 / span 3' outline='1px solid' pd={1}>
+    <Grid.Item row='2' column='4 / span 3' pd={1} outline='1px solid'>
         2
     </Grid.Item>
-    <Grid.Item row='3' col='7 / span 3' outline='1px solid' pd={1}>
+    <Grid.Item row='3' column='7 / span 3' pd={1} outline='1px solid'>
         3
     </Grid.Item>
-    <Grid.Item row='4' col='10 / span 3' outline='1px solid' pd={1}>
+    <Grid.Item row='4' column='10 / span 3' pd={1} outline='1px solid'>
         4
     </Grid.Item>
   </Grid>

src/grid/index.js

@@ -1,27 +1,20 @@
 import {
-  createStyles,
-  spaceRule,
   createGridStyle,
   createGridItemStyle,
   boxContentAlignment,
-  boxItemsAlignment
+  boxItemsAlignment,
+  gap
 } from 'pss'
 
 import React from 'react'
 import styled from '@emotion/styled'
 import { Box } from '../box'
 
-const gridGap = createStyles({
-  gap: [ spaceRule('gridGap'), spaceRule('gap') ],
-  gapx: [ spaceRule('gridColumnGap'), spaceRule('columnGap') ],
-  gapy: [ spaceRule('gridRowGap'), spaceRule('rowGap') ]
-})
-
-const gridStyle = createGridStyle({ isShortPropNames: true })
-const gridItemStyle = createGridItemStyle({ isShortPropNames: true })
+const gridStyle = createGridStyle()
+const gridItemStyle = createGridItemStyle()
 
 const StyledGrid = styled(Box)(
-  gridGap,
+  gap,
   gridStyle,
   boxContentAlignment,
   boxItemsAlignment
@@ -42,7 +35,7 @@ Grid.propTypes = {
   ...gridStyle.propTypes,
   ...boxContentAlignment.propTypes,
   ...boxItemsAlignment.propTypes,
-  ...gridGap.propTypes,
+  ...gap.propTypes,
   ...Box.propTypes
 }