fix: make Button accept ref property

quid · Apr 12, 2019 · 9f0c810 · 9f0c810
1 parent 1fdcb31
commit 9f0c810
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 49 deletions.
diff --git a/packages/react-core/src/Button/__snapshots__/index.test.js.snap b/packages/react-core/src/Button/__snapshots__/index.test.js.snap
@@ -72,16 +72,19 @@ exports[`renders a Button with small size 1`] = `
   size="small"
   type="button"
 >
-  <button
+  <ForwardRef
     className="emotion-0 emotion-1"
+    importance="secondary"
+    size="small"
     type="button"
   >
-    <span
-      key=".0"
+    <button
+      className="emotion-0 emotion-1"
+      type="button"
     >
       Hello, World!
-    </span>
-  </button>
+    </button>
+  </ForwardRef>
 </Button>
 `;
 
@@ -168,17 +171,22 @@ exports[`renders a disabled and transparent Button 1`] = `
   transparent={true}
   type="button"
 >
-  <button
+  <ForwardRef
     className="emotion-0 emotion-1"
     disabled={true}
+    importance="secondary"
+    size="regular"
+    transparent={true}
     type="button"
   >
-    <span
-      key=".0"
+    <button
+      className="emotion-0 emotion-1"
+      disabled={true}
+      type="button"
     >
       Hello, World!
-    </span>
-  </button>
+    </button>
+  </ForwardRef>
 </Button>
 `;
 
@@ -255,16 +263,20 @@ exports[`renders the expected markup 1`] = `
   size="regular"
   type="button"
 >
-  <button
+  <ForwardRef
     className="emotion-0 emotion-1"
     data-action="foo"
+    importance="secondary"
+    size="regular"
     type="button"
   >
-    <span
-      key=".0"
+    <button
+      className="emotion-0 emotion-1"
+      data-action="foo"
+      type="button"
     >
       Hello, World!
-    </span>
-  </button>
+    </button>
+  </ForwardRef>
 </Button>
 `;
diff --git a/packages/react-core/src/Button/index.js b/packages/react-core/src/Button/index.js
@@ -72,41 +72,35 @@ const reset = css`
 `;
 
 const Button = styled(
-  ({
-    to,
-    href,
-    transparent,
-    size,
-    importance,
-    disabled,
-    type,
-    children,
-    ...props
-  }: Props) => {
-    let Tag, specificProps;
-    if (to && !disabled) {
-      Tag = Link;
-      specificProps = { to };
-    } else if ((href || to) && !disabled) {
-      Tag = 'a';
-      specificProps = { href };
-    } else {
-      Tag = 'button';
-      specificProps = { disabled, type };
-    }
+  React.forwardRef(
+    (
+      {
+        to,
+        href,
+        transparent,
+        size,
+        importance,
+        disabled,
+        type,
+        ...props
+      }: Props,
+      ref: React.ElementRef<any>
+    ) => {
+      let Tag, specificProps;
+      if (to && !disabled) {
+        Tag = Link;
+        specificProps = { to };
+      } else if ((href || to) && !disabled) {
+        Tag = 'a';
+        specificProps = { href };
+      } else {
+        Tag = 'button';
+        specificProps = { disabled, type };
+      }
 
-    return (
-      <Tag {...specificProps} {...props}>
-        {React.Children.map(children, node =>
-          ['string', 'number'].includes(typeof node) ? (
-            <span>{node}</span>
-          ) : (
-            node
-          )
-        )}
-      </Tag>
-    );
-  }
+      return <Tag {...specificProps} {...props} ref={ref} />;
+    }
+  )
 )`
   ${reset};