From 8f8d3b1ac5352e6516335a5ffd7c78e49216634d Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 3 Oct 2018 15:12:05 -0600
Subject: [PATCH 1/2] Fix EuiKeyPadMenu component ts prop defs

---
 src/components/key_pad_menu/index.d.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/key_pad_menu/index.d.ts b/src/components/key_pad_menu/index.d.ts
index 2ee3e45e01f..2b53cb923d9 100644
--- a/src/components/key_pad_menu/index.d.ts
+++ b/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
   >;
 }

From fe730f324e38bab4496cc07e55e96764b4119bd2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 3 Oct 2018 15:41:41 -0600
Subject: [PATCH 2/2] changelog, typescript documentation

---
 CHANGELOG.md                  |  4 +++-
 wiki/component-development.md | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6493c96789f..3ee85221913 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/wiki/component-development.md b/wiki/component-development.md
index e25ae9d45c4..dee9cbb3813 100644
--- a/wiki/component-development.md
+++ b/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
+}
+```