chore(ui-components): minor adjustments in Button component (#45480)

.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": [
     {

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 => {

tools/ui-components/src/button/button.tsx

@@ -45,21 +45,28 @@ const computeClassNames = ({
   return classNames.join(' ');
 };
 
-export const Button = ({
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  variant = 'primary',
+  (
-  size = 'medium',
+    {
-  type = 'button',
+      variant = 'primary',
-  onClick,
+      size = 'medium',
-  children
+      type = 'button',
-}: ButtonProps) => {
+      onClick,
-  const classes = useMemo(
+      children
-    () => computeClassNames({ size, variant }),
+    },
-    [size, variant]
+    ref
-  );
+  ) => {
+    const classes = useMemo(
+      () => computeClassNames({ size, variant }),
+      [size, variant]
+    );
 
-  return (
+    return (
-    <button className={classes} type={type} onClick={onClick}>
+      <button ref={ref} className={classes} type={type} onClick={onClick}>
-      {children}
+        {children}
-    </button>
+      </button>
-  );
+    );
-};
+  }
+);
+
+Button.displayName = 'Button';

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;