@indico-data/design-system 3.11.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.mdx

@@ -14,6 +14,10 @@ The Button component is one of the most versitile components we can use in our D
 
 <Controls of={ButtonStories.Default} />
 
+## Event Handlers
+
+Use the event props to respond to interactions, including `onBlur` for focus loss, `onClick` for activation, `onMouseEnter`/`onMouseExit` for hover changes, and `onKeyDown` for keyboard support.
+
 ## Sizes
 
 The Sizes available are small (`xs`), medium (`sm`), large (`md`), and extra large (`lg`). The default size is medium.

package/src/components/button/Button.stories.tsx

@@ -132,6 +132,10 @@ const meta: Meta = {
     },
 
     // Event Handlers
+    onBlur: {
+      table: { category: 'Event Handlers' },
+      action: 'blurred',
+    },
     onClick: {
       table: { category: 'Event Handlers' },
       action: 'clicked',

package/src/components/button/Button.tsx

@@ -20,6 +20,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     onMouseEnter,
     onMouseExit,
     onKeyDown,
+    onBlur,
     className,
     href,
     ...rest
@@ -57,6 +58,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseExit}
       onKeyDown={onKeyDown}
+      onBlur={onBlur}
       {...rest}
     >
       {/* Loading Icon on the left (default) */}

package/src/components/button/types.ts

@@ -27,6 +27,10 @@ export interface ButtonProps {
    * The function to call when the mouse exits the button
    */
   onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * The function to call when the button loses focus
+   */
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   /**
    * The function to call when the button is clicked
    */