Improve Stack

Author: Andrey Okonetchnikov

packages/components/src/primitives/Stack.md

@@ -2,13 +2,13 @@
 
 ```tsx
 <Stack gap={4}>
-  <Box p={3} bg="primary">
+  <Box p={3} bg="primary" width={"100%"}>
     Item 1
   </Box>
-  <Box p={3} bg="primary">
+  <Box p={3} bg="primary" width={"50%"}>
     Item 2
   </Box>
-  <Box p={3} bg="primary">
+  <Box p={3} bg="primary" width={"25%"}>
     Item 3
   </Box>
 </Stack>
@@ -51,7 +51,7 @@ Stack respects flex props (but overrides margins) set on children elements:
 ```tsx
 <Stack
   as="nav"
-  gap={[1, 2, 4]}
+  gap={[4, 3, 2]}
   direction={["vertical", "horizontal"]}
   wrap={[true, false, true]}
   p={4}
@@ -62,18 +62,15 @@ Stack respects flex props (but overrides margins) set on children elements:
   <Button>Drink coffee</Button>
   <Button>Buy pizza</Button>
   <Button>Großes Frühstück essen</Button>
+  <Button>Code</Button>
   <Button>Drink coffee</Button>
   <Button>Buy pizza</Button>
   <Button>Großes Frühstück essen</Button>
+  <Button>Code</Button>
   <Button>Drink coffee</Button>
   <Button>Buy pizza</Button>
   <Button>Großes Frühstück essen</Button>
-  <Button>Drink coffee</Button>
-  <Button>Buy pizza</Button>
-  <Button>Großes Frühstück essen</Button>
-  <Button>Drink coffee</Button>
-  <Button>Buy pizza</Button>
-  <Button>Großes Frühstück essen</Button>
+  <Button>Code</Button>
 </Stack>
 ```
 
@@ -84,7 +81,7 @@ import { Heading, Stack, Text } from "../"
 ;<Stack gap={4} p={4} border="thin" borderColor="muted">
   <Heading>Please fill the form</Heading>
   <Stack
-    direction="horizontal"
+    direction={["vertical", "horizontal"]}
     gap={3}
     pt={4}
     borderTop="thin"
@@ -94,11 +91,15 @@ import { Heading, Stack, Text } from "../"
     <Input name="item1" placeholder="Item 2" flexGrow={1} />
     <Button>Submit</Button>
   </Stack>
-  <Stack gap={2} direction="horizontal" alignItems="baseline">
+  <Stack
+    gap={2}
+    direction={["vertical", "horizontal"]}
+    alignItems="baseline"
+  >
     <Text variant="primary">
       By submitting this form you're accepting our terms.
     </Text>
-    <Text variant="tertiary">The text must be aligned.</Text>
+    <Text variant="tertiary">The text must be on the baseline.</Text>
   </Stack>
 </Stack>
 ```

packages/components/src/primitives/Stack.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import styled from "styled-components"
-import { ResponsiveValue, system } from "styled-system"
+import { ResponsiveValue, system, TLengthStyledSystem } from "styled-system"
 import { Flex } from "../"
 import { BoxProps } from "./Box"
-import theme, { Theme } from "../theme"
+import { Theme } from "../theme"
 
-type SpaceValue = keyof typeof theme.space
+type SpaceValue = number
 type DirectionValue = "vertical" | "horizontal"
 
 type StackBaseProps = Omit<BoxProps, "wrap"> & {
@@ -29,6 +29,9 @@ type StackProps = StackBaseProps & {
   as?: React.ElementType
 }
 
+const toPx = (value: TLengthStyledSystem): string =>
+  typeof value === "number" ? `${value}px` : value
+
 const StackBase: React.FC<StackBaseProps> = styled(
   ({ gap, direction, wrap, ...props }: StackProps) => <Flex {...props} />
 )<StackBaseProps>(
@@ -39,30 +42,41 @@ const StackBase: React.FC<StackBaseProps> = styled(
       // By using double && we increase specificity of this CSS selector
       property: "&&" as any,
       scale: "space",
-      // And here instead of the value for the property we return an object
       // @ts-ignore solves the undefined is not assignable to string[]
       transform: (value: SpaceValue, scale: Theme["space"]) => {
-        const gap = scale ? scale[value] : 0
+        const gapValue = toPx(scale[value])
+        // And here instead of the value for the property we return an object
         return {
+          "--gap": gapValue,
           position: "relative",
-          width: `calc(100% + ${gap})`,
-          marginTop: `calc(-1 * ${gap})`,
-          marginLeft: `calc(-1 * ${gap})`,
+          width: `calc(100% + var(--gap))`,
+          marginTop: `calc(-1 * var(--gap))`,
+          marginLeft: `var(--root-ml)`,
           "> *": {
-            marginTop: gap,
-            marginLeft: gap
+            marginTop: `var(--gap)`,
+            marginLeft: `var(--child-ml)`
           }
         }
       }
     },
-    direction: {
-      property: "flexDirection",
-      transform: (value: DirectionValue) => (value === "vertical" ? "column" : "row")
-    },
     wrap: {
       property: "flexWrap",
       transform: (value: boolean) => (value ? "wrap" : "nowrap")
     }
+  }),
+  // Because we are using `property: "&&" in both cases, putting them into one `system` call
+  // will produce conflicts and break for the case when both `gap` and `direction` are arrays.
+  system({
+    direction: {
+      property: "&&" as any,
+      transform: (value: DirectionValue) => {
+        return {
+          "--root-ml": value === "vertical" ? 0 : "calc(-1 * var(--gap))",
+          "--child-ml": value === "vertical" ? 0 : "var(--gap)",
+          flexDirection: value === "vertical" ? "column" : "row"
+        }
+      }
+    }
   })
 )