Working

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

@@ -28,8 +28,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover
           // tslint:disable-next-line:jsx-no-lambda
-          body={({ forwardRef }) => (
-            <PermalinkPopover commentId={props.id} forwardRef={forwardRef} />
+          body={({ toggleVisibility, forwardRef }) => (
+            <PermalinkPopover
+              commentID={props.id}
+              forwardRef={forwardRef}
+              toggleVisibility={toggleVisibility}
+            />
           )}
         >
           {({ toggleVisibility, forwardRef }) => (

src/core/client/stream/components/PermalinkPopover.css

@@ -3,11 +3,6 @@
 }
 
 .root {
-  background-color: #ffffff;
-  border: 1px solid #c9cacb;
-  box-sizing: border-box;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
   padding: 6px 10px;
   display: flex;
 }

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

@@ -6,9 +6,10 @@ import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
-  commentId: string;
+  commentID: string;
   style?: CSSProperties;
-  innerRef?: RefHandler;
+  forwardRef?: RefHandler;
+  toggleVisibility?: () => any;
 }
 
 interface State {
@@ -34,13 +35,13 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId, style, innerRef } = this.props;
+    const { commentID } = this.props;
     const { copied } = this.state;
     return (
-      <div className={styles.root} style={style} ref={innerRef}>
-        <TextField defaultValue={commentId} className={styles.textField} />
-        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-          <Button primary>
+      <div className={styles.root}>
+        <TextField defaultValue={commentID} className={styles.textField} />
+        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled">
             {copied ? (
               <Localized id="comments-permalink-copied">
                 <span>Copied!</span>

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

@@ -13,7 +13,7 @@ interface InnerProps {
   body: (props: RenderProps) => any;
   // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
-  description: string;
+  description?: string;
   id?: string;
   onClose?: () => void;
   className?: string;
@@ -57,7 +57,7 @@ class Popover extends React.Component<InnerProps> {
           {(props: Props) => (
             <div
               id={id}
-              aria-role="popup"
+              role="popup"
               aria-labelledby={`${id}-ariainfo`}
               aria-hidden={!visible}
             >

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

@@ -7,8 +7,8 @@ interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;
 }
 
-const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+const TextField: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
   return <input {...rest} className={cn(styles.root, className)} />;
 };
 
-export default Input;
+export default TextField;