diff --git a/CHANGELOG.md b/CHANGELOG.md
index bbb0e4145c9..e8e63b9e23b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Set `textOnly={true}` for expanded rows in `EuiBasicTable` ([#2376](https://github.com/elastic/eui/pull/2376))
 - Added `visAreaStacked`, `visBarVerticalStacked`, and `visBarHorizontalStacked` icons to glyph set ([#2379](https://github.com/elastic/eui/pull/2379))
 - Adjusted style of beta badge on `EuiKeyPadMenuItem` ([#2375](https://github.com/elastic/eui/pull/2375))
+- Migrate `EuiFacetGroup`, `EuiKeyPadMenu` and `EuiCallOut` to TS ([#2382](https://github.com/elastic/eui/pull/2382))
 
 **Bug fixes**
 
diff --git a/src/components/call_out/__snapshots__/call_out.test.js.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
similarity index 100%
rename from src/components/call_out/__snapshots__/call_out.test.js.snap
rename to src/components/call_out/__snapshots__/call_out.test.tsx.snap
diff --git a/src/components/call_out/call_out.test.js b/src/components/call_out/call_out.test.tsx
similarity index 100%
rename from src/components/call_out/call_out.test.js
rename to src/components/call_out/call_out.test.tsx
diff --git a/src/components/call_out/call_out.js b/src/components/call_out/call_out.tsx
similarity index 60%
rename from src/components/call_out/call_out.js
rename to src/components/call_out/call_out.tsx
index 2b45a0441b8..5dce716fd7d 100644
--- a/src/components/call_out/call_out.js
+++ b/src/components/call_out/call_out.tsx
@@ -1,32 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { IconPropType, EuiIcon } from '../icon';
+import { CommonProps, Omit, keysOf } from '../common';
+import { IconType, EuiIcon } from '../icon';
 
 import { EuiText } from '../text';
 
-const colorToClassNameMap = {
+type Color = 'primary' | 'success' | 'warning' | 'danger';
+type Size = 's' | 'm';
+
+export type EuiCallOutProps = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: ReactNode;
+    iconType?: IconType;
+    color?: Color;
+    size?: Size;
+  };
+
+const colorToClassNameMap: { [color in Color]: string } = {
   primary: 'euiCallOut--primary',
   success: 'euiCallOut--success',
   warning: 'euiCallOut--warning',
   danger: 'euiCallOut--danger',
 };
 
-export const COLORS = Object.keys(colorToClassNameMap);
+export const COLORS = keysOf(colorToClassNameMap);
 
-const sizeToClassNameMap = {
+const sizeToClassNameMap: { [size in Size]: string } = {
   s: 'euiCallOut--small',
   m: '',
 };
 
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-export const EuiCallOut = ({
+export const EuiCallOut: FunctionComponent<EuiCallOutProps> = ({
   title,
-  color,
-  size,
+  color = 'primary',
+  size = 'm',
   iconType,
   children,
   className,
@@ -71,17 +80,3 @@ export const EuiCallOut = ({
     </div>
   );
 };
-
-EuiCallOut.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  title: PropTypes.node,
-  iconType: IconPropType,
-  color: PropTypes.oneOf(COLORS),
-  size: PropTypes.oneOf(SIZES),
-};
-
-EuiCallOut.defaultProps = {
-  color: 'primary',
-  size: 'm',
-};
diff --git a/src/components/call_out/index.d.ts b/src/components/call_out/index.d.ts
deleted file mode 100644
index fe4ea3fe77d..00000000000
--- a/src/components/call_out/index.d.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { CommonProps, Omit } from '../common';
-import { IconType } from '../icon';
-
-import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
-
-declare module '@elastic/eui' {
-  /**
-   * EuiCallOut type defs
-   *
-   * @see './code.js'
-   */
-
-  type Color = 'primary' | 'success' | 'warning' | 'danger';
-  type Size = 's' | 'm';
-
-  export interface EuiCallOutProps {
-    title?: ReactNode;
-    iconType?: IconType;
-    color?: Color;
-    size?: Size;
-  }
-
-  export const EuiCallOut: FunctionComponent<
-    CommonProps &
-      EuiCallOutProps &
-      Omit<HTMLAttributes<HTMLDivElement>, 'title'>
-  >;
-}
diff --git a/src/components/call_out/index.js b/src/components/call_out/index.js
deleted file mode 100644
index 02e7b80d960..00000000000
--- a/src/components/call_out/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiCallOut } from './call_out';
diff --git a/src/components/call_out/index.ts b/src/components/call_out/index.ts
new file mode 100644
index 00000000000..ed031412bd7
--- /dev/null
+++ b/src/components/call_out/index.ts
@@ -0,0 +1 @@
+export { EuiCallOut, EuiCallOutProps } from './call_out';
diff --git a/src/components/facet/__snapshots__/facet_group.test.js.snap b/src/components/facet/__snapshots__/facet_group.test.tsx.snap
similarity index 100%
rename from src/components/facet/__snapshots__/facet_group.test.js.snap
rename to src/components/facet/__snapshots__/facet_group.test.tsx.snap
diff --git a/src/components/facet/facet_group.test.js b/src/components/facet/facet_group.test.tsx
similarity index 100%
rename from src/components/facet/facet_group.test.js
rename to src/components/facet/facet_group.test.tsx
diff --git a/src/components/facet/facet_group.js b/src/components/facet/facet_group.tsx
similarity index 54%
rename from src/components/facet/facet_group.js
rename to src/components/facet/facet_group.tsx
index 11fa795c783..93e0e762ff2 100644
--- a/src/components/facet/facet_group.js
+++ b/src/components/facet/facet_group.tsx
@@ -1,16 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+
+import { CommonProps } from '../common';
 import { EuiFlexGroup } from '../flex';
 
-const layoutToClassNameMap = {
+type FacetGroupLayout = 'vertical' | 'horizontal';
+
+const layoutToClassNameMap: { [layout in FacetGroupLayout]: string } = {
   vertical: 'euiFacetGroup--vertical',
   horizontal: 'euiFacetGroup--horizontal',
 };
 
-export const LAYOUTS = Object.keys(layoutToClassNameMap);
+export type EuiFacetGroupProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    layout?: FacetGroupLayout;
+  };
 
-export const EuiFacetGroup = ({ children, className, layout, ...rest }) => {
+export const EuiFacetGroup: FunctionComponent<EuiFacetGroupProps> = ({
+  children,
+  className,
+  layout = 'vertical',
+  ...rest
+}) => {
   const classes = classNames(
     'euiFacetGroup',
     layoutToClassNameMap[layout],
@@ -30,13 +41,3 @@ export const EuiFacetGroup = ({ children, className, layout, ...rest }) => {
     </EuiFlexGroup>
   );
 };
-
-EuiFacetGroup.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layout: PropTypes.oneOf(LAYOUTS),
-};
-
-EuiFacetGroup.defaultProps = {
-  layout: 'vertical',
-};
diff --git a/src/components/facet/index.d.ts b/src/components/facet/index.d.ts
deleted file mode 100644
index 721f430bd8b..00000000000
--- a/src/components/facet/index.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ButtonHTMLAttributes, HTMLAttributes, FunctionComponent } from 'react';
-import { CommonProps } from '../common';
-/// <reference path="../flex/index.d.ts" />
-
-import { EuiFacetButtonProps as ButtonProps } from './facet_button';
-
-declare module '@elastic/eui' {
-  /**
-   * Facet button type defs
-   *
-   * @see './facet_button.js'
-   */
-
-  export type EuiFacetButtonProps = ButtonProps;
-
-  export const EuiFacetButton: FunctionComponent<
-    CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & EuiFacetButtonProps
-  >;
-
-  /**
-   * Facet group type defs
-   *
-   * @see './facet_group.js'
-   */
-
-  export type FacetGroupLayouts = 'vertical' | 'horizontal';
-  export interface EuiFacetGroupProps {
-    layout?: FacetGroupLayouts;
-  }
-
-  export const EuiFacetGroup: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiFacetGroupProps
-  >;
-}
diff --git a/src/components/facet/index.js b/src/components/facet/index.js
deleted file mode 100644
index 5167e39f55c..00000000000
--- a/src/components/facet/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { EuiFacetButton } from './facet_button';
-
-export { EuiFacetGroup } from './facet_group';
diff --git a/src/components/facet/index.ts b/src/components/facet/index.ts
new file mode 100644
index 00000000000..93cf75edce9
--- /dev/null
+++ b/src/components/facet/index.ts
@@ -0,0 +1,3 @@
+export { EuiFacetButton, EuiFacetButtonProps } from './facet_button';
+
+export { EuiFacetGroup, EuiFacetGroupProps } from './facet_group';
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index f24fde2edc1..3d2aee04b16 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -1,16 +1,13 @@
-/// <reference path="./call_out/index.d.ts" />
 /// <reference path="./code/index.d.ts" />
 /// <reference path="./card/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />
-/// <reference path="./facet/index.d.ts" />
 /// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./header/index.d.ts" />
-/// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./page/index.d.ts" />
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.js.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
similarity index 100%
rename from src/components/key_pad_menu/__snapshots__/key_pad_menu.test.js.snap
rename to src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.js.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
similarity index 100%
rename from src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.js.snap
rename to src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
diff --git a/src/components/key_pad_menu/index.d.ts b/src/components/key_pad_menu/index.d.ts
deleted file mode 100644
index 151b430b16f..00000000000
--- a/src/components/key_pad_menu/index.d.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { CommonProps } from '../common';
-import { IconType } from '../icon';
-
-import {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  ReactNode,
-  FunctionComponent,
-} from 'react';
-
-declare module '@elastic/eui' {
-  export const EuiKeyPadMenu: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement>
-  >;
-
-  interface EuiKeyPadMenuItemCommonProps {
-    label: ReactNode;
-    betaBadgeLabel?: string;
-    betaBadgeIconType?: IconType;
-    betaBadgeTooltipContent?: ReactNode;
-  }
-
-  export const EuiKeyPadMenuItemButton: FunctionComponent<
-    CommonProps &
-      ButtonHTMLAttributes<HTMLButtonElement> &
-      EuiKeyPadMenuItemCommonProps
-  >;
-
-  export const EuiKeyPadMenuItem: FunctionComponent<
-    CommonProps &
-      AnchorHTMLAttributes<HTMLAnchorElement> &
-      EuiKeyPadMenuItemCommonProps
-  >;
-}
diff --git a/src/components/key_pad_menu/index.js b/src/components/key_pad_menu/index.ts
similarity index 100%
rename from src/components/key_pad_menu/index.js
rename to src/components/key_pad_menu/index.ts
diff --git a/src/components/key_pad_menu/key_pad_menu.js b/src/components/key_pad_menu/key_pad_menu.js
deleted file mode 100644
index 925ea6eb5f8..00000000000
--- a/src/components/key_pad_menu/key_pad_menu.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiKeyPadMenu = ({ children, className, ...rest }) => {
-  const classes = classNames('euiKeyPadMenu', className);
-
-  return (
-    <div className={classes} role="menu" {...rest}>
-      {children}
-    </div>
-  );
-};
-
-EuiKeyPadMenu.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
diff --git a/src/components/key_pad_menu/key_pad_menu.test.js b/src/components/key_pad_menu/key_pad_menu.test.tsx
similarity index 100%
rename from src/components/key_pad_menu/key_pad_menu.test.js
rename to src/components/key_pad_menu/key_pad_menu.test.tsx
diff --git a/src/components/key_pad_menu/key_pad_menu.tsx b/src/components/key_pad_menu/key_pad_menu.tsx
new file mode 100644
index 00000000000..c2f2594f212
--- /dev/null
+++ b/src/components/key_pad_menu/key_pad_menu.tsx
@@ -0,0 +1,20 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { CommonProps } from '../common';
+
+export type EuiKeyPadMenuProps = CommonProps & HTMLAttributes<HTMLDivElement>;
+
+export const EuiKeyPadMenu: FunctionComponent<EuiKeyPadMenuProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiKeyPadMenu', className);
+
+  return (
+    <div className={classes} role="menu" {...rest}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/key_pad_menu/key_pad_menu_item.test.js b/src/components/key_pad_menu/key_pad_menu_item.test.tsx
similarity index 84%
rename from src/components/key_pad_menu/key_pad_menu_item.test.js
rename to src/components/key_pad_menu/key_pad_menu_item.test.tsx
index ae9ecf11701..e9e1dfb3eb3 100644
--- a/src/components/key_pad_menu/key_pad_menu_item.test.js
+++ b/src/components/key_pad_menu/key_pad_menu_item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, shallow } from 'enzyme';
-import sinon from 'sinon';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import {
   EuiKeyPadMenuItem,
@@ -43,7 +42,7 @@ describe('EuiKeyPadMenuItemButton', () => {
 
   describe('onClick', () => {
     test("isn't called upon instantiation", () => {
-      const onClickHandler = sinon.stub();
+      const onClickHandler = jest.fn();
 
       shallow(
         <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
@@ -51,11 +50,11 @@ describe('EuiKeyPadMenuItemButton', () => {
         </EuiKeyPadMenuItemButton>
       );
 
-      sinon.assert.notCalled(onClickHandler);
+      expect(onClickHandler).not.toBeCalled();
     });
 
     test('is called when the button is clicked', () => {
-      const onClickHandler = sinon.stub();
+      const onClickHandler = jest.fn();
 
       const $button = shallow(
         <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
@@ -65,7 +64,7 @@ describe('EuiKeyPadMenuItemButton', () => {
 
       $button.simulate('click');
 
-      sinon.assert.calledOnce(onClickHandler);
+      expect(onClickHandler).toBeCalledTimes(1);
     });
   });
 });
diff --git a/src/components/key_pad_menu/key_pad_menu_item.js b/src/components/key_pad_menu/key_pad_menu_item.tsx
similarity index 63%
rename from src/components/key_pad_menu/key_pad_menu_item.js
rename to src/components/key_pad_menu/key_pad_menu_item.tsx
index c1bb3ab1616..4f6a9fb8a04 100644
--- a/src/components/key_pad_menu/key_pad_menu_item.js
+++ b/src/components/key_pad_menu/key_pad_menu_item.tsx
@@ -1,17 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
 
-import { EuiBetaBadge } from '../../components/badge/beta_badge';
+import { CommonProps } from '../common';
 
-import { IconPropType } from '../icon';
+import { EuiBetaBadge } from '../badge/beta_badge';
+
+import { IconType } from '../icon';
 
 const renderContent = (
-  children,
-  label,
-  betaBadgeLabel,
-  betaBadgeTooltipContent,
-  betaBadgeIconType
+  children: ReactNode,
+  label: ReactNode,
+  betaBadgeLabel?: ReactNode,
+  betaBadgeTooltipContent?: ReactNode,
+  betaBadgeIconType?: IconType
 ) => (
   <div className="euiKeyPadMenuItem__inner">
     {betaBadgeLabel && (
@@ -31,28 +37,32 @@ const renderContent = (
   </div>
 );
 
-const commonPropTypes = {
-  children: PropTypes.node.isRequired,
-  label: PropTypes.node.isRequired,
+interface EuiKeyPadMenuItemCommonProps {
+  children: ReactNode;
+  isDisabled?: boolean;
+  label: ReactNode;
 
   /**
    * Add a badge to the card to label it as "Beta" or other non-GA state
    */
-  betaBadgeLabel: PropTypes.string,
+  betaBadgeLabel?: string;
 
   /**
    * Supply an icon type if the badge should just be an icon
    */
-  betaBadgeIconType: IconPropType,
+  betaBadgeIconType?: IconType;
 
   /**
    * Add a description to the beta badge (will appear in a tooltip)
    */
-  betaBadgeTooltipContent: PropTypes.node,
-  isDisabled: PropTypes.bool,
-};
+  betaBadgeTooltipContent?: ReactNode;
+}
+
+export type EuiKeyPadMenuItemProps = CommonProps &
+  AnchorHTMLAttributes<HTMLAnchorElement> &
+  EuiKeyPadMenuItemCommonProps;
 
-export const EuiKeyPadMenuItem = ({
+export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   href,
   isDisabled,
   label,
@@ -86,7 +96,12 @@ export const EuiKeyPadMenuItem = ({
   }
 
   return (
-    <button type="button" disabled={isDisabled} className={classes} {...rest}>
+    <button
+      type="button"
+      disabled={isDisabled}
+      className={classes}
+      // Type case needed due to how the props are defined
+      {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
       {renderContent(
         children,
         label,
@@ -98,14 +113,13 @@ export const EuiKeyPadMenuItem = ({
   );
 };
 
-EuiKeyPadMenuItem.propTypes = {
-  ...{
-    href: PropTypes.string,
-  },
-  ...commonPropTypes,
-};
+export type EuiKeyPadMenuItemButtonProps = CommonProps &
+  ButtonHTMLAttributes<HTMLButtonElement> &
+  EuiKeyPadMenuItemCommonProps;
 
-export const EuiKeyPadMenuItemButton = ({
+export const EuiKeyPadMenuItemButton: FunctionComponent<
+  EuiKeyPadMenuItemButtonProps
+> = ({
   onClick,
   label,
   children,
@@ -141,10 +155,3 @@ export const EuiKeyPadMenuItemButton = ({
     </button>
   );
 };
-
-EuiKeyPadMenuItemButton.propTypes = {
-  ...{
-    onClick: PropTypes.func,
-  },
-  ...commonPropTypes,
-};