chore: add shouldwrapchildren to stack

junminahn · Jun 4, 2020 · 865953c · 865953c
1 parent 738ede5
commit 865953c
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 72 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -16,22 +16,14 @@
     "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/indent": "off",
-    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/array-callback-return": "off",
     "@typescript-eslint/array-type": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/member-delimiter-style": "off"
-  },
-  "overrides": [
-    {
-      "files": ["docs/*.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off"
-      }
-    }
-  ]
+  }
 }
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,5 @@
 const path = require("path")
 
 module.exports = {
-  stories: [path.join(__dirname, "../packages/tabs/**/*.stories.tsx")],
+  stories: [path.join(__dirname, "../packages/layout/**/*.stories.tsx")],
 }
diff --git a/packages/layout/migration.md b/packages/layout/migration.md
@@ -37,10 +37,6 @@ const Box = chakra.div
 - [Stack] To reduce the API surface, we're deprecating the `isInline` and
   `isReversed` prop in favor of `direction` prop
 
-- [Stack] We're deprecating support for `shouldWrapChildren` prop because we now
-  use css to manage the stack rather than `React.cloneElement`. Thanks to
-  [https://github.com/chakra-ui/chakra-ui/pull/277]
-
 - [Stack] We're constrained Stack's direction to only `row` and `column`.
   Support for reversing the direction is no longer available.
 

diff --git a/packages/layout/src/Stack.tsx b/packages/layout/src/Stack.tsx
@@ -30,16 +30,36 @@ type StackOptions = Pick<FlexOptions, "align" | "justify" | "wrap"> & {
    * If `true`, each stack item will show a divider
    */
   divider?: React.ReactElement
+  /**
+   * If `true`, the children will be wrapped in a `Box` with
+   * `display: inline-block`, and the `Box` will take the spacing props
+   */
+  shouldWrapChildren?: boolean
 }
 
 export type StackProps = PropsOf<typeof chakra.div> & StackOptions
 
 export type StackDividerProps = PropsOf<typeof StackDivider>
 
 export const StackDivider = chakra("hr", {
-  baseStyle: { border: 0, alignSelf: "stretch" },
+  baseStyle: {
+    borderWidth: 0,
+    alignSelf: "stretch",
+    borderColor: "inherit",
+    width: "auto",
+    height: "auto",
+  },
 })
 
+export const StackItem = (props: PropsOf<typeof chakra.div>) => (
+  <chakra.div
+    display="inline-block"
+    className="chakra-stack__item"
+    flex="0"
+    {...props}
+  />
+)
+
 /**
  * Stacks help you easily create flexible and automatically distributed layouts
  *
@@ -62,6 +82,7 @@ export const Stack = React.forwardRef(
       children,
       divider,
       className,
+      shouldWrapChildren,
       ...rest
     } = props
 
@@ -86,39 +107,38 @@ export const Stack = React.forwardRef(
         return {
           marginX: spacing,
           marginY: 0,
-          borderLeft: "1px solid",
-          borderBottom: 0,
-          width: "auto",
+          borderLeftWidth: "1px",
+          borderBottomWidth: 0,
         }
       }
       return {
         marginX: 0,
         marginY: spacing,
-        borderLeft: 0,
-        borderBottom: "1px solid",
-        width: "100%",
+        borderLeftWidth: 0,
+        borderBottomWidth: "1px",
       }
     })
 
     const hasDivider = !!divider
 
     const clones = validChildren.map((child, index) => {
-      if (!hasDivider) return child
-
       const isLast = index + 1 === validChildren.length
+      const _child = shouldWrapChildren ? <StackItem>{child}</StackItem> : child
+
+      if (!hasDivider) return _child
 
       if (!isLast) {
         return (
           <React.Fragment key={index}>
-            {child}
-            {React.cloneElement(divider as React.ReactElement<any>, {
+            {_child}
+            {React.cloneElement(divider as any, {
               css: css({ "&": dividerStyles }),
             })}
           </React.Fragment>
         )
       }
 
-      return child
+      return _child
     })
 
     const sx = (theme: Dict) => {

diff --git a/packages/layout/src/Wrap.tsx b/packages/layout/src/Wrap.tsx
@@ -1,7 +1,6 @@
 import { chakra, css, PropsOf, SystemProps, useTheme } from "@chakra-ui/system"
 import { getValidChildren, mapResponsive, __DEV__ } from "@chakra-ui/utils"
 import * as React from "react"
-import { forwardRef, Ref } from "react"
 
 export type WrapProps = PropsOf<typeof chakra.div> & {
   /**
@@ -32,44 +31,55 @@ export type WrapProps = PropsOf<typeof chakra.div> & {
  *
  * @see Docs https://chakra-ui.com/wrap
  */
-export const Wrap = forwardRef((props: WrapProps, ref: Ref<any>) => {
-  const { spacing = "0.5rem", children, justify, direction, ...rest } = props
+export const Wrap = React.forwardRef(
+  (props: WrapProps, ref: React.Ref<any>) => {
+    const {
+      spacing = "0.5rem",
+      children,
+      justify,
+      direction,
+      align,
+      ...rest
+    } = props
 
-  const theme = useTheme()
+    const theme = useTheme()
 
-  const liSpacing = mapResponsive(spacing, (value) => {
-    const { margin } = css({ margin: value })(theme)
-    return `calc(${margin} / 2)`
-  })
+    const itemSpacing = mapResponsive(spacing, (value) => {
+      const { margin } = css({ margin: value })(theme)
+      return `calc(${margin} / 2)`
+    })
 
-  const ulSpacing = mapResponsive(spacing, (value) => {
-    const { margin } = css({ margin: value })(theme)
-    return `calc(${margin} / 2 * -1)`
-  })
+    const groupSpacing = mapResponsive(spacing, (value) => {
+      const { margin } = css({ margin: value })(theme)
+      return `calc(${margin} / 2 * -1)`
+    })
 
-  const validChildren = getValidChildren(children)
+    const validChildren = getValidChildren(children)
 
-  const clones = validChildren.map((child, index) => (
-    <chakra.li key={index} margin={liSpacing} display="inline-flex">
-      {child}
-    </chakra.li>
-  ))
+    const clones = validChildren.map((child, index) => (
+      <chakra.li key={index} margin={itemSpacing} display="inline-flex">
+        {child}
+      </chakra.li>
+    ))
 
-  return (
-    <chakra.div ref={ref} {...rest}>
-      <chakra.ul
-        display="flex"
-        flexWrap="wrap"
-        justifyContent={justify}
-        flexDirection={direction}
-        listStyleType="none"
-        padding="0"
-        margin={ulSpacing}
-        children={clones}
-      />
-    </chakra.div>
-  )
-})
+    return (
+      <chakra.div ref={ref} {...rest}>
+        <chakra.ul
+          display="flex"
+          flexWrap="wrap"
+          justifyContent={justify}
+          alignItems={align}
+          flexDirection={direction}
+          listStyleType="none"
+          padding="0"
+          margin={groupSpacing}
+        >
+          {clones}
+        </chakra.ul>
+      </chakra.div>
+    )
+  },
+)
 
 if (__DEV__) {
   Wrap.displayName = "Wrap"

diff --git a/packages/layout/src/stories/Stack.stories.tsx b/packages/layout/src/stories/Stack.stories.tsx
@@ -23,13 +23,13 @@ export const Inline = () => (
 
 export const Responsive = () => (
   <Stack direction={["column", "row"]} spacing="40px" w="100%">
-    <Box w="100%" h="40px" bg="yellow.200">
+    <Box boxSize="40px" bg="yellow.200">
       1
     </Box>
-    <Box w="100%" h="40px" bg="tomato">
+    <Box boxSize="40px" bg="tomato">
       2
     </Box>
-    <Box w="100%" h="40px" bg="pink.100">
+    <Box boxSize="40px" bg="pink.100">
       3
     </Box>
   </Stack>
@@ -42,13 +42,13 @@ export const WithResponsiveDivider = () => (
     divider={<StackDivider borderColor="red.200" />}
     spacing={4}
   >
-    <Box w="100%" h="40px" bg="yellow.200">
+    <Box boxSize="40px" bg="yellow.200">
       1
     </Box>
-    <Box w="100%" h="40px" bg="tomato">
+    <Box boxSize="40px" bg="tomato">
       2
     </Box>
-    <Box w="100%" h="40px" bg="pink.100">
+    <Box boxSize="40px" bg="pink.100">
       3
     </Box>
   </Stack>
@@ -57,25 +57,25 @@ export const WithResponsiveDivider = () => (
 export const WithDivider = () => (
   <>
     <Stack divider={<StackDivider />} spacing={4}>
-      <Box w="100%" h="40px" bg="yellow.200">
+      <Box boxSize="40px" bg="yellow.200">
         1
       </Box>
-      <Box w="100%" h="40px" bg="tomato">
+      <Box boxSize="40px" bg="tomato">
         2
       </Box>
-      <Box w="100%" h="40px" bg="pink.100">
+      <Box boxSize="40px" bg="pink.100">
         3
       </Box>
     </Stack>
 
     <Stack mt={10} direction="row" divider={<StackDivider />} spacing={4}>
-      <Box w="100%" h="40px" bg="yellow.200">
+      <Box boxSize="40px" bg="yellow.200">
         1
       </Box>
-      <Box w="100%" h="40px" bg="tomato">
+      <Box boxSize="40px" bg="tomato">
         2
       </Box>
-      <Box w="100%" h="40px" bg="pink.100">
+      <Box boxSize="40px" bg="pink.100">
         3
       </Box>
     </Stack>