From f24c21c94ecbf94c0156dd7a970355511c27ec12 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 16 Jul 2018 16:25:32 -0300
Subject: [PATCH] Support wrapping, disable shrink by default

---
 .../client/ui/components/Button/Button.mdx    | 29 ++++++-----
 src/core/client/ui/components/Flex/Flex.css   | 48 +++++++++++++++++++
 src/core/client/ui/components/Flex/Flex.tsx   |  4 ++
 3 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 5be82c540..398aff282 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -5,23 +5,26 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Button from './Button'
+import Flex from '../Flex'
 
 # Button
 
 ## Basic usage
 <Playground>
-  <Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
-  <Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
-  <Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
-  <Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
-  <Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
-  <Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
-  <Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
+  <Flex itemGutter wrap>
+    <Button>Push Me</Button>
+    <Button disabled>Push Me</Button>
+    <Button anchor>I'm an Anchor Tag</Button>
+    <Button primary>Primary</Button>
+    <Button primary disabled>Primary</Button>
+    <Button secondary>Secondary</Button>
+    <Button secondary disabled>Secondary</Button>
+    <Button primary invert>Primary</Button>
+    <Button primary invert disabled>Primary</Button>
+    <Button secondary invert>Secondary</Button>
+    <Button secondary invert disabled>Secondary</Button>
+    <Button primary fullWidth>Full Width</Button>
+    <Button primary invert fullWidth>Full Width Invert</Button>
+  </Flex>
 </Playground>
 
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 13cb05be5..b28d3aa0f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,5 +1,8 @@
 .root {
   display: flex;
+  & > * {
+    flex-shrink: 0;
+  }
 }
 
 .halfItemGutter {
@@ -50,6 +53,51 @@
   }
 }
 
+.wrap {
+  flex-wrap: wrap;
+}
+
+.wrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+.wrap,
+.wrapReverse {
+  &.itemGutter {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-unit));
+    }
+    & > * {
+      margin-top: var(--spacing-unit);
+    }
+  }
+  &.directionColumn.itemGutter {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-unit));
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-unit);
+    }
+  }
+
+  &.halfItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-0.5 * var(--spacing-unit));
+    }
+    & > * {
+      margin-top: calc(0.5 * var(--spacing-unit));
+    }
+  }
+  &.directionColumn.halfItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-0.5 * var(--spacing-unit));
+    }
+    &.halfItemGutter > * {
+      margin-left: calc(0.5 * var(--spacing-unit));
+    }
+  }
+}
+
 .justifyFlexStart {
   justify-content: flex-start;
 }
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index bfba06d05..8ffd9c231 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -20,6 +20,7 @@ interface InnerProps {
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
   itemGutter?: boolean | "half";
   className?: string;
+  wrap?: boolean | "reverse";
 }
 
 const Flex: StatelessComponent<InnerProps> = props => {
@@ -29,12 +30,15 @@ const Flex: StatelessComponent<InnerProps> = props => {
     alignItems,
     direction,
     itemGutter,
+    wrap,
     ...rest
   } = props;
 
   const classObject: Record<string, boolean> = {
     [styles.itemGutter]: itemGutter === true,
     [styles.halfItemGutter]: itemGutter === "half",
+    [styles.wrap]: wrap === true,
+    [styles.wrapReverse]: wrap === "reverse",
   };
 
   if (justifyContent) {