From 7f265a93c82a5aba5b922f2868f20ad5e5a9abe8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 19 Jul 2018 21:02:16 -0300
Subject: [PATCH] Fix Flex margin bug and add examples

---
 src/core/client/ui/components/Flex/Flex.css | 36 ++++++++++-----------
 src/core/client/ui/components/Flex/Flex.mdx | 21 +++++++++++-
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index b28d3aa0f..9b5b9a6e9 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -7,49 +7,49 @@
 
 .halfItemGutter {
   & > * {
-    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 calc(0.5 * var(--spacing-unit));
+      margin: 0 0 0 calc(0.5 * var(--spacing-unit)) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
+      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
+      margin: calc(0.5 * var(--spacing-unit)) 0 0 0 !important;
     }
   }
   & > *:last-child {
-    margin: 0;
+    margin: 0 !important;
   }
 }
 
 .itemGutter {
   & > * {
-    margin: 0 var(--spacing-unit) 0 0;
+    margin: 0 var(--spacing-unit) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 var(--spacing-unit);
+      margin: 0 0 0 var(--spacing-unit) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 var(--spacing-unit) 0;
+      margin: 0 0 var(--spacing-unit) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: var(--spacing-unit) 0 0 0;
+      margin: var(--spacing-unit) 0 0 0 !important;
     }
   }
   & > *:last-child {
-    margin: 0;
+    margin: 0 !important;
   }
 }
 
@@ -65,35 +65,35 @@
 .wrapReverse {
   &.itemGutter {
     &:not(:empty) {
-      margin-top: calc(-1 * var(--spacing-unit));
+      margin-top: calc(-1 * var(--spacing-unit)) !important;
     }
     & > * {
-      margin-top: var(--spacing-unit);
+      margin-top: var(--spacing-unit) !important;
     }
   }
   &.directionColumn.itemGutter {
     &:not(:empty) {
-      margin-left: calc(-1 * var(--spacing-unit));
+      margin-left: calc(-1 * var(--spacing-unit)) !important;
     }
     &.itemGutter > * {
-      margin-left: var(--spacing-unit);
+      margin-left: var(--spacing-unit) !important;
     }
   }
 
   &.halfItemGutter {
     &:not(:empty) {
-      margin-top: calc(-0.5 * var(--spacing-unit));
+      margin-top: calc(-0.5 * var(--spacing-unit)) !important;
     }
     & > * {
-      margin-top: calc(0.5 * var(--spacing-unit));
+      margin-top: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
   &.directionColumn.halfItemGutter {
     &:not(:empty) {
-      margin-left: calc(-0.5 * var(--spacing-unit));
+      margin-left: calc(-0.5 * var(--spacing-unit)) !important;
     }
     &.halfItemGutter > * {
-      margin-left: calc(0.5 * var(--spacing-unit));
+      margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
 }
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index b0d8e4d23..84eeb8240 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -5,12 +5,31 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import Flex from './Flex'
+import Button from '../Button'
 
 # Flex
 
 `Flex` is a wrapper around `flexbox`.
 
-## Basic usage
+## Justify content
 <Playground>
   <Flex justifyContent="center">I'm centered</Flex>
 </Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<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>