From 06a1aa39b26149e20186454f118c91405a648637 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 23 Mar 2022 15:23:26 +0700
Subject: [PATCH] chore(ui-components): minor adjustments in Button component
 (#45480)

---
 .eslintrc.json                                |  3 +-
 .../src/button/button.stories.tsx             | 15 ++++++-
 tools/ui-components/src/button/button.tsx     | 41 +++++++++++--------
 tools/ui-components/src/button/types.ts       |  3 +-
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index a831dd4b16..50dad0fcab 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -34,7 +34,8 @@
     "import/named": 2,
     "import/no-named-as-default": 0,
     "import/no-named-as-default-member": 0,
-    "import/order": 2
+    "import/order": 2,
+    "react/prop-types": "off"
   },
   "overrides": [
     {
diff --git a/tools/ui-components/src/button/button.stories.tsx b/tools/ui-components/src/button/button.stories.tsx
index cd84ad4c03..d78db5b9b4 100644
--- a/tools/ui-components/src/button/button.stories.tsx
+++ b/tools/ui-components/src/button/button.stories.tsx
@@ -5,7 +5,20 @@ import { Button, ButtonProps } from '.';
 
 const story = {
   title: 'Example/Button',
-  component: Button
+  component: Button,
+  parameters: {
+    controls: {
+      include: ['children', 'variant', 'size']
+    }
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'danger']
+    },
+    size: {
+      options: ['small', 'medium', 'large']
+    }
+  }
 };
 
 const Template: Story<ButtonProps> = args => {
diff --git a/tools/ui-components/src/button/button.tsx b/tools/ui-components/src/button/button.tsx
index 4c668be9c6..0b4e82bf5d 100644
--- a/tools/ui-components/src/button/button.tsx
+++ b/tools/ui-components/src/button/button.tsx
@@ -45,21 +45,28 @@ const computeClassNames = ({
   return classNames.join(' ');
 };
 
-export const Button = ({
-  variant = 'primary',
-  size = 'medium',
-  type = 'button',
-  onClick,
-  children
-}: ButtonProps) => {
-  const classes = useMemo(
-    () => computeClassNames({ size, variant }),
-    [size, variant]
-  );
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'medium',
+      type = 'button',
+      onClick,
+      children
+    },
+    ref
+  ) => {
+    const classes = useMemo(
+      () => computeClassNames({ size, variant }),
+      [size, variant]
+    );
 
-  return (
-    <button className={classes} type={type} onClick={onClick}>
-      {children}
-    </button>
-  );
-};
+    return (
+      <button ref={ref} className={classes} type={type} onClick={onClick}>
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
diff --git a/tools/ui-components/src/button/types.ts b/tools/ui-components/src/button/types.ts
index 417bceb0a3..48cc43a3a3 100644
--- a/tools/ui-components/src/button/types.ts
+++ b/tools/ui-components/src/button/types.ts
@@ -4,7 +4,8 @@ export type ButtonVariant = 'primary' | 'danger';
 
 export type ButtonSize = 'small' | 'medium' | 'large';
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   variant?: ButtonVariant;
   size?: ButtonSize;