Acutally fix types for Button component mouse and focus events

thumbtack · Apr 3, 2024 · f468cf4 · f468cf4
1 parent f4f82ae
commit f468cf4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/packages/thumbprint-react/CHANGELOG.md b/packages/thumbprint-react/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixed
+
+-   [Patch] Acutally fix types for Button component mouse and focus events
+
 ## 14.18.1 - 2024-04-03
 
 ### Fixed

diff --git a/packages/thumbprint-react/components/Button/index.tsx b/packages/thumbprint-react/components/Button/index.tsx
@@ -100,28 +100,28 @@ export interface TextButtonProps {
     /**
      * Function that will run when the button is clicked on.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers on the button.
      */
-    onMouseEnter?: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers on the button. Unlike `onMouseEnter`, `onMouseOver`
      * fires each time a child element receives focus.
      */
-    onMouseOver?: () => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the button receives focus.
      */
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers away from the button.
      */
-    onMouseLeave?: () => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the button loses focus.
      */
-    onBlur?: () => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
     /**
      * Description of the button’s content. It is required if the button has an icon and no
      * descriptive text.
@@ -233,28 +233,28 @@ export interface ButtonProps {
     /**
      * Function that will run when the button is clicked on.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers on the button.
      */
-    onMouseEnter?: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers on the button. Unlike `onMouseEnter`, `onMouseOver`
      * fires each time a child element receives focus.
      */
-    onMouseOver?: () => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the button receives focus.
      */
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
     /**
      * Function that runs when the user hovers away from the button.
      */
-    onMouseLeave?: () => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * Function that runs when the button loses focus.
      */
-    onBlur?: () => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
     /**
      * Controls the button’s background, text, and border color.
      */