progress

src/core/client/stream/components/Comment.tsx

@@ -2,6 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { Manager, Popper, Reference } from "react-popper";
 import { Button, Input, Popover, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
@@ -27,6 +28,27 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <button type="button" ref={ref}>
+              Reference element
+            </button>
+          )}
+        </Reference>
+        <Popper
+          placement="left"
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, style, placement, arrowProps }) => (
+            <div ref={ref} style={style} data-placement={placement}>
+              Popper element
+            </div>
+          )}
+        </Popper>
+      </Manager>
       <div className={cn("talk-comment-footer")}>
         <Popover
           body={

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

@@ -15,8 +15,13 @@ class Popover extends React.Component<InnerProps> {
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
-        <Popper placement="right">
-          {({ ref, style, placement, arrowProps }) =>
+        <Popper
+          placement="left"
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, placement, style }) =>
             React.cloneElement(body, {
               ref,
               style,

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

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { InputHTMLAttributes, StatelessComponent } from "react";
 
-import * as styles from "./TextField";
+import * as styles from "./TextField.css";
 
 interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;