From 7fbbf43eae735357d8f7ae30bdc3ba6990287713 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Tue, 18 Aug 2020 16:52:05 -0600
Subject: [PATCH] Pass refs to componenent pickers for button, link

---
 src/components/Button.js | 28 ++++++++++++----------------
 src/components/Link.js   | 28 ++++++++++++----------------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index f031b25f..051ec2b7 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -399,22 +399,18 @@ const ButtonLink = styled.a``;
 // The main purpose of this component is to strip certain props that get passed
 // down to the styled component, so that we don't end up passing them to a
 // tag which would throw warnings for non-standard props.
-function ButtonComponentPicker({
-  appearance,
-  ButtonWrapper,
-  containsIcon,
-  isLink,
-  isLoading,
-  isUnclickable,
-  size,
-  ...rest
-}) {
-  // Use the UnstyledButton here to avoid duplicating styles and creating
-  // specificity conflicts by first rendering the StyledLink higher up the chain
-  // and then re-rendering it through the 'as' prop.
-  const ButtonComponent = isLink ? ButtonLink : ButtonWrapper || UnstyledButton;
-  return <ButtonComponent {...rest} />;
-}
+const ButtonComponentPicker = forwardRef(
+  (
+    { appearance, ButtonWrapper, containsIcon, isLink, isLoading, isUnclickable, size, ...rest },
+    ref
+  ) => {
+    // Use the UnstyledButton here to avoid duplicating styles and creating
+    // specificity conflicts by first rendering the StyledLink higher up the chain
+    // and then re-rendering it through the 'as' prop.
+    const ButtonComponent = isLink ? ButtonLink : ButtonWrapper || UnstyledButton;
+    return <ButtonComponent {...rest} />;
+  }
+);
 
 const buttonStyleProps = {
   appearance: PropTypes.oneOf(Object.values(APPEARANCES)),
diff --git a/src/components/Link.js b/src/components/Link.js
index 8058a7df..21ba774d 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -130,22 +130,18 @@ const LinkButton = styled.button`
 // The main purpose of this component is to strip certain props that get passed
 // down to the styled component, so that we don't end up passing them to a
 // tag which would throw warnings for non-standard props.
-function LinkComponentPicker({
-  containsIcon,
-  inverse,
-  isButton,
-  LinkWrapper,
-  nochrome,
-  secondary,
-  tertiary,
-  ...rest
-}) {
-  // Use the UnstyledLink here to avoid duplicating styles and creating
-  // specificity conflicts by first rendering the StyledLink higher up the chain
-  // and then re-rendering it through the 'as' prop.
-  const LinkComponent = isButton ? LinkButton : LinkWrapper || UnstyledLink;
-  return <LinkComponent {...rest} />;
-}
+const LinkComponentPicker = forwardRef(
+  (
+    { containsIcon, inverse, isButton, LinkWrapper, nochrome, secondary, tertiary, ...rest },
+    ref
+  ) => {
+    // Use the UnstyledLink here to avoid duplicating styles and creating
+    // specificity conflicts by first rendering the StyledLink higher up the chain
+    // and then re-rendering it through the 'as' prop.
+    const LinkComponent = isButton ? LinkButton : LinkWrapper || UnstyledLink;
+    return <LinkComponent {...rest} />;
+  }
+);
 
 const linkStyleProps = {
   containsIcon: PropTypes.bool,