From 9ddc02fff52adf45e3bb6a3050fa2079ccaa9d6f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 07:36:08 +0200
Subject: [PATCH] Tweak mdx files

---
 .../ui/components/ClickOutside/ClickOutside.mdx |  7 +++++--
 .../client/ui/components/Popover/Popover.mdx    | 17 +++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.mdx b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
index 0d8126b5d..04bd19da7 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
@@ -19,8 +19,11 @@ clicks outside the component.
 Click the blue background. It should trigger an alert. Nothing should happen if you click the button.
 
 <Playground>
-  <div style={{background: 'blue', padding: '10px'}}>
-    <ClickOutside onClickOutside={() => alert('You clicked outside!')}>
+  <div id="outside" style={{background: 'blue', padding: '10px'}}>
+    <ClickOutside onClickOutside={e => {
+      if (e.srcElement.id === "outside") {
+        alert('You clicked outside!');
+      }}}>
       <Button variant="filled">Push Me</Button>
     </ClickOutside>
   </div>
diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index e051df50d..a7a67a04b 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -3,20 +3,21 @@ name: Popover
 menu: UI Kit
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground } from 'docz'
 import Popover from './Popover'
 import Button from '../Button'
+import Flex from '../Flex'
 import Typography from '../Typography'
 import ButtonIcon from '../Button/ButtonIcon'
 
 # Popover
 
-`Popover` uses `react-popper` that has `Popper.js` behind.
+`Popover` renders a popover dialog attached to another `Element`.
 
 ## Basic usage
 <Playground>
   <Popover
-    body={<div><Typography>This is the body</Typography></div>}
+    body={<Typography>This is the body</Typography>}
   >
     {({ toggleVisibility, forwardRef }) => (
       <Button onClick={toggleVisibility} forwardRef={forwardRef} variant="filled" color="primary">
@@ -30,13 +31,13 @@ import ButtonIcon from '../Button/ButtonIcon'
 <Playground>
   <Popover
     placement="top"
-    body={({ toggleVisibility, forwardRef }) => (
-      <div>
-        <Button onClick={toggleVisibility} variant="filled" size="small">
+    body={({ toggleVisibility }) => (
+      <Flex itemGutter="half">
+        <Typography>This is the body</Typography>
+        <Button onClick={toggleVisibility} size="small">
           <ButtonIcon>close</ButtonIcon>
         </Button>
-        <Typography>This is the body</Typography>
-      </div>
+      </Flex>
     )}
   >
     {({ toggleVisibility, forwardRef }) => (