From 1d3b1456ca16331db3f3b7a2aa191b4cc70ad6d3 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 5 May 2023 16:01:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20forwardRef=20to=20Butt?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This could be useful to everyone. But at the moment is was needed for the
Select field be able to use Downshift with Button.
---
 .../react/src/components/Button/index.tsx     | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index c0f08b7..cfb3b62 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import React, { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "primary" | "secondary" | "tertiary" | "danger";
@@ -8,30 +8,41 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
 }
 
-export const Button = ({
-  children,
-  color = "primary",
-  size = "medium",
-  iconPosition = "left",
-  icon,
-  active,
-  ...props
-}: Props) => {
-  const classes = ["c__button", "c__button--" + color, "c__button--" + size];
-  if (icon && children) {
-    classes.push("c__button--with-icon--" + iconPosition);
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      children,
+      color = "primary",
+      size = "medium",
+      iconPosition = "left",
+      icon,
+      active,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      "c__button",
+      "c__button--" + color,
+      "c__button--" + size,
+      className,
+    ];
+    if (icon && children) {
+      classes.push("c__button--with-icon--" + iconPosition);
+    }
+    if (icon && !children) {
+      classes.push("c__button--icon-only");
+    }
+    if (active) {
+      classes.push("c__button--active");
+    }
+    return (
+      <button className={classes.join(" ")} {...props} ref={ref}>
+        {!!icon && iconPosition === "left" && icon}
+        {children}
+        {!!icon && iconPosition === "right" && icon}
+      </button>
+    );
   }
-  if (icon && !children) {
-    classes.push("c__button--icon-only");
-  }
-  if (active) {
-    classes.push("c__button--active");
-  }
-  return (
-    <button className={classes.join(" ")} {...props}>
-      {!!icon && iconPosition === "left" && icon}
-      {children}
-      {!!icon && iconPosition === "right" && icon}
-    </button>
-  );
-};
+);