Merge pull request #541 from lachlanjc/components-grid-columns

Add custom columns support to Grid component

Author: jxnblk

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- `@theme-ui/components`: on Grid component, allow custom `columns` definitions via strings #541
+
 ## v0.2.53 2019-12-19
 
 - `@theme-ui/color`: add `transparentize` function #370

packages/components/src/Grid.js

@@ -9,7 +9,9 @@ const widthToColumns = width =>
     : !!width && `repeat(auto-fit, minmax(${px(width)}, 1fr))`
 
 const countToColumns = n =>
-  Array.isArray(n) ? n.map(countToColumns) : !!n && `repeat(${n}, 1fr)`
+  Array.isArray(n)
+    ? n.map(countToColumns)
+    : !!n && (typeof n === 'number' ? `repeat(${n}, 1fr)` : n)
 
 export const Grid = React.forwardRef(
   ({ width, columns, gap = 3, ...props }, ref) => {

packages/components/test/__snapshots__/index.js.snap

@@ -584,6 +584,41 @@ exports[`Grid renders with columns prop 1`] = `
 />
 `;
 
+exports[`Grid renders with mixed columns prop 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 1fr 2fr;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
+exports[`Grid renders with mixed columns prop 2`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  display: grid;
+  grid-gap: 16px;
+}
+
+@media screen and (min-width:40em) {
+  .emotion-0 {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`Grid renders with responsive columns prop 1`] = `
 .emotion-0 {
   box-sizing: border-box;

packages/components/test/index.js

@@ -220,10 +220,20 @@ describe('Grid', () => {
     expect(json).toMatchSnapshot()
   })
 
+  test('renders with mixed columns prop', () => {
+    const json = renderJSON(<Grid columns="1fr 2fr" />)
+    expect(json).toMatchSnapshot()
+  })
+
   test('renders with responsive columns prop', () => {
     const json = renderJSON(<Grid columns={[2, 3, 4]} />)
     expect(json).toMatchSnapshot()
   })
+
+  test('renders with mixed columns prop', () => {
+    const json = renderJSON(<Grid columns={[null, '1fr 2fr']} />)
+    expect(json).toMatchSnapshot()
+  })
 })
 
 describe('Heading', () => {
@@ -305,10 +315,7 @@ describe('Select', () => {
   test('renders with style props', () => {
     const json = renderJSON(
       <ThemeProvider theme={theme}>
-        <Select
-          mb={3}
-          value='hello'
-        />
+        <Select mb={3} value="hello" />
       </ThemeProvider>
     )
     expect(json).toMatchSnapshot()

packages/docs/src/pages/components/grid.mdx

@@ -30,6 +30,17 @@ import { Grid } from '@theme-ui/components'
 </Grid>
 ```
 
+```jsx live=true
+<Grid
+  gap={2}
+  columns={[2, '1fr 2fr']}>
+  <Box bg='primary'>Box</Box>
+  <Box bg='muted'>Box</Box>
+  <Box bg='primary'>Box</Box>
+  <Box bg='muted'>Box</Box>
+</Grid>
+```
+
 ## Props
 
 The `Grid` component includes custom props for adjusting the grid layout.
@@ -38,8 +49,8 @@ Each prop can use the [responsive array][] syntax for mobile-first responsive st
 Prop | Description
 ---|---
 `width` | Minimum width of child elements
-`columns` | Number of columns to use for the layout (cannot be used in conjunction with the `width` prop)
 `gap` | Space between child elements
+`columns` | Number of (equally-sized) columns, or string with [grid syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) for the layout (cannot be used in conjunction with the `width` prop)
 
 [responsive array]: /sx-prop#responsive-values