Tweak mdx files

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>

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 }) => (