fix(button): forward on:focus event (#1878)

Fixes #1830

COMPONENT_INDEX.md

@@ -401,6 +401,8 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
 | click      | forwarded | --     |
+| focus      | forwarded | --     |
+| blur       | forwarded | --     |
 | mouseover  | forwarded | --     |
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
@@ -441,9 +443,11 @@ None.
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
 | click      | forwarded | --     |
+| focus      | forwarded | --     |
 | mouseover  | forwarded | --     |
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
+| blur       | forwarded | --     |
 
 ## `Checkbox`
 

docs/src/COMPONENT_API.json

@@ -637,6 +637,8 @@
       ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" },
         {
           "type": "forwarded",
           "name": "mouseover",
@@ -715,9 +717,11 @@
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "a" },
+        { "type": "forwarded", "name": "focus", "element": "a" },
         { "type": "forwarded", "name": "mouseover", "element": "a" },
         { "type": "forwarded", "name": "mouseenter", "element": "a" },
-        { "type": "forwarded", "name": "mouseleave", "element": "a" }
+        { "type": "forwarded", "name": "mouseleave", "element": "a" },
+        { "type": "forwarded", "name": "blur", "element": "div" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "a" }

src/Button/Button.svelte

@@ -134,6 +134,8 @@
     {...$$restProps}
     style="{hasIconOnly && 'width: 3rem;'}"
     on:click
+    on:focus
+    on:blur
     on:mouseover
     on:mouseenter
     on:mouseleave
@@ -147,6 +149,8 @@
     bind:this="{ref}"
     {...buttonProps}
     on:click
+    on:focus
+    on:blur
     on:mouseover
     on:mouseenter
     on:mouseleave
@@ -166,6 +170,8 @@
     bind:this="{ref}"
     {...buttonProps}
     on:click
+    on:focus
+    on:blur
     on:mouseover
     on:mouseenter
     on:mouseleave

src/Button/ButtonSkeleton.svelte

@@ -26,6 +26,8 @@
     class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
+    on:focus
+    on:blur
     on:mouseover
     on:mouseenter
     on:mouseleave
@@ -43,6 +45,8 @@
     class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
+    on:focus
+    on:blur
     on:mouseover
     on:mouseenter
     on:mouseleave

types/Button/Button.svelte.d.ts

@@ -114,6 +114,8 @@ export default class Button extends SvelteComponentTyped<
   ButtonProps,
   {
     click: WindowEventMap["click"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];

types/Button/ButtonSkeleton.svelte.d.ts

@@ -23,9 +23,11 @@ export default class ButtonSkeleton extends SvelteComponentTyped<
   ButtonSkeletonProps,
   {
     click: WindowEventMap["click"];
+    focus: WindowEventMap["focus"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
+    blur: WindowEventMap["blur"];
   },
   {}
 > {}