Support for refs

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

@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Popover, Typography } from "talk-ui/components";
+import { Button, Popover, Typography } from "talk-ui/components";
 import PermalinkPopover from "../PermalinkPopover";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
@@ -28,11 +28,15 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover body={<PermalinkPopover commentId={props.id} />}>
           {({ toggleShow, ref }) => (
-            <button onClick={toggleShow} style={{ color: "red" }} ref={ref}>
+            <Button
+              onClick={toggleShow}
+              style={{ color: "red" }}
+              innerRef={ref}
+            >
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
-            </button>
+            </Button>
           )}
         </Popover>
       </div>

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

@@ -1,9 +1,3 @@
-.shareButton {
-  composes: button from "talk-ui/shared/typography.css";
-  composes: buttonReset from "talk-ui/shared/buttonReset.css";
-  padding: 10px 0;
-}
-
 .textField {
   margin-right: 5px;
 }

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

@@ -19,6 +19,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withKeyboardFocus` HOC */
   keyboardFocus: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 /**
@@ -31,6 +33,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   type: typeProp,
+  innerRef,
   ...rest
 }) => {
   let Element = "button";
@@ -53,7 +56,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.keyboardFocus]: keyboardFocus,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={innerRef} />;
 };
 
 const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));

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

@@ -28,6 +28,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -39,6 +41,7 @@ class Button extends React.Component<InnerProps> {
       invert,
       primary,
       secondary,
+      innerRef,
       ...rest
     } = this.props;
 
@@ -53,6 +56,7 @@ class Button extends React.Component<InnerProps> {
       <BaseButton
         className={rootClassName}
         classes={pick(classes, "keyboardFocus")}
+        innerRef={innerRef}
         {...rest}
       />
     );