@indico-data/design-system 3.11.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.11.0",
+  "version": "3.13.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

@@ -17,9 +17,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     onClick,
     type = 'button',
     size = 'md',
-    onMouseEnter,
     onMouseExit,
-    onKeyDown,
     className,
     href,
     ...rest
@@ -54,9 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       aria-disabled={isLoading || isDisabled}
       aria-busy={isLoading}
       type={type}
-      onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseExit}
-      onKeyDown={onKeyDown}
       {...rest}
     >
       {/* Loading Icon on the left (default) */}

package/src/components/button/types.ts

@@ -6,35 +6,15 @@ export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 
-export interface ButtonProps {
-  /**
-   * The class name to apply to the button
-   */
-  className?: string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The aria-label to apply to the button
    */
   ariaLabel: string;
-  /**
-   * The children to apply to the button
-   */
-  children?: React.ReactNode | React.ReactNode[];
-  /**
-   * The function to call when the mouse enters the button
-   */
-  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * The function to call when the mouse exits the button
    */
   onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * The function to call when the button is clicked
-   */
-  onClick?: (...args: any[]) => void;
-  /**
-   * The function to call when the button is pressed
-   */
-  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   /**
    * Determines the visual style and emphasis level of the button
    */