Fix EuiKeyPadMenu component ts prop defs (#1232)

* Fix EuiKeyPadMenu component ts prop defs

* changelog, typescript documentation

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.4.0`.
+**Bug fixes**
+
+- Fixes TypeScript definitions for `EuiKeyPadMenuItem` and `EuiKeyPadMenuItemButton` ([#1232](https://github.com/elastic/eui/pull/1232))
 
 ## [`4.4.0`](https://github.com/elastic/eui/tree/v4.4.0)
 

src/components/key_pad_menu/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../common.d.ts" />
 
-import { HTMLAttributes, MouseEventHandler, ReactNode, SFC } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode, SFC } from 'react';
 
 declare module '@elastic/eui' {
 
@@ -16,10 +16,10 @@ declare module '@elastic/eui' {
   }
 
   export const EuiKeyPadMenuItemButton: SFC<
-    CommonProps & HTMLAttributes<HTMLButtonElement> & EuiKeyPadMenuItemCommonProps
+    CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & EuiKeyPadMenuItemCommonProps
   >;
 
   export const EuiKeyPadMenuItem: SFC<
-    CommonProps & HTMLAttributes<HTMLAnchorElement> & EuiKeyPadMenuItemCommonProps
+    CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & EuiKeyPadMenuItemCommonProps
   >;
 }

wiki/component-development.md

@@ -73,3 +73,36 @@ We follow Kibana's [CSS style guide][kibana-css] and [SCSS style guide][kibana-s
 [docs-manual]: creating-components-manually.md
 [kibana-css]: https://github.com/elastic/kibana/blob/master/style_guides/css_style_guide.md
 [kibana-scss]: https://github.com/elastic/kibana/blob/master/style_guides/scss_style_guide.md
+
+## TypeScript definitions
+
+### Pass-through props
+
+Many of our components use `rest parameters` and the `spread` operator to pass props through to an underlying DOM element. In those instances the component's TypeScript definition needs to properly include the target DOM element's props.
+
+A `Foo` component that passes `...rest` through to a `button` element would have the props interface 
+
+```
+// passes extra props to a button
+interface FooProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string
+}
+```
+
+Some DOM elements (e.g. `div`, `span`) do not have attributes beyond the basic ones provided by all HTML elements. In these cases there isn't a specific `*HTMLAttributes<T>` interface, and you should use `HTMLAttributes<HTMLDivElement>`.
+
+```
+// passes extra props to a div
+interface FooProps extends HTMLAttributes<HTMLDivElement> {
+  title: string
+}
+```
+
+If your component forwards the `ref` through to an underlying element, the interface is further extended with `DetailedHTMLProps`
+
+```
+// passes extra props and forwards the ref to a button
+interface FooProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  title: string
+}
+```