From 3f64a0d1a64a14085a92fcd6385242c51e07e926 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Aug 2018 18:40:58 +0200
Subject: [PATCH] Support double itemGutters

---
 src/core/client/ui/components/Flex/Flex.css | 41 +++++++++++++++++++++
 src/core/client/ui/components/Flex/Flex.mdx | 26 +++++++++++++
 src/core/client/ui/components/Flex/Flex.tsx |  3 +-
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 1b1c562a1..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -31,6 +31,30 @@
   }
 }
 
+.doubleItemGutter {
+  & > * {
+    margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
 .itemGutter {
   & > * {
     margin: 0 var(--spacing-unit) 0 0 !important;
@@ -98,6 +122,23 @@
       margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
+
+  &:not(.directionColumn).doubleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-2 * var(--spacing-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn.doubleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-2 * var(--spacing-unit)) !important;
+    }
+    &.doubleItemGutter > * {
+      margin-left: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
 }
 
 .justifyFlexStart {
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index 84eeb8240..7ca59bb54 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -33,3 +33,29 @@ import Button from '../Button'
     <Button variant="filled">Push Me</Button>
   </Flex>
 </Playground>
+
+## Item Gutter
+
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="half">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="double">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 9e69921c6..bf66f9084 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -25,7 +25,7 @@ interface InnerProps {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
-  itemGutter?: boolean | "half";
+  itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
 
@@ -56,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
+    [classes.doubleItemGutter]: itemGutter === "double",
     [classes.wrap]: wrap === true,
     [classes.wrapReverse]: wrap === "reverse",
   };