Improve styling, accessebility, usability and use mutation

src/core/client/ui/components/ClickOutside/ClickOutside.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { findDOMNode } from "react-dom";
 
 export interface ClickOutsideProps {
-  onClickOutside: () => void;
+  onClickOutside: (e?: MouseEvent) => void;
   children: React.ReactNode;
 }
 
@@ -13,7 +13,7 @@ class ClickOutside extends React.Component<ClickOutsideProps> {
     const { onClickOutside } = this.props;
     if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
       // tslint:disable-next-line:no-unused-expression
-      onClickOutside && onClickOutside();
+      onClickOutside && onClickOutside(e);
     }
   };
 

src/core/client/ui/components/Popover/Popover.css

@@ -6,7 +6,7 @@
   border-radius: 1px;
   color: #222;
   display: flex;
-  padding: 6px 10px;
+  padding: calc(0.5 * var(--spacing-unit));
 
   &:after,
   &::before {

src/core/client/ui/components/Popover/Popover.tsx

@@ -27,10 +27,21 @@ type Placement =
   | "left"
   | "left-start";
 
+interface BodyRenderProps {
+  toggleVisibility: () => void;
+  visible: boolean;
+}
+
+interface ChildrenRenderProps {
+  toggleVisibility: () => void;
+  forwardRef?: RefHandler;
+  visible: boolean;
+}
+
 interface PopoverProps {
-  body: (props: RenderProps) => React.ReactNode | React.ReactElement<any>;
-  children: (props: RenderProps) => React.ReactNode;
-  description?: string;
+  body: (props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>;
+  children: (props: ChildrenRenderProps) => React.ReactNode;
+  description: string;
   id: string;
   onClose?: () => void;
   className?: string;
@@ -41,11 +52,6 @@ interface State {
   visible: false;
 }
 
-interface RenderProps {
-  toggleVisibility: () => void;
-  forwardRef?: RefHandler;
-}
-
 class Popover extends React.Component<PopoverProps> {
   public state: State = {
     visible: false,
@@ -97,24 +103,20 @@ class Popover extends React.Component<PopoverProps> {
             children({
               forwardRef: props.ref,
               toggleVisibility: this.toggleVisibility,
+              visible: this.state.visible,
             })
           }
         </Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {(props: PopperArrowProps) =>
-            visible && (
-              <div
-                id={id}
-                role="popup"
-                aria-labelledby={`${id}-ariainfo`}
-                aria-hidden={!visible}
-              >
-                <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+        <Popper placement={placement} eventsEnabled positionFixed={false}>
+          {(props: PopperArrowProps) => (
+            <div
+              id={id}
+              role="popup"
+              aria-labelledby={`${id}-ariainfo`}
+              aria-hidden={!visible}
+            >
+              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+              {visible && (
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}
@@ -123,12 +125,13 @@ class Popover extends React.Component<PopoverProps> {
                   {typeof body === "function"
                     ? body({
                         toggleVisibility: this.toggleVisibility,
+                        visible: this.state.visible,
                       })
                     : body}
                 </div>
-              </div>
-            )
-          }
+              )}
+            </div>
+          )}
         </Popper>
       </Manager>
     );

src/core/client/ui/components/TextField/TextField.css

@@ -4,5 +4,5 @@
   border: 1px solid #979797;
   box-sizing: border-box;
   border-radius: 1px;
-  padding: 5px 20px;
+  padding: calc(0.5 * var(--spacing-unit));
 }