feat: New prop numColumns to create responsive column layouts

Artem Sapegin · Artem Sapegin · commit 382b14b1533f · 2019-11-27T09:40:02.000+01:00
Inspired by Theme UI Grid component: https://theme-ui.com/components/grid
diff --git a/src/Stack.md b/src/Stack.md
@@ -1,4 +1,4 @@
-_All props except `minColumnWidth` are coming from styled._
+_All props except `minColumnWidth` and `numColumns` are coming from styled._
 
 ### Default scale
 
@@ -38,6 +38,16 @@ Responsive gap (8px, 16px, 32px depending on the viewport width):
 </Stack>
 ```
 
+Responsive column layout:
+
+```jsx
+<Stack gridGap={3} numColumns={[1, 2, 3]}>
+  {images.map(i => (
+    <Image key={i} src={i} alt="" />
+  ))}
+</Stack>
+```
+
 _You can also use `gridRowGap` and `gridColumnGap` props._
 
 Accepts styled-system [spacing props](https://styled-system.com/table#space), like `mt` or `mb`:
diff --git a/src/Stack.tsx b/src/Stack.tsx
@@ -31,8 +31,16 @@ type Props = SpaceProps &
 	BorderProps &
 	ShadowProps &
 	PositionProps & {
-		/** Minimum width of a child, will create responsive CSS Grid layout like `grid-template-columns: repeat(auto-fit, minmax($minColumnWidth$)}, 1fr))` */
+		/** Minimum width of a child, will create responsive CSS Grid layout like
+		 * `grid-template-columns: repeat(auto-fit, minmax($minColumnWidth$)}, 1fr))`.
+		 * (You can use either this prop or `numColumns` but not both.)
+		 */
 		minColumnWidth?: ResponsiveValue<TLengthStyledSystem>;
+		/** Number of columns, will create a responsive CSS Grid layout like
+		 * `grid-template-columns: repeat($numColumns$, 1fr))`.
+		 * (You can use either this prop or `minColumnWidth` but not both.)
+		 */
+		numColumns?: ResponsiveValue<number>;
 	};
 
 const px = (value: TLengthStyledSystem): string =>
@@ -68,6 +76,10 @@ export const Stack = styled('div')<Props>(
 					  )}, 1fr))`
 					: null,
 		},
+		numColumns: {
+			property: 'gridTemplateColumns',
+			transform: value => (value ? `repeat(${value}, 1fr)` : null),
+		},
 	})
 );
 
diff --git a/src/__tests__/Stack.spec.tsx b/src/__tests__/Stack.spec.tsx
@@ -24,7 +24,7 @@ test('custom gap', () => {
 	expect(firstChild).toHaveStyleRule('grid-gap', '32px');
 });
 
-test('custom min width', () => {
+test('custom min column width', () => {
 	const {
 		container: { firstChild },
 	} = render(<Stack minColumnWidth={100}>hello</Stack>);
@@ -34,6 +34,13 @@ test('custom min width', () => {
 	);
 });
 
+test('custom number of columns', () => {
+	const {
+		container: { firstChild },
+	} = render(<Stack numColumns={3}>hello</Stack>);
+	expect(firstChild).toHaveStyleRule('grid-template-columns', 'repeat(3,1fr)');
+});
+
 test('spacing props', () => {
 	const {
 		container: { firstChild },
