Merge pull request #204 from storybookjs/forward-ref

Forward ref for button, link components
storybookjs · Aug 18, 2020 · 3b16471 · 3b16471
2 parents 916df2a + fa2fb1f
commit 3b16471
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { darken, rgba, opacify } from 'polished';
@@ -453,20 +453,28 @@ ButtonComponentPicker.defaultProps = {
   ...buttonStyleDefaultProps,
 };
 
-export function Button({ children, isDisabled, isLoading, loadingText, ...rest }) {
-  const content = (
-    <>
-      <Text>{children}</Text>
-      {isLoading && <Loading>{loadingText || 'Loading...'}</Loading>}
-    </>
-  );
-
-  return (
-    <StyledButton as={ButtonComponentPicker} disabled={isDisabled} isLoading={isLoading} {...rest}>
-      {content}
-    </StyledButton>
-  );
-}
+export const Button = forwardRef(
+  ({ children, isDisabled, isLoading, loadingText, ...rest }, ref) => {
+    const content = (
+      <>
+        <Text>{children}</Text>
+        {isLoading && <Loading>{loadingText || 'Loading...'}</Loading>}
+      </>
+    );
+
+    return (
+      <StyledButton
+        as={ButtonComponentPicker}
+        disabled={isDisabled}
+        isLoading={isLoading}
+        ref={ref}
+        {...rest}
+      >
+        {content}
+      </StyledButton>
+    );
+  }
+);
 
 Button.propTypes = {
   ...buttonStyleProps,

diff --git a/src/components/Link.js b/src/components/Link.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { darken } from 'polished';
@@ -178,7 +178,7 @@ LinkComponentPicker.defaultProps = {
 /**
  * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
  */
-export function Link({ children, withArrow, ...rest }) {
+export const Link = forwardRef(({ children, withArrow, ...rest }, ref) => {
   const content = (
     <>
       <LinkInner withArrow={withArrow}>
@@ -189,11 +189,11 @@ export function Link({ children, withArrow, ...rest }) {
   );
 
   return (
-    <StyledLink as={LinkComponentPicker} {...rest}>
+    <StyledLink as={LinkComponentPicker} ref={ref} {...rest}>
       {content}
     </StyledLink>
   );
-}
+});
 
 Link.propTypes = {
   children: PropTypes.node,