Improve styling, accessebility, usability and use mutation

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

@@ -1,3 +1,3 @@
 .footer {
-  margin-top: calc(1.5 * var(--spacing-unit));
+  margin-top: var(--spacing-unit);
 }

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

@@ -3,7 +3,7 @@ import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
-import PermalinkContainer from "../../containers/PermalinkContainer";
+import PermalinkButtonContainer from "../../containers/PermalinkButtonContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -27,7 +27,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div className={styles.footer}>
-        <PermalinkContainer commentID={props.id} />
+        <PermalinkButtonContainer commentID={props.id} />
       </div>
     </div>
   );

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

@@ -1,38 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React from "react";
-import { Button, ButtonIcon, Popover } from "talk-ui/components";
-import PermalinkPopover from "./PermalinkPopover";
-
-interface PermalinkProps {
-  commentID: string;
-  assetURL: string | null;
-}
-
-class Permalink extends React.Component<PermalinkProps> {
-  public render() {
-    const { commentID, assetURL } = this.props;
-    return (
-      <Popover
-        id="permalink-popover"
-        placement="top"
-        body={({ toggleVisibility }) => (
-          <PermalinkPopover
-            permalinkUrl={`${assetURL}&commentID=${commentID}`}
-            toggleVisibility={toggleVisibility}
-          />
-        )}
-      >
-        {({ toggleVisibility, forwardRef }) => (
-          <Button onClick={toggleVisibility} forwardRef={forwardRef}>
-            <ButtonIcon>share</ButtonIcon>
-            <Localized id="comments-permalink-share">
-              <span>Share</span>
-            </Localized>
-          </Button>
-        )}
-      </Popover>
-    );
-  }
-}
-
-export default Permalink;

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

@@ -1,60 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { CSSProperties } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
-
-interface InnerProps {
-  permalinkUrl: string;
-  style?: CSSProperties;
-  toggleVisibility: () => void;
-}
-
-interface State {
-  copied: boolean;
-}
-
-class PermalinkPopover extends React.Component<InnerProps> {
-  public state: State = {
-    copied: false,
-  };
-
-  public onCopy = async () => {
-    await this.toggleCopied();
-    setTimeout(() => {
-      this.toggleCopied();
-    }, 800);
-  };
-
-  public toggleCopied = () => {
-    this.setState((state: State) => ({
-      copied: !state.copied,
-    }));
-  };
-
-  public render() {
-    const { permalinkUrl, toggleVisibility } = this.props;
-    const { copied } = this.state;
-    return (
-      <ClickOutside onClickOutside={toggleVisibility}>
-        <Flex itemGutter="half">
-          <TextField defaultValue={permalinkUrl} />
-          <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
-            <Button color="primary" variant="filled">
-              {copied ? (
-                <Localized id="comments-permalink-copied">
-                  <span>Copied!</span>
-                </Localized>
-              ) : (
-                <Localized id="comments-permalink-copy">
-                  <span>Copy</span>
-                </Localized>
-              )}
-            </Button>
-          </CopyToClipboard>
-        </Flex>
-      </ClickOutside>
-    );
-  }
-}
-
-export default PermalinkPopover;

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

@@ -0,0 +1,63 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { oncePerFrame } from "talk-common/utils";
+import { Button, ButtonIcon, ClickOutside, Popover } from "talk-ui/components";
+
+import PermalinkPopover from "./PermalinkPopover";
+
+interface PermalinkProps {
+  commentID: string;
+  assetURL: string | null;
+}
+
+class Permalink extends React.Component<PermalinkProps> {
+  // Helpers that prevents calling toggleVisibility more then once per frame.
+  // In essence this means we'll only process an event only once.
+  // This might happen, when clicking on the button which will
+  // cause its onClick to happen as well as onClickOutside.
+  private toggleVisibilityOncePerFrame = oncePerFrame(
+    (toggleVisibility: () => void) => toggleVisibility()
+  );
+
+  public render() {
+    const { commentID, assetURL } = this.props;
+    const popoverID = "permalink-popover";
+    return (
+      <Popover
+        id={popoverID}
+        placement="top-start"
+        description="A dialog showing a permalink to the comment"
+        body={({ toggleVisibility }) => (
+          <ClickOutside
+            onClickOutside={() =>
+              this.toggleVisibilityOncePerFrame(toggleVisibility)
+            }
+          >
+            <PermalinkPopover
+              permalinkURL={`${assetURL}&commentID=${commentID}`}
+              toggleVisibility={toggleVisibility}
+            />
+          </ClickOutside>
+        )}
+      >
+        {({ toggleVisibility, forwardRef, visible }) => (
+          <Button
+            onClick={() => this.toggleVisibilityOncePerFrame(toggleVisibility)}
+            aria-controls={popoverID}
+            forwardRef={forwardRef}
+            variant="ghost"
+            active={visible}
+            size="small"
+          >
+            <ButtonIcon>share</ButtonIcon>
+            <Localized id="comments-permalink-share">
+              <span>Share</span>
+            </Localized>
+          </Button>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Permalink;

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

@@ -0,0 +1,7 @@
+.root {
+  width: 300px;
+}
+
+.textField {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,60 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+
+import { Button, Flex, TextField } from "talk-ui/components";
+
+import * as styles from "./PermalinkPopover.css";
+
+interface InnerProps {
+  permalinkURL: string;
+  toggleVisibility: () => void;
+}
+
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  private onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  private toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { permalinkURL } = this.props;
+    const { copied } = this.state;
+    return (
+      <Flex itemGutter="half" className={styles.root}>
+        <TextField defaultValue={permalinkURL} className={styles.textField} />
+        <CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled" size="small">
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </Flex>
+    );
+  }
+}
+
+export default PermalinkPopover;

src/core/client/stream/components/PermalinkButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./PermalinkButton";

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

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 
 import Logo from "talk-stream/components/Logo";
 import { Button, Flex, Typography } from "talk-ui/components";
-import CommentContainer from "../../containers/CommentContainer";
+
+import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
 export interface PermalinkViewProps {