feat: add SimpleGrid component and improve Stack

Author: segunadebayo

packages/chakra-ui-docs/pages/stack.mdx

@@ -11,7 +11,7 @@ import { Stack } from "@chakra-ui/core";
 ```
 
 By default, each item is stacked vertically. Stack clones it's children and
-passes the spacing to them via the `margin-bottom` or `margin-right`.
+passes the spacing to them using `margin-bottom` or `margin-right`.
 
 ## Usage
 
@@ -43,10 +43,12 @@ function StackEx() {
 render(<StackEx />);
 ```
 
-### Inline stack
+### Stack items horizontally
 
-The stack each item horizonally, pass the `isInline` prop. Optionally, you can
-use `align` and `justify` to adjust the alignment of the items.
+Pass the `isInline` prop or `direction` and set it to `horizontal`.
+
+Optionally, you can use `align` and `justify` to adjust the alignment and
+distribution of the items.
 
 ```jsx isManual=true
 function Feature({ title, desc, ...rest }) {

packages/chakra-ui/src/Grid/index.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as StyledSystem from "styled-system";
 import { BoxProps } from "../Box";
 
-interface IGrid {
+export interface IGrid {
   templateColumns?: StyledSystem.GridTemplateColumnsProps["gridTemplateColumns"];
   gap?: StyledSystem.GridGapProps["gridGap"];
   rowGap?: StyledSystem.GridRowGapProps["gridRowGap"];

packages/chakra-ui/src/Grid/index.js

@@ -4,14 +4,14 @@ import Box from "../Box";
 const Grid = forwardRef(
   (
     {
-      templateColumns,
       gap,
       rowGap,
       columnGap,
       autoFlow,
       autoRows,
       autoColumns,
       templateRows,
+      templateColumns,
       templateAreas,
       area,
       column,

packages/chakra-ui/src/SimpleGrid/examples.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import { storiesOf } from "@storybook/react";
+import Box from "../Box";
+import SimpleGrid from ".";
+
+const stories = storiesOf("SimpleGrid", module);
+stories.add("Default", () => (
+  <SimpleGrid columns={2} autoFit spacing="40px" minChildWidth="300px">
+    <Box bg="tomato" height="200px"></Box>
+    <Box bg="tomato" height="200px"></Box>
+    <Box bg="tomato" height="200px"></Box>
+    <Box bg="tomato" height="200px"></Box>
+    <Box bg="tomato" height="200px"></Box>
+  </SimpleGrid>
+));

packages/chakra-ui/src/SimpleGrid/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { FlexboxProps } from "styled-system";
+import { BoxProps } from "../Box";
+
+interface ISimpleGrid {
+  /**
+   * The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
+   */
+  minChildWidth?: React.CSSProperties["minWidth"];
+  /**
+   * The align-items to control child element alignment.
+   */
+  align?: FlexboxProps["alignItems"];
+  /**
+   * The justify-items to control child element alignment.
+   */
+  justify?: FlexboxProps["justifyItems"];
+  /**
+   * The number of rows
+   */
+  rows?: number;
+  /**
+   * The number of columns
+   */
+  columns?: number;
+  /**
+   * The gap between the grid items
+   */
+  spacing?: BoxProps["gridGap"];
+  /**
+   * The row gap between the grid items
+   */
+  spacingX?: BoxProps["gridGap"];
+  /**
+   * The column gap between the grid items
+   */
+  spacingY?: BoxProps["gridGap"];
+  /**
+   * If `true` will apply `auto-fit` to the grid-template-columns
+   */
+  autoFit?: boolean;
+  /**
+   * If `true` will apply `auto-fill` to the grid-template-columns
+   */
+  autoFill?: boolean;
+}
+
+type SimpleGridProps = BoxProps & ISimpleGrid;
+
+declare const SimpleGrid: React.FC<SimpleGridProps>;

packages/chakra-ui/src/SimpleGrid/index.js

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import Grid from "../Grid";
+
+const SimpleGrid = forwardRef(
+  (
+    {
+      rows,
+      columns,
+      spacingX,
+      spacingY,
+      spacing,
+      autoFit,
+      autoFill,
+      minChildWidth,
+      align,
+      justify,
+      ...props
+    },
+    ref,
+  ) => {
+    let templateColumns;
+    if (autoFit && minChildWidth) {
+      templateColumns = `repeat(auto-fit, minmax(${minChildWidth}, 1fr))`;
+    }
+    if (autoFill && minChildWidth) {
+      templateColumns = `repeat(auto-fill, minmax(${minChildWidth}, 1fr))`;
+    }
+    return (
+      <Grid
+        ref={ref}
+        gap={spacing}
+        columnGap={spacingX}
+        rowGap={spacingY}
+        templateRows={`repeat(${rows}, 1fr)`}
+        templateColumns={templateColumns || `repeat(${columns}, 1fr)`}
+        justifyItems={justify}
+        alignItems={align}
+        {...props}
+      />
+    );
+  },
+);
+
+export default SimpleGrid;

packages/chakra-ui/src/Stack/examples.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import Stack from ".";
+import Box from "../Box";
 
 const stories = storiesOf("Stack", module);
 
@@ -13,9 +14,9 @@ stories.add("vertical stack", () => (
 ));
 
 stories.add("Inline Stack", () => (
-  <Stack isInline spacing={5}>
-    <span>ooooooo</span>
-    <span>ahhhhh</span>
-    <span>Woah!</span>
+  <Stack bg="blue.500" w="100%" h="60px" direction="horizontal">
+    <Box size="40px" background={"#fff"} rounded="full" />
+    <Box size="40px" background={"#fff"} rounded="full" />
+    <Box size="40px" background={"#fff"} rounded="full" />
   </Stack>
 ));

packages/chakra-ui/src/Stack/index.d.ts

@@ -8,6 +8,10 @@ interface IStack {
    * If `true` the items will be stacked horizontally inline.
    */
   isInline?: boolean;
+  /**
+   * If `true` the items will be stacked horizontally inline.
+   */
+  direction?: FlexProps["direction"];
   /**
    * The content of the stack.
    */

packages/chakra-ui/src/Stack/index.js

@@ -5,27 +5,34 @@ import Flex from "../Flex";
 import Box from "../Box";
 
 const Stack = ({
+  direction,
   isInline,
   children,
-  align,
+  align = "center",
   justify,
   spacing = 2,
   shouldWrapChildren,
   ...rest
 }) => {
+  let flexDirection;
+
+  if (isInline) {
+    flexDirection = isInline ? "row" : "column";
+  }
+
+  if (direction) {
+    flexDirection = direction;
+  }
+
   return (
-    <Flex
-      align={align}
-      justify={justify}
-      flexDir={isInline ? "row" : "column"}
-      {...rest}
-    >
+    <Flex align={align} justify={justify} direction={flexDirection} {...rest}>
       {Children.map(children, (child, index) => {
         if (!isValidElement(child)) return;
         let isLastChild = children.length === index + 1;
-        let spacingProps = isInline
-          ? { mr: isLastChild ? null : spacing }
-          : { mb: isLastChild ? null : spacing };
+        let spacingProps =
+          isInline || direction === "horizontal"
+            ? { mr: isLastChild ? null : spacing }
+            : { mb: isLastChild ? null : spacing };
 
         if (shouldWrapChildren) {
           return (