diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74ace75f5b0..e2d565ed35c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added support to `findTestSubject` for an optional `matcher` argument, which defaults to `~=`, enabling it to identify an element based on one of multiple space-separated values within its `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587))
+- Converted `EuiFlexGrid`, `EuiFlexGroup`, `EuiFlexItem`, `EuiDescriptionList`, `EuiDescriptionListTitle`, and `EuiDescriptionListDescription` to TypeScript ([#1365](https://github.com/elastic/eui/pull/1365))
 
 ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1)
 
diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
index 65c54fbbf9f..0bece040087 100644
--- a/scripts/babel/proptypes-from-ts-props/index.js
+++ b/scripts/babel/proptypes-from-ts-props/index.js
@@ -535,7 +535,7 @@ function getPropTypesForNode(node, optional, state) {
 
       const reducedUnionTypes = tsUnionTypes.reduce(
         (foundTypes, tsUnionType) => {
-          if (types.isLiteral(tsUnionType)) {
+          if (types.isLiteral(tsUnionType) || (types.isIdentifier(tsUnionType) && tsUnionType.name === 'undefined')) {
             if (foundTypes.oneOfPropType == null) {
               foundTypes.oneOfPropType = types.arrayExpression([]);
               foundTypes.unionTypes.push(
@@ -691,6 +691,16 @@ function getPropTypesForNode(node, optional, state) {
       optional = true; // cannot call `.isRequired` on a boolean literal
       break;
 
+    case 'TSNullKeyword':
+      propType =  types.nullLiteral();
+      optional = true; // cannot call `.isRequired` on a null literal
+      break;
+
+    case 'TSUndefinedKeyword':
+      propType =  types.identifier('undefined');
+      optional = true; // cannot call `.isRequired` on an undefined literal
+      break;
+
     // very helpful debugging code
     // default:
     //   debugger;
diff --git a/scripts/babel/proptypes-from-ts-props/index.test.js b/scripts/babel/proptypes-from-ts-props/index.test.js
index acd0dd839f4..08958f2a429 100644
--- a/scripts/babel/proptypes-from-ts-props/index.test.js
+++ b/scripts/babel/proptypes-from-ts-props/index.test.js
@@ -1031,6 +1031,29 @@ FooComponent.propTypes = {
 };`);
       });
 
+      it('treats null and undefined as literals', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface IFooProps {bar: 'five' | null | undefined}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  bar: PropTypes.oneOf(["five", null, undefined]).isRequired
+};`);
+      });
+
     });
 
     describe('array / arrayOf propTypes', () => {
diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
index a759f3b0343..cbaa0b50c7c 100644
--- a/src-docs/src/views/description_list/description_list_example.js
+++ b/src-docs/src/views/description_list/description_list_example.js
@@ -9,6 +9,8 @@ import {
 import {
   EuiCode,
   EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
 } from '../../../../src/components';
 
 import DescriptionList from './description_list';
@@ -54,7 +56,7 @@ export const DescriptionListExample = {
         components separately to build a list manually.
       </p>
     ),
-    props: { EuiDescriptionList },
+    props: { EuiDescriptionList, EuiDescriptionListTitle, EuiDescriptionListDescription },
     demo: <DescriptionList />,
   }, {
     title: 'Reverse style',
diff --git a/src-docs/src/views/flex/component_span.js b/src-docs/src/views/flex/component_span.tsx
similarity index 69%
rename from src-docs/src/views/flex/component_span.js
rename to src-docs/src/views/flex/component_span.tsx
index cc7fb8b160d..ece04f096b8 100644
--- a/src-docs/src/views/flex/component_span.js
+++ b/src-docs/src/views/flex/component_span.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
-  <button onClick={() => { window.alert('click'); }}>
+  <button
+    onClick={() => {
+      window.alert('click');
+    }}>
     <EuiFlexGroup component="span">
       <EuiFlexItem component="span">
         These items are within a button
diff --git a/src-docs/src/views/flex/direction.js b/src-docs/src/views/flex/direction.tsx
similarity index 80%
rename from src-docs/src/views/flex/direction.js
rename to src-docs/src/views/flex/direction.tsx
index 0e3b7e13cc3..663b50a36e0 100644
--- a/src-docs/src/views/flex/direction.js
+++ b/src-docs/src/views/flex/direction.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup direction="column">
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index e4a9abc13ff..e6aa7f667c9 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -110,7 +110,7 @@ export const FlexExample = {
         </p>
       </div>
     ),
-    props: { EuiFlexGroup, EuiFlexItem },
+    props: { EuiFlexGroup, EuiFlexItem, EuiFlexGrid },
     demo: <div className="guideDemo__highlightGrid"><FlexGroup /></div>,
   }, {
     title: 'FlexGroup can wrap its items',
diff --git a/src-docs/src/views/flex/flex_grid.js b/src-docs/src/views/flex/flex_grid.js
deleted file mode 100644
index 6d7b254d477..00000000000
--- a/src-docs/src/views/flex/flex_grid.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
-
-const ITEM_STYLE = { width: '300px' };
-
-export default () => (
-  <div>
-    <EuiFlexGrid>
-      <EuiFlexItem style={ITEM_STYLE}><div>One</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Two</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Three</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Four</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Five</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Six</div></EuiFlexItem>
-      <EuiFlexItem style={ITEM_STYLE}><div>Seven</div></EuiFlexItem>
-    </EuiFlexGrid>
-  </div>
-);
diff --git a/src-docs/src/views/flex/flex_grid.tsx b/src-docs/src/views/flex/flex_grid.tsx
new file mode 100644
index 00000000000..ff295221066
--- /dev/null
+++ b/src-docs/src/views/flex/flex_grid.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
+
+const ITEM_STYLE = { width: '300px' };
+
+export default () => (
+  <div>
+    <EuiFlexGrid>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>One</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Two</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Three</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Four</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Five</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Six</div>
+      </EuiFlexItem>
+      <EuiFlexItem style={ITEM_STYLE}>
+        <div>Seven</div>
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  </div>
+);
diff --git a/src-docs/src/views/flex/flex_grid_columns.js b/src-docs/src/views/flex/flex_grid_columns.js
deleted file mode 100644
index 228f2d7e0b6..00000000000
--- a/src-docs/src/views/flex/flex_grid_columns.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
-
-export default () => (
-  <div>
-    <EuiFlexGrid columns={3}>
-      <EuiFlexItem><div>One</div></EuiFlexItem>
-      <EuiFlexItem><div>Two</div></EuiFlexItem>
-      <EuiFlexItem><div>Three</div></EuiFlexItem>
-      <EuiFlexItem><div>Four</div></EuiFlexItem>
-      <EuiFlexItem><div>Five</div></EuiFlexItem>
-      <EuiFlexItem><div>Six</div></EuiFlexItem>
-      <EuiFlexItem><div>Seven</div></EuiFlexItem>
-    </EuiFlexGrid>
-  </div>
-);
diff --git a/src-docs/src/views/flex/flex_grid_columns.tsx b/src-docs/src/views/flex/flex_grid_columns.tsx
new file mode 100644
index 00000000000..349b1644f33
--- /dev/null
+++ b/src-docs/src/views/flex/flex_grid_columns.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
+
+export default () => (
+  <div>
+    <EuiFlexGrid columns={3}>
+      <EuiFlexItem>
+        <div>One</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Two</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Three</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Four</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Five</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Six</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div>Seven</div>
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  </div>
+);
diff --git a/src-docs/src/views/flex/flex_group.js b/src-docs/src/views/flex/flex_group.js
deleted file mode 100644
index 3e04fa51006..00000000000
--- a/src-docs/src/views/flex/flex_group.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
-
-export default () => (
-  <EuiFlexGroup>
-    <EuiFlexItem>Content grid item</EuiFlexItem>
-    <EuiFlexItem>
-      <p>Another content grid item</p>
-      <EuiSpacer />
-      <p>Note how both of these are the same width and height despite having different content?</p>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
diff --git a/src-docs/src/views/flex/flex_group.tsx b/src-docs/src/views/flex/flex_group.tsx
new file mode 100644
index 00000000000..df45792d634
--- /dev/null
+++ b/src-docs/src/views/flex/flex_group.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
+
+export default () => (
+  <EuiFlexGroup>
+    <EuiFlexItem>Content grid item</EuiFlexItem>
+    <EuiFlexItem>
+      <p>Another content grid item</p>
+      <EuiSpacer />
+      <p>
+        Note how both of these are the same width and height despite having
+        different content?
+      </p>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src-docs/src/views/flex/flex_group_wrap.js b/src-docs/src/views/flex/flex_group_wrap.js
deleted file mode 100644
index b24fb5da1fe..00000000000
--- a/src-docs/src/views/flex/flex_group_wrap.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
-
-export default () => (
-  <EuiFlexGroup wrap>
-    <EuiFlexItem style={{ minWidth: 300 }}>
-      Min-width 300px
-    </EuiFlexItem>
-
-    <EuiFlexItem style={{ minWidth: 300 }}>
-      Min-width 300px
-    </EuiFlexItem>
-
-    <EuiFlexItem style={{ minWidth: 300 }}>
-      Min-width 300px
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
diff --git a/src-docs/src/views/flex/flex_group_wrap.tsx b/src-docs/src/views/flex/flex_group_wrap.tsx
new file mode 100644
index 00000000000..7c71a96a43a
--- /dev/null
+++ b/src-docs/src/views/flex/flex_group_wrap.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+
+export default () => (
+  <EuiFlexGroup wrap>
+    <EuiFlexItem style={{ minWidth: 300 }}>Min-width 300px</EuiFlexItem>
+
+    <EuiFlexItem style={{ minWidth: 300 }}>Min-width 300px</EuiFlexItem>
+
+    <EuiFlexItem style={{ minWidth: 300 }}>Min-width 300px</EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src-docs/src/views/flex/flex_grow_numeric.js b/src-docs/src/views/flex/flex_grow_numeric.tsx
similarity index 57%
rename from src-docs/src/views/flex/flex_grow_numeric.js
rename to src-docs/src/views/flex/flex_grow_numeric.tsx
index a948723ae95..143e959694b 100644
--- a/src-docs/src/views/flex/flex_grow_numeric.js
+++ b/src-docs/src/views/flex/flex_grow_numeric.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
     <EuiFlexGroup>
       <EuiFlexItem grow={1}>1</EuiFlexItem>
-      <EuiFlexItem grow={2}>2<br />wraps content if necessary</EuiFlexItem>
-      <EuiFlexItem grow={3}>3<br />expands_to_fit_if_content_cannot_wrap</EuiFlexItem>
+      <EuiFlexItem grow={2}>
+        2<br />
+        wraps content if necessary
+      </EuiFlexItem>
+      <EuiFlexItem grow={3}>
+        3<br />
+        expands_to_fit_if_content_cannot_wrap
+      </EuiFlexItem>
       <EuiFlexItem grow={4}>4</EuiFlexItem>
     </EuiFlexGroup>
 
diff --git a/src-docs/src/views/flex/flex_grow_zero.js b/src-docs/src/views/flex/flex_grow_zero.tsx
similarity index 75%
rename from src-docs/src/views/flex/flex_grow_zero.js
rename to src-docs/src/views/flex/flex_grow_zero.tsx
index 3863b8c8698..55e24429d2c 100644
--- a/src-docs/src/views/flex/flex_grow_zero.js
+++ b/src-docs/src/views/flex/flex_grow_zero.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <div>
diff --git a/src-docs/src/views/flex/flex_gutter.js b/src-docs/src/views/flex/flex_gutter.tsx
similarity index 91%
rename from src-docs/src/views/flex/flex_gutter.js
rename to src-docs/src/views/flex/flex_gutter.tsx
index 27035f34bd3..ccaf2ba83ed 100644
--- a/src-docs/src/views/flex/flex_gutter.js
+++ b/src-docs/src/views/flex/flex_gutter.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
diff --git a/src-docs/src/views/flex/flex_items.js b/src-docs/src/views/flex/flex_items.tsx
similarity index 77%
rename from src-docs/src/views/flex/flex_items.js
rename to src-docs/src/views/flex/flex_items.tsx
index a64e5a2060b..14dd9ba8edd 100644
--- a/src-docs/src/views/flex/flex_items.js
+++ b/src-docs/src/views/flex/flex_items.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup>
diff --git a/src-docs/src/views/flex/flex_nest.js b/src-docs/src/views/flex/flex_nest.tsx
similarity index 88%
rename from src-docs/src/views/flex/flex_nest.js
rename to src-docs/src/views/flex/flex_nest.tsx
index 5fe3b7041a2..bba6715afe8 100644
--- a/src-docs/src/views/flex/flex_nest.js
+++ b/src-docs/src/views/flex/flex_nest.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import {
+  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFlexGrid,
-  EuiSpacer,
-} from '../../../../src/components';
+} from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
diff --git a/src-docs/src/views/flex/flex_responsive.js b/src-docs/src/views/flex/flex_responsive.js
deleted file mode 100644
index 25830be977b..00000000000
--- a/src-docs/src/views/flex/flex_responsive.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiSpacer,
-} from '../../../../src/components';
-
-export default () => (
-  <div>
-    <EuiFlexGroup alignItems="center">
-      <EuiFlexItem grow={false}><EuiIcon type="faceSad" /></EuiFlexItem>
-      <EuiFlexItem grow={false}>On mobile, the icon will show above this text.</EuiFlexItem>
-    </EuiFlexGroup>
-
-    <EuiSpacer />
-
-    <EuiFlexGroup responsive={false} alignItems="center">
-      <EuiFlexItem grow={false}><EuiIcon type="faceHappy" /></EuiFlexItem>
-      <EuiFlexItem grow={false}>On mobile, the icon will stay to the left of this text.</EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-);
diff --git a/src-docs/src/views/flex/flex_responsive.tsx b/src-docs/src/views/flex/flex_responsive.tsx
new file mode 100644
index 00000000000..52ef66133bb
--- /dev/null
+++ b/src-docs/src/views/flex/flex_responsive.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiIcon } from '../../../../src/components/icon';
+
+export default () => (
+  <div>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="faceSad" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        On mobile, the icon will show above this text.
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
+    <EuiFlexGroup responsive={false} alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="faceHappy" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        On mobile, the icon will stay to the left of this text.
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);
diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
index 3852378977c..4f87fd0fd0b 100644
--- a/src/components/accordion/__snapshots__/accordion.test.js.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -11,20 +11,12 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
   >
     <EuiFlexGroup
       alignItems="center"
-      component="div"
-      direction="row"
       gutterSize="none"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
     >
       <div
         className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
+        <EuiFlexItem>
           <div
             className="euiFlexItem"
           >
@@ -37,19 +29,14 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
             >
               <EuiFlexGroup
                 alignItems="center"
-                component="div"
-                direction="row"
                 gutterSize="s"
-                justifyContent="flexStart"
                 responsive={false}
-                wrap={false}
               >
                 <div
                   className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                 >
                   <EuiFlexItem
                     className="euiAccordion__iconWrapper"
-                    component="div"
                     grow={false}
                   >
                     <div
@@ -97,8 +84,6 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
                   </EuiFlexItem>
                   <EuiFlexItem
                     className="euiAccordion__buttonContent"
-                    component="div"
-                    grow={true}
                   >
                     <div
                       className="euiFlexItem euiAccordion__buttonContent"
@@ -146,20 +131,12 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
   >
     <EuiFlexGroup
       alignItems="center"
-      component="div"
-      direction="row"
       gutterSize="none"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
     >
       <div
         className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
+        <EuiFlexItem>
           <div
             className="euiFlexItem"
           >
@@ -172,19 +149,14 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
             >
               <EuiFlexGroup
                 alignItems="center"
-                component="div"
-                direction="row"
                 gutterSize="s"
-                justifyContent="flexStart"
                 responsive={false}
-                wrap={false}
               >
                 <div
                   className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                 >
                   <EuiFlexItem
                     className="euiAccordion__iconWrapper"
-                    component="div"
                     grow={false}
                   >
                     <div
@@ -231,8 +203,6 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
                   </EuiFlexItem>
                   <EuiFlexItem
                     className="euiAccordion__buttonContent"
-                    component="div"
-                    grow={true}
                   >
                     <div
                       className="euiFlexItem euiAccordion__buttonContent"
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index cd792427920..ddf79db73d0 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -8,19 +8,13 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -135,19 +129,13 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -264,19 +252,13 @@ exports[`EuiBasicTable empty is rendered 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -346,19 +328,13 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -436,19 +412,13 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -518,19 +488,13 @@ exports[`EuiBasicTable footers do not render without a column footer definition
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -740,15 +704,10 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -759,7 +718,6 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -1074,19 +1032,13 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1212,19 +1164,13 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1345,19 +1291,13 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1478,19 +1418,13 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1590,19 +1524,13 @@ exports[`EuiBasicTable with pagination 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1719,19 +1647,13 @@ exports[`EuiBasicTable with pagination and error 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1806,15 +1728,10 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -1825,7 +1742,6 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -1987,19 +1903,13 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -2117,15 +2027,10 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -2136,7 +2041,6 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -2315,15 +2219,10 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -2334,7 +2233,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -2627,15 +2525,10 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -2646,7 +2539,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -2825,15 +2717,10 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -2844,7 +2731,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -3023,15 +2909,10 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -3042,7 +2923,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -3353,15 +3233,10 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiI18n
@@ -3372,7 +3247,6 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
           </EuiI18n>
         </EuiFlexItem>
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
@@ -3551,19 +3425,13 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         />
       </EuiFlexGroup>
@@ -3669,19 +3537,13 @@ exports[`EuiBasicTable with sorting 1`] = `
     <EuiTableHeaderMobile>
       <EuiFlexGroup
         alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="l"
         justifyContent="spaceBetween"
         responsive={false}
-        wrap={false}
       >
         <EuiFlexItem
-          component="div"
           grow={false}
         />
         <EuiFlexItem
-          component="div"
           grow={false}
         >
           <EuiTableSortMobile
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 79478d15092..c8edbf6f09f 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -102,18 +102,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           >
             <EuiFlexGroup
               alignItems="baseline"
-              component="div"
-              direction="row"
-              gutterSize="l"
               justifyContent="spaceBetween"
               responsive={false}
-              wrap={false}
             >
               <div
                 className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
               >
                 <EuiFlexItem
-                  component="div"
                   grow={false}
                 >
                   <div
@@ -121,7 +116,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   />
                 </EuiFlexItem>
                 <EuiFlexItem
-                  component="div"
                   grow={false}
                 >
                   <div
@@ -317,18 +311,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           >
             <EuiFlexGroup
               alignItems="center"
-              component="div"
-              direction="row"
-              gutterSize="l"
               justifyContent="spaceBetween"
               responsive={false}
-              wrap={false}
             >
               <div
                 className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
               >
                 <EuiFlexItem
-                  component="div"
                   grow={false}
                 >
                   <div
@@ -453,7 +442,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  component="div"
                   grow={false}
                 >
                   <div
diff --git a/src/components/common.ts b/src/components/common.ts
index 81f34a9fd46..7be26933e8c 100644
--- a/src/components/common.ts
+++ b/src/components/common.ts
@@ -16,6 +16,9 @@ export type RefCallback<Element extends HTMLElement> = (
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
+/**
+ * Wraps Object.keys with proper typescript definition of the resulting array
+ */
 export function keysOf<T, K extends keyof T>(obj: T): K[] {
   return Object.keys(obj) as K[];
 }
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
index 481b5a7612f..6afb30d435d 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
@@ -2,19 +2,11 @@
 
 exports[`EuiSuperDatePicker is rendered 1`] = `
 <EuiFlexGroup
-  alignItems="stretch"
   className="euiSuperDatePicker__flexWrapper"
-  component="div"
-  direction="row"
   gutterSize="s"
-  justifyContent="flexStart"
   responsive={false}
-  wrap={false}
 >
-  <EuiFlexItem
-    component="div"
-    grow={true}
-  >
+  <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       compressed={false}
@@ -100,7 +92,6 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
-    component="div"
     grow={false}
   >
     <EuiSuperUpdateButton
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
index 4e1b7381b99..c4465c2eb6a 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
@@ -4,17 +4,10 @@ exports[`EuiQuickSelect is rendered 1`] = `
 <Fragment>
   <EuiFlexGroup
     alignItems="center"
-    component="div"
-    direction="row"
     gutterSize="s"
-    justifyContent="flexStart"
     responsive={false}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         size="xxxs"
         textTransform="none"
@@ -25,7 +18,6 @@ exports[`EuiQuickSelect is rendered 1`] = `
       </EuiTitle>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiToolTip
@@ -44,7 +36,6 @@ exports[`EuiQuickSelect is rendered 1`] = `
       </EuiToolTip>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiToolTip
@@ -67,18 +58,10 @@ exports[`EuiQuickSelect is rendered 1`] = `
     size="s"
   />
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="s"
-    justifyContent="flexStart"
     responsive={false}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -109,10 +92,7 @@ exports[`EuiQuickSelect is rendered 1`] = `
         />
       </EuiFormRow>
     </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -130,10 +110,7 @@ exports[`EuiQuickSelect is rendered 1`] = `
         />
       </EuiFormRow>
     </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -185,7 +162,6 @@ exports[`EuiQuickSelect is rendered 1`] = `
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiFormRow
@@ -219,17 +195,10 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <Fragment>
   <EuiFlexGroup
     alignItems="center"
-    component="div"
-    direction="row"
     gutterSize="s"
-    justifyContent="flexStart"
     responsive={false}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         size="xxxs"
         textTransform="none"
@@ -240,7 +209,6 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
       </EuiTitle>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiToolTip
@@ -259,7 +227,6 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
       </EuiToolTip>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiToolTip
@@ -282,18 +249,10 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
     size="s"
   />
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="s"
-    justifyContent="flexStart"
     responsive={false}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -324,10 +283,7 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
         />
       </EuiFormRow>
     </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -345,10 +301,7 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
         />
       </EuiFormRow>
     </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiFormRow
         compressed={true}
         describedByIds={Array []}
@@ -400,7 +353,6 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <EuiFormRow
diff --git a/src/components/description_list/__snapshots__/description_list.test.js.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap
similarity index 100%
rename from src/components/description_list/__snapshots__/description_list.test.js.snap
rename to src/components/description_list/__snapshots__/description_list.test.tsx.snap
diff --git a/src/components/description_list/__snapshots__/description_list_description.test.js.snap b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap
similarity index 100%
rename from src/components/description_list/__snapshots__/description_list_description.test.js.snap
rename to src/components/description_list/__snapshots__/description_list_description.test.tsx.snap
diff --git a/src/components/description_list/__snapshots__/description_list_title.test.js.snap b/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap
similarity index 100%
rename from src/components/description_list/__snapshots__/description_list_title.test.js.snap
rename to src/components/description_list/__snapshots__/description_list_title.test.tsx.snap
diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.js
deleted file mode 100644
index e9e4f4bc223..00000000000
--- a/src/components/description_list/description_list.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {
-  EuiDescriptionListTitle,
-} from './description_list_title';
-
-import {
-  EuiDescriptionListDescription,
-} from './description_list_description';
-
-const typesToClassNameMap = {
-  row: 'euiDescriptionList--row',
-  column: 'euiDescriptionList--column',
-  inline: 'euiDescriptionList--inline',
-};
-
-export const TYPES = Object.keys(typesToClassNameMap);
-
-const alignmentsToClassNameMap = {
-  center: 'euiDescriptionList--center',
-  left: '',
-};
-
-export const ALIGNMENTS = Object.keys(alignmentsToClassNameMap);
-
-const textStylesToClassNameMap = {
-  normal: '',
-  reverse: 'euiDescriptionList--reverse',
-};
-
-export const TEXT_STYLES = Object.keys(textStylesToClassNameMap);
-
-export const EuiDescriptionList = ({
-  align,
-  children,
-  className,
-  compressed,
-  descriptionProps,
-  listItems,
-  textStyle,
-  titleProps,
-  type,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiDescriptionList',
-    typesToClassNameMap[type],
-    alignmentsToClassNameMap[align],
-    textStylesToClassNameMap[textStyle],
-    {
-      'euiDescriptionList--compressed': compressed,
-    },
-    className
-  );
-
-  let childrenOrListItems = null;
-  if (listItems) {
-    childrenOrListItems = (
-      listItems.map((item, index) => {
-        return [
-          <EuiDescriptionListTitle key={`title-${index}`} {...titleProps}>
-            {item.title}
-          </EuiDescriptionListTitle>,
-
-          <EuiDescriptionListDescription key={`description-${index}`} {...descriptionProps}>
-            {item.description}
-          </EuiDescriptionListDescription>
-        ];
-      })
-    );
-  } else {
-    childrenOrListItems = children;
-  }
-
-  return (
-    <dl
-      className={classes}
-      {...rest}
-    >
-      {childrenOrListItems}
-    </dl>
-  );
-};
-
-EuiDescriptionList.propTypes = {
-  listItems: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.node,
-    description: PropTypes.node,
-  })),
-  children: PropTypes.node,
-  className: PropTypes.string,
-
-  /**
-   * Text alignment
-   */
-  align: PropTypes.oneOf(ALIGNMENTS),
-
-  /**
-   * Smaller text and condensed spacing
-   */
-  compressed: PropTypes.bool,
-
-  /**
-   * How should the content be styled, by default
-   * this will emphasize the title
-   */
-  textStyle: PropTypes.oneOf(TEXT_STYLES),
-
-  /**
-   * How each item should be layed out
-   */
-  type: PropTypes.oneOf(TYPES),
-
-  /**
-   * Props object to be passed to `EuiDescriptionListTitle`
-   */
-  titleProps: PropTypes.object,
-
-  /**
-   * Props object to be passed to `EuiDescriptionListDescription`
-   */
-  descriptionProps: PropTypes.object,
-};
-
-EuiDescriptionList.defaultProps = {
-  align: 'left',
-  compressed: false,
-  textStyle: 'normal',
-  type: 'row',
-};
diff --git a/src/components/description_list/description_list.test.js b/src/components/description_list/description_list.test.tsx
similarity index 67%
rename from src/components/description_list/description_list.test.js
rename to src/components/description_list/description_list.test.tsx
index 734b52cbe4d..4b6232bbf32 100644
--- a/src/components/description_list/description_list.test.js
+++ b/src/components/description_list/description_list.test.tsx
@@ -7,13 +7,10 @@ import { EuiDescriptionList, TYPES, ALIGNMENTS } from './description_list';
 describe('EuiDescriptionList', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiDescriptionList {...requiredProps}>
-        Content
-      </EuiDescriptionList>
+      <EuiDescriptionList {...requiredProps}>Content</EuiDescriptionList>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
@@ -40,31 +37,24 @@ describe('EuiDescriptionList', () => {
           </EuiDescriptionList>
         );
 
-        expect(component)
-          .toMatchSnapshot();
+        expect(component).toMatchSnapshot();
       });
     });
 
     describe('compressed', () => {
       test('is rendered', () => {
-        const component = render(
-          <EuiDescriptionList compressed />
-        );
+        const component = render(<EuiDescriptionList compressed />);
 
-        expect(component)
-          .toMatchSnapshot();
+        expect(component).toMatchSnapshot();
       });
     });
 
     describe('type', () => {
       TYPES.forEach(type => {
         test(`${type} is rendered`, () => {
-          const component = render(
-            <EuiDescriptionList type={type} />
-          );
+          const component = render(<EuiDescriptionList type={type} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -72,12 +62,9 @@ describe('EuiDescriptionList', () => {
     describe('align', () => {
       ALIGNMENTS.forEach(alignment => {
         test(`${alignment} is rendered`, () => {
-          const component = render(
-            <EuiDescriptionList align={alignment} />
-          );
+          const component = render(<EuiDescriptionList align={alignment} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx
new file mode 100644
index 00000000000..c537758164e
--- /dev/null
+++ b/src/components/description_list/description_list.tsx
@@ -0,0 +1,116 @@
+import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+import { EuiDescriptionListTitle } from './description_list_title';
+
+import { EuiDescriptionListDescription } from './description_list_description';
+import { CommonProps, keysOf } from '../common';
+
+export type EuiDescriptionListType = keyof typeof typesToClassNameMap;
+export type EuiDescriptionListAlignment = keyof typeof alignmentsToClassNameMap;
+export type EuiDescriptionListTextStyle = keyof typeof textStylesToClassNameMap;
+
+export interface EuiDescriptionListProps {
+  listItems?: Array<{
+    title: NonNullable<ReactNode>;
+    description: NonNullable<ReactNode>;
+  }>;
+  /**
+   * Text alignment
+   */
+  align?: EuiDescriptionListAlignment;
+  /**
+   * Smaller text and condensed spacing
+   */
+  compressed?: boolean;
+  /**
+   * How should the content be styled, by default
+   * this will emphasize the title
+   */
+  textStyle?: EuiDescriptionListTextStyle;
+  /**
+   * How each item should be layed out
+   */
+  type?: EuiDescriptionListType;
+  /**
+   * Props object to be passed to `EuiDescriptionListTitle`
+   */
+  titleProps?: HTMLAttributes<HTMLElement>;
+  /**
+   * Props object to be passed to `EuiDescriptionListDescription`
+   */
+  descriptionProps?: HTMLAttributes<HTMLElement>;
+}
+
+const typesToClassNameMap = {
+  row: 'euiDescriptionList--row',
+  column: 'euiDescriptionList--column',
+  inline: 'euiDescriptionList--inline',
+};
+
+export const TYPES = keysOf(typesToClassNameMap);
+
+const alignmentsToClassNameMap = {
+  center: 'euiDescriptionList--center',
+  left: '',
+};
+
+export const ALIGNMENTS = keysOf(alignmentsToClassNameMap);
+
+const textStylesToClassNameMap = {
+  normal: '',
+  reverse: 'euiDescriptionList--reverse',
+};
+
+export const TEXT_STYLES = keysOf(textStylesToClassNameMap);
+
+export const EuiDescriptionList: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDListElement> & EuiDescriptionListProps
+> = ({
+  align = 'left',
+  children,
+  className,
+  compressed = false,
+  descriptionProps,
+  listItems,
+  textStyle = 'normal',
+  titleProps,
+  type = 'row',
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiDescriptionList',
+    type ? typesToClassNameMap[type] : undefined,
+    align ? alignmentsToClassNameMap[align] : undefined,
+    textStyle ? textStylesToClassNameMap[textStyle] : undefined,
+    {
+      'euiDescriptionList--compressed': compressed,
+    },
+    className
+  );
+
+  let childrenOrListItems = null;
+  if (listItems) {
+    childrenOrListItems = listItems.map((item, index) => {
+      return [
+        <EuiDescriptionListTitle key={`title-${index}`} {...titleProps}>
+          {item.title}
+        </EuiDescriptionListTitle>,
+
+        <EuiDescriptionListDescription
+          key={`description-${index}`}
+          {...descriptionProps}>
+          {item.description}
+        </EuiDescriptionListDescription>,
+      ];
+    });
+  } else {
+    childrenOrListItems = children;
+  }
+
+  return (
+    <dl className={classes} {...rest}>
+      {childrenOrListItems}
+    </dl>
+  );
+};
diff --git a/src/components/description_list/description_list_description.js b/src/components/description_list/description_list_description.js
deleted file mode 100644
index db59511b026..00000000000
--- a/src/components/description_list/description_list_description.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiDescriptionListDescription = ({
-  children,
-  className,
-  ...rest
-}) => {
-  const classes = classNames('euiDescriptionList__description', className);
-
-  return (
-    <dd
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </dd>
-  );
-};
-
-EuiDescriptionListDescription.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
diff --git a/src/components/description_list/description_list_description.test.js b/src/components/description_list/description_list_description.test.tsx
similarity index 90%
rename from src/components/description_list/description_list_description.test.js
rename to src/components/description_list/description_list_description.test.tsx
index 7a5914390a6..76fadc66bd5 100644
--- a/src/components/description_list/description_list_description.test.js
+++ b/src/components/description_list/description_list_description.test.tsx
@@ -12,7 +12,6 @@ describe('EuiDescriptionListDescription', () => {
       </EuiDescriptionListDescription>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx
new file mode 100644
index 00000000000..9c06248505d
--- /dev/null
+++ b/src/components/description_list/description_list_description.tsx
@@ -0,0 +1,15 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export const EuiDescriptionListDescription: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLElement>
+> = ({ children, className, ...rest }) => {
+  const classes = classNames('euiDescriptionList__description', className);
+
+  return (
+    <dd className={classes} {...rest}>
+      {children}
+    </dd>
+  );
+};
diff --git a/src/components/description_list/description_list_title.js b/src/components/description_list/description_list_title.js
deleted file mode 100644
index 0889a21c496..00000000000
--- a/src/components/description_list/description_list_title.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiDescriptionListTitle = ({
-  children,
-  className,
-  ...rest
-}) => {
-  const classes = classNames('euiDescriptionList__title', className);
-
-  return (
-    <dt
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </dt>
-  );
-};
-
-EuiDescriptionListTitle.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
diff --git a/src/components/description_list/description_list_title.test.js b/src/components/description_list/description_list_title.test.tsx
similarity index 89%
rename from src/components/description_list/description_list_title.test.js
rename to src/components/description_list/description_list_title.test.tsx
index 0f106f1dc16..4fbf431b433 100644
--- a/src/components/description_list/description_list_title.test.js
+++ b/src/components/description_list/description_list_title.test.tsx
@@ -12,7 +12,6 @@ describe('EuiDescriptionListTitle', () => {
       </EuiDescriptionListTitle>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx
new file mode 100644
index 00000000000..b412a532a27
--- /dev/null
+++ b/src/components/description_list/description_list_title.tsx
@@ -0,0 +1,15 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export const EuiDescriptionListTitle: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLElement>
+> = ({ children, className, ...rest }) => {
+  const classes = classNames('euiDescriptionList__title', className);
+
+  return (
+    <dt className={classes} {...rest}>
+      {children}
+    </dt>
+  );
+};
diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts
deleted file mode 100644
index 253f1372975..00000000000
--- a/src/components/description_list/index.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { HTMLAttributes, Component, ReactNode } from 'react';
-import { CommonProps } from '../common';
-
-declare module '@elastic/eui' {
-  export type EuiDescriptionListType = 'row' | 'column' | 'inline';
-  export type EuiDescriptionListAlignment = 'center' | 'left';
-  export type EuiDescriptionListTextStyle = 'normal' | 'reverse';
-
-  export interface EuiDescriptionListProps {
-    listItems?: Array<{ title: ReactNode, description: ReactNode }>;
-    align?: EuiDescriptionListAlignment;
-    compressed?: boolean;
-    textStyle?: EuiDescriptionListTextStyle;
-    type?: EuiDescriptionListType;
-    titleProps?: HTMLAttributes<HTMLElement>;
-    descriptionProps?: HTMLAttributes<HTMLElement>;
-  }
-
-  export class EuiDescriptionList extends Component<
-    CommonProps & HTMLAttributes<HTMLDListElement> & EuiDescriptionListProps
-    > {}
-
-  export interface EuiDescriptionListTitleProps {}
-
-  export class EuiDescriptionListTitle extends Component<
-    CommonProps & HTMLAttributes<HTMLElement> & EuiDescriptionListTitleProps
-    > {}
-
-  export interface EuiDescriptionListDescriptionProps {}
-
-  export class EuiDescriptionListDescription extends Component<
-    CommonProps & HTMLAttributes<HTMLElement> & EuiDescriptionListDescriptionProps
-    > {}
-}
diff --git a/src/components/description_list/index.js b/src/components/description_list/index.js
deleted file mode 100644
index 81cfd2e158e..00000000000
--- a/src/components/description_list/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export {
-  EuiDescriptionList,
-} from './description_list';
-
-export {
-  EuiDescriptionListTitle,
-} from './description_list_title';
-
-export {
-  EuiDescriptionListDescription,
-} from './description_list_description';
diff --git a/src/components/description_list/index.ts b/src/components/description_list/index.ts
new file mode 100644
index 00000000000..c456a05dea4
--- /dev/null
+++ b/src/components/description_list/index.ts
@@ -0,0 +1,5 @@
+export { EuiDescriptionList } from './description_list';
+
+export { EuiDescriptionListTitle } from './description_list_title';
+
+export { EuiDescriptionListDescription } from './description_list_description';
diff --git a/src/components/flex/__snapshots__/flex_grid.test.js.snap b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap
similarity index 100%
rename from src/components/flex/__snapshots__/flex_grid.test.js.snap
rename to src/components/flex/__snapshots__/flex_grid.test.tsx.snap
diff --git a/src/components/flex/__snapshots__/flex_group.test.js.snap b/src/components/flex/__snapshots__/flex_group.test.tsx.snap
similarity index 100%
rename from src/components/flex/__snapshots__/flex_group.test.js.snap
rename to src/components/flex/__snapshots__/flex_group.test.tsx.snap
diff --git a/src/components/flex/__snapshots__/flex_item.test.js.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
similarity index 94%
rename from src/components/flex/__snapshots__/flex_item.test.js.snap
rename to src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 8c4e9cb01d7..302bd8fc395 100644
--- a/src/components/flex/__snapshots__/flex_item.test.js.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -6,6 +6,12 @@ exports[`EuiFlexItem component div is rendered 1`] = `
 />
 `;
 
+exports[`EuiFlexItem component figure is rendered 1`] = `
+<figure
+  class="euiFlexItem"
+/>
+`;
+
 exports[`EuiFlexItem component span is rendered 1`] = `
 <span
   class="euiFlexItem"
diff --git a/src/components/flex/flex_grid.js b/src/components/flex/flex_grid.js
deleted file mode 100644
index 20e4c0c2615..00000000000
--- a/src/components/flex/flex_grid.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const gutterSizeToClassNameMap = {
-  none: null,
-  s: 'euiFlexGrid--gutterSmall',
-  m: 'euiFlexGrid--gutterMedium',
-  l: 'euiFlexGrid--gutterLarge',
-  xl: 'euiFlexGrid--gutterXLarge',
-};
-
-export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);
-
-const columnsToClassNameMap = {
-  0: 'euiFlexGrid--wrap',
-  1: 'euiFlexGrid--single',
-  2: 'euiFlexGrid--halves',
-  3: 'euiFlexGrid--thirds',
-  4: 'euiFlexGrid--fourths',
-};
-
-export const COLUMNS = Object.keys(columnsToClassNameMap).map(columns => parseInt(columns, 10));
-
-export const EuiFlexGrid = ({ children, className, gutterSize, responsive, columns, ...rest }) => {
-  const classes = classNames(
-    'euiFlexGrid',
-    gutterSizeToClassNameMap[gutterSize],
-    columnsToClassNameMap[columns],
-    {
-      'euiFlexGrid--responsive': responsive,
-    },
-    className
-  );
-
-  return (
-    <div
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-EuiFlexGrid.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  gutterSize: PropTypes.oneOf(GUTTER_SIZES),
-  /**
-   * Number of columns to show in the grid. Up to 4.
-   */
-  columns: PropTypes.oneOf(COLUMNS).isRequired,
-  /**
-   * Allow grid items display at block level on small screens
-   */
-  responsive: PropTypes.bool,
-};
-
-EuiFlexGrid.defaultProps = {
-  gutterSize: 'l',
-  columns: 0,
-  responsive: true,
-};
-
diff --git a/src/components/flex/flex_grid.test.js b/src/components/flex/flex_grid.test.tsx
similarity index 56%
rename from src/components/flex/flex_grid.test.js
rename to src/components/flex/flex_grid.test.tsx
index 3fcc16a605b..4351cc3761e 100644
--- a/src/components/flex/flex_grid.test.js
+++ b/src/components/flex/flex_grid.test.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import {
-  EuiFlexGrid,
-  GUTTER_SIZES,
-  COLUMNS,
-} from './flex_grid';
+import { EuiFlexGrid, GUTTER_SIZES, COLUMNS } from './flex_grid';
 
 describe('EuiFlexGrid', () => {
   test('is rendered', () => {
@@ -16,20 +12,16 @@ describe('EuiFlexGrid', () => {
       </EuiFlexGrid>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
     describe('gutterSize', () => {
       GUTTER_SIZES.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGrid gutterSize={value} />
-          );
+          const component = render(<EuiFlexGrid gutterSize={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -37,24 +29,18 @@ describe('EuiFlexGrid', () => {
     describe('columns', () => {
       COLUMNS.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGrid columns={value} />
-          );
+          const component = render(<EuiFlexGrid columns={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
 
     describe('responsive', () => {
       test('is rendered', () => {
-        const component = render(
-          <EuiFlexGrid responsive={false} />
-        );
+        const component = render(<EuiFlexGrid responsive={false} />);
 
-        expect(component)
-          .toMatchSnapshot();
+        expect(component).toMatchSnapshot();
       });
     });
   });
diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx
new file mode 100644
index 00000000000..d546a73bd89
--- /dev/null
+++ b/src/components/flex/flex_grid.tsx
@@ -0,0 +1,64 @@
+import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+export type FlexGridGutterSize = keyof typeof gutterSizeToClassNameMap;
+export type FlexGridColumns = 0 | 1 | 2 | 3 | 4;
+
+export interface EuiFlexGridProps {
+  children?: ReactNode;
+  columns?: FlexGridColumns;
+  gutterSize?: FlexGridGutterSize;
+  responsive?: boolean;
+}
+
+const gutterSizeToClassNameMap = {
+  none: null,
+  s: 'euiFlexGrid--gutterSmall',
+  m: 'euiFlexGrid--gutterMedium',
+  l: 'euiFlexGrid--gutterLarge',
+  xl: 'euiFlexGrid--gutterXLarge',
+};
+
+export const GUTTER_SIZES: FlexGridGutterSize[] = keysOf(
+  gutterSizeToClassNameMap
+);
+
+const columnsToClassNameMap = {
+  0: 'euiFlexGrid--wrap',
+  1: 'euiFlexGrid--single',
+  2: 'euiFlexGrid--halves',
+  3: 'euiFlexGrid--thirds',
+  4: 'euiFlexGrid--fourths',
+};
+
+export const COLUMNS = keysOf(columnsToClassNameMap).map(columns =>
+  parseInt(columns, 10)
+) as FlexGridColumns[];
+
+export const EuiFlexGrid: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiFlexGridProps
+> = ({
+  children,
+  className,
+  gutterSize = 'l',
+  responsive = true,
+  columns = 0,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiFlexGrid',
+    gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined,
+    columns != null ? columnsToClassNameMap[columns] : undefined,
+    {
+      'euiFlexGrid--responsive': responsive,
+    },
+    className
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.js
deleted file mode 100644
index caecd7b1789..00000000000
--- a/src/components/flex/flex_group.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const gutterSizeToClassNameMap = {
-  none: null,
-  xs: 'euiFlexGroup--gutterExtraSmall',
-  s: 'euiFlexGroup--gutterSmall',
-  m: 'euiFlexGroup--gutterMedium',
-  l: 'euiFlexGroup--gutterLarge',
-  xl: 'euiFlexGroup--gutterExtraLarge',
-};
-
-export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);
-
-const alignItemsToClassNameMap = {
-  stretch: null,
-  flexStart: 'euiFlexGroup--alignItemsFlexStart',
-  flexEnd: 'euiFlexGroup--alignItemsFlexEnd',
-  center: 'euiFlexGroup--alignItemsCenter',
-  baseline: 'euiFlexGroup--alignItemsBaseline',
-};
-
-export const ALIGN_ITEMS = Object.keys(alignItemsToClassNameMap);
-
-const justifyContentToClassNameMap = {
-  flexStart: null,
-  flexEnd: 'euiFlexGroup--justifyContentFlexEnd',
-  center: 'euiFlexGroup--justifyContentCenter',
-  spaceBetween: 'euiFlexGroup--justifyContentSpaceBetween',
-  spaceAround: 'euiFlexGroup--justifyContentSpaceAround',
-  spaceEvenly: 'euiFlexGroup--justifyContentSpaceEvenly',
-};
-
-export const JUSTIFY_CONTENTS = Object.keys(justifyContentToClassNameMap);
-
-const directionToClassNameMap = {
-  row: 'euiFlexGroup--directionRow',
-  rowReverse: 'euiFlexGroup--directionRowReverse',
-  column: 'euiFlexGroup--directionColumn',
-  columnReverse: 'euiFlexGroup--directionColumnReverse',
-};
-
-export const DIRECTIONS = Object.keys(directionToClassNameMap);
-
-export const EuiFlexGroup = ({
-  children,
-  className,
-  gutterSize,
-  alignItems,
-  responsive,
-  justifyContent,
-  direction,
-  wrap,
-  component: Component,
-  ...rest,
-}) => {
-  const classes = classNames(
-    'euiFlexGroup',
-    gutterSizeToClassNameMap[gutterSize],
-    alignItemsToClassNameMap[alignItems],
-    justifyContentToClassNameMap[justifyContent],
-    directionToClassNameMap[direction],
-    {
-      'euiFlexGroup--responsive': responsive,
-      'euiFlexGroup--wrap': wrap,
-    },
-    className
-  );
-
-  return (
-    <Component
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-};
-
-EuiFlexGroup.propTypes = {
-  alignItems: PropTypes.oneOf(ALIGN_ITEMS),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  component: PropTypes.oneOf(['div', 'span']),
-  direction: PropTypes.oneOf(DIRECTIONS),
-  gutterSize: PropTypes.oneOf(GUTTER_SIZES),
-  justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS),
-  responsive: PropTypes.bool,
-  wrap: PropTypes.bool,
-};
-
-EuiFlexGroup.defaultProps = {
-  gutterSize: 'l',
-  alignItems: 'stretch',
-  responsive: true,
-  justifyContent: 'flexStart',
-  direction: 'row',
-  component: 'div',
-  wrap: false,
-};
diff --git a/src/components/flex/flex_group.test.js b/src/components/flex/flex_group.test.tsx
similarity index 60%
rename from src/components/flex/flex_group.test.js
rename to src/components/flex/flex_group.test.tsx
index b0151a0980a..d01aec87084 100644
--- a/src/components/flex/flex_group.test.js
+++ b/src/components/flex/flex_group.test.tsx
@@ -25,20 +25,16 @@ describe('EuiFlexGroup', () => {
       </EuiFlexGroup>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
     describe('responsive', () => {
       [true, false].forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup responsive={value} />
-          );
+          const component = render(<EuiFlexGroup responsive={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -46,12 +42,9 @@ describe('EuiFlexGroup', () => {
     describe('gutterSize', () => {
       GUTTER_SIZES.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup gutterSize={value} />
-          );
+          const component = render(<EuiFlexGroup gutterSize={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -59,12 +52,9 @@ describe('EuiFlexGroup', () => {
     describe('alignItems', () => {
       ALIGN_ITEMS.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup alignItems={value} />
-          );
+          const component = render(<EuiFlexGroup alignItems={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -72,12 +62,9 @@ describe('EuiFlexGroup', () => {
     describe('justifyContent', () => {
       JUSTIFY_CONTENTS.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup justifyContent={value} />
-          );
+          const component = render(<EuiFlexGroup justifyContent={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -85,12 +72,9 @@ describe('EuiFlexGroup', () => {
     describe('direction', () => {
       DIRECTIONS.forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup direction={value} />
-          );
+          const component = render(<EuiFlexGroup direction={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
@@ -99,19 +83,22 @@ describe('EuiFlexGroup', () => {
       ['div', 'span'].forEach(value => {
         test(`${value} is rendered`, () => {
           const component = render(
-            <EuiFlexGroup component={value} />
+            <EuiFlexGroup component={value as 'div' | 'span'} />
           );
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
 
       ['h2'].forEach(value => {
         test(`${value} is not rendered`, () => {
-          expect(() => render(
-            <EuiFlexGroup component={value} />
-          )).toThrow();
+          expect(() =>
+            render(
+              // intentionally passing an invalid value
+              // @ts-ignore
+              <EuiFlexGroup component={value} />
+            )
+          ).toThrow();
         });
       });
     });
@@ -119,12 +106,9 @@ describe('EuiFlexGroup', () => {
     describe('wrap', () => {
       [true, false].forEach(value => {
         test(`${value} is rendered`, () => {
-          const component = render(
-            <EuiFlexGroup wrap={value} />
-          );
+          const component = render(<EuiFlexGroup wrap={value} />);
 
-          expect(component)
-            .toMatchSnapshot();
+          expect(component).toMatchSnapshot();
         });
       });
     });
diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx
new file mode 100644
index 00000000000..00070311090
--- /dev/null
+++ b/src/components/flex/flex_group.tsx
@@ -0,0 +1,96 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+export type FlexGroupAlignItems = keyof typeof alignItemsToClassNameMap;
+export type FlexGroupComponentType = 'div' | 'span';
+export type FlexGroupDirection = keyof typeof directionToClassNameMap;
+export type FlexGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
+export type FlexGroupJustifyContent = keyof typeof justifyContentToClassNameMap;
+
+export interface EuiFlexGroupProps {
+  alignItems?: FlexGroupAlignItems;
+  component?: FlexGroupComponentType;
+  direction?: FlexGroupDirection;
+  gutterSize?: FlexGroupGutterSize;
+  justifyContent?: FlexGroupJustifyContent;
+  responsive?: boolean;
+  wrap?: boolean;
+}
+
+const gutterSizeToClassNameMap = {
+  none: null,
+  xs: 'euiFlexGroup--gutterExtraSmall',
+  s: 'euiFlexGroup--gutterSmall',
+  m: 'euiFlexGroup--gutterMedium',
+  l: 'euiFlexGroup--gutterLarge',
+  xl: 'euiFlexGroup--gutterExtraLarge',
+};
+
+export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+
+const alignItemsToClassNameMap = {
+  stretch: null,
+  flexStart: 'euiFlexGroup--alignItemsFlexStart',
+  flexEnd: 'euiFlexGroup--alignItemsFlexEnd',
+  center: 'euiFlexGroup--alignItemsCenter',
+  baseline: 'euiFlexGroup--alignItemsBaseline',
+};
+
+export const ALIGN_ITEMS = keysOf(alignItemsToClassNameMap);
+
+const justifyContentToClassNameMap = {
+  flexStart: null,
+  flexEnd: 'euiFlexGroup--justifyContentFlexEnd',
+  center: 'euiFlexGroup--justifyContentCenter',
+  spaceBetween: 'euiFlexGroup--justifyContentSpaceBetween',
+  spaceAround: 'euiFlexGroup--justifyContentSpaceAround',
+  spaceEvenly: 'euiFlexGroup--justifyContentSpaceEvenly',
+};
+
+export const JUSTIFY_CONTENTS = keysOf(justifyContentToClassNameMap);
+
+const directionToClassNameMap = {
+  row: 'euiFlexGroup--directionRow',
+  rowReverse: 'euiFlexGroup--directionRowReverse',
+  column: 'euiFlexGroup--directionColumn',
+  columnReverse: 'euiFlexGroup--directionColumnReverse',
+};
+
+export const DIRECTIONS = keysOf(directionToClassNameMap);
+
+export const EuiFlexGroup: FunctionComponent<
+  CommonProps &
+    HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
+    EuiFlexGroupProps
+> = ({
+  children,
+  className,
+  gutterSize = 'l',
+  alignItems = 'stretch',
+  responsive = true,
+  justifyContent = 'flexStart',
+  direction = 'row',
+  wrap = false,
+  component: Component = 'div',
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiFlexGroup',
+    gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined,
+    alignItems ? alignItemsToClassNameMap[alignItems] : undefined,
+    justifyContent ? justifyContentToClassNameMap[justifyContent] : undefined,
+    direction ? directionToClassNameMap[direction] : undefined,
+    {
+      'euiFlexGroup--responsive': responsive,
+      'euiFlexGroup--wrap': wrap,
+    },
+    className
+  );
+
+  return (
+    <Component className={classes} {...rest}>
+      {children}
+    </Component>
+  );
+};
diff --git a/src/components/flex/flex_item.js b/src/components/flex/flex_item.js
deleted file mode 100644
index e6544137973..00000000000
--- a/src/components/flex/flex_item.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const GROW_SIZES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-
-export const EuiFlexItem = ({
-  children,
-  className,
-  grow,
-  component: Component,
-  ...rest,
-}) => {
-  const classes = classNames(
-    'euiFlexItem',
-    {
-      'euiFlexItem--flexGrowZero': !grow,
-      [`euiFlexItem--flexGrow${grow}`]: GROW_SIZES.indexOf(grow) >= 0
-    },
-    className
-  );
-
-  return (
-    <Component
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-};
-
-EuiFlexItem.propTypes = {
-  children: PropTypes.node,
-  grow: growPropType,
-  component: PropTypes.oneOf(['div', 'span', 'figure']),
-};
-
-function growPropType(props, propName, componentName) {
-  const value = props[propName];
-
-  const validValues = [
-    null, undefined,
-    true, false,
-    ...GROW_SIZES
-  ];
-
-  if (validValues.indexOf(value) === -1) {
-    return new Error(
-      `Prop \`${propName}\` supplied to \`${componentName}\` must be a boolean or an integer between 1 and 10.`
-    );
-  }
-}
-
-EuiFlexItem.defaultProps = {
-  grow: true,
-  component: 'div',
-};
diff --git a/src/components/flex/flex_item.test.js b/src/components/flex/flex_item.test.js
deleted file mode 100644
index 2a95aa02f4a..00000000000
--- a/src/components/flex/flex_item.test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import {
-  requiredProps,
-  startThrowingReactWarnings,
-  stopThrowingReactWarnings,
-} from '../../test';
-
-import {
-  EuiFlexItem,
-  GROW_SIZES,
-} from './flex_item';
-
-beforeAll(startThrowingReactWarnings);
-afterAll(stopThrowingReactWarnings);
-
-describe('EuiFlexItem', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiFlexItem {...requiredProps} />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-
-  test('tests the grow prop correctly', () => {
-    const propType = EuiFlexItem.propTypes.grow;
-
-    const validValues = GROW_SIZES;
-    const invalidValues = ['true', 'false', '1', 0];
-
-    validValues.forEach(value =>
-      expect(propType({ grow: value }, `grow`)).toBe(undefined)
-    );
-    invalidValues.forEach(value =>
-      expect(propType({ grow: value }, `grow`) instanceof Error).toBe(true)
-    );
-  });
-
-  describe('grow', () => {
-    GROW_SIZES.concat([true, false]).forEach(value => {
-      test(`${value} is rendered`, () => {
-        const component = render(
-          <EuiFlexItem grow={value} />
-        );
-
-        expect(component)
-          .toMatchSnapshot();
-      });
-    });
-  });
-
-  describe('component', () => {
-    ['div', 'span'].forEach(value => {
-      test(`${value} is rendered`, () => {
-        const component = render(
-          <EuiFlexItem component={value} />
-        );
-
-        expect(component)
-          .toMatchSnapshot();
-      });
-    });
-
-    ['h2'].forEach(value => {
-      test(`${value} is not rendered`, () => {
-        expect(() => render(
-          <EuiFlexItem component={value} />
-        )).toThrow();
-      });
-    });
-  });
-});
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
new file mode 100644
index 00000000000..d035f14774e
--- /dev/null
+++ b/src/components/flex/flex_item.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from 'enzyme';
+import {
+  requiredProps,
+  startThrowingReactWarnings,
+  stopThrowingReactWarnings,
+} from '../../test';
+
+import { EuiFlexItem, FlexItemComponentType, GROW_SIZES } from './flex_item';
+
+beforeAll(startThrowingReactWarnings);
+afterAll(stopThrowingReactWarnings);
+
+describe('EuiFlexItem', () => {
+  test('is rendered', () => {
+    const component = render(<EuiFlexItem {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('grow', () => {
+    GROW_SIZES.concat([true, false]).forEach(value => {
+      test(`${value} is rendered`, () => {
+        const component = render(<EuiFlexItem grow={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('component', () => {
+    (['div', 'span', 'figure'] as FlexItemComponentType[]).forEach(value => {
+      test(`${value} is rendered`, () => {
+        const component = render(<EuiFlexItem component={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    ['h2'].forEach(value => {
+      test(`${value} is not rendered`, () => {
+        expect(() =>
+          render(
+            // intentionally passing an invalid value
+            // @ts-ignore
+            <EuiFlexItem component={value} />
+          )
+        ).toThrow();
+      });
+    });
+  });
+});
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
new file mode 100644
index 00000000000..046cffa1391
--- /dev/null
+++ b/src/components/flex/flex_item.tsx
@@ -0,0 +1,66 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type FlexItemGrowSize =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | true
+  | false
+  | null;
+export type FlexItemComponentType = 'div' | 'span' | 'figure';
+
+export interface EuiFlexItemProps {
+  grow?: FlexItemGrowSize;
+  component?: FlexItemComponentType;
+}
+
+export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+export const EuiFlexItem: FunctionComponent<
+  CommonProps &
+    HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
+    EuiFlexItemProps
+> = ({
+  children,
+  className,
+  grow = true,
+  component: Component = 'div',
+  ...rest
+}) => {
+  validateGrowValue(grow);
+
+  const classes = classNames(
+    'euiFlexItem',
+    {
+      'euiFlexItem--flexGrowZero': !grow,
+      [`euiFlexItem--flexGrow${grow}`]:
+        typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+    },
+    className
+  );
+
+  return (
+    <Component className={classes} {...rest}>
+      {children}
+    </Component>
+  );
+};
+
+function validateGrowValue(value: EuiFlexItemProps['grow']) {
+  const validValues = [null, undefined, true, false, ...GROW_SIZES];
+
+  if (validValues.indexOf(value) === -1) {
+    throw new Error(
+      `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 1 and 10, received \`${value}\``
+    );
+  }
+}
diff --git a/src/components/flex/index.d.ts b/src/components/flex/index.d.ts
deleted file mode 100644
index af01aa70b97..00000000000
--- a/src/components/flex/index.d.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { CommonProps } from '../common';
-
-import { FunctionComponent, HTMLAttributes } from 'react';
-
-declare module '@elastic/eui' {
-  /**
-   * flex grid type defs
-   *
-   * @see './flex_grid.js'
-   */
-
-  export type FlexGridGutterSize = 'none' | 's' | 'm' | 'l' | 'xl';
-  export type FlexGridColumns = 0 | 1 | 2 | 3 | 4;
-
-  export interface EuiFlexGridProps {
-    columns?: FlexGridColumns;
-    gutterSize?: FlexGridGutterSize;
-  }
-
-  export const EuiFlexGrid: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiFlexGridProps
-  >;
-
-  /**
-   * flex group type defs
-   *
-   * @see './flex_group.js'
-   */
-
-  export type FlexGroupAlignItems =
-    | 'stretch'
-    | 'flexStart'
-    | 'flexEnd'
-    | 'center'
-    | 'baseline';
-  export type FlexGroupComponentType = 'div' | 'span';
-  export type FlexGroupDirection =
-    | 'column'
-    | 'columnReverse'
-    | 'row'
-    | 'rowReverse';
-  export type FlexGroupGutterSize = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
-  export type FlexGroupJustifyContent =
-    | 'flexStart'
-    | 'flexEnd'
-    | 'center'
-    | 'spaceBetween'
-    | 'spaceAround'
-    | 'spaceEvenly';
-
-  export interface EuiFlexGroupProps {
-    alignItems?: FlexGroupAlignItems;
-    children?: React.ReactNode;
-    className?: string;
-    component?: FlexGroupComponentType;
-    direction?: FlexGroupDirection;
-    gutterSize?: FlexGroupGutterSize;
-    justifyContent?: FlexGroupJustifyContent;
-    responsive?: boolean;
-    wrap?: boolean;
-  }
-
-  export const EuiFlexGroup: FunctionComponent<
-    CommonProps &
-      HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
-      EuiFlexGroupProps
-  >;
-
-  /**
-   * flex item type defs
-   *
-   * @see './flex_item.js'
-   */
-
-  export type FlexItemGrowSize =
-    | 1
-    | 2
-    | 3
-    | 4
-    | 5
-    | 6
-    | 7
-    | 8
-    | 9
-    | 10
-    | true
-    | false
-    | null;
-  export type FlexItemComponentType = 'div' | 'span';
-
-  export interface EuiFlexItemProps {
-    grow?: FlexItemGrowSize;
-    component?: FlexItemComponentType;
-  }
-
-  export const EuiFlexItem: FunctionComponent<
-    CommonProps &
-      HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
-      EuiFlexItemProps
-  >;
-}
diff --git a/src/components/flex/index.js b/src/components/flex/index.js
deleted file mode 100644
index db1d91274c5..00000000000
--- a/src/components/flex/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export {
-  EuiFlexGroup,
-} from './flex_group';
-
-export {
-  EuiFlexGrid,
-} from './flex_grid';
-
-export {
-  EuiFlexItem,
-} from './flex_item';
diff --git a/src/components/flex/index.ts b/src/components/flex/index.ts
new file mode 100644
index 00000000000..b99ac168275
--- /dev/null
+++ b/src/components/flex/index.ts
@@ -0,0 +1,5 @@
+export { EuiFlexGroup } from './flex_group';
+
+export { EuiFlexGrid } from './flex_grid';
+
+export { EuiFlexItem } from './flex_item';
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
index 37df2adb1dd..72170c1f845 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -10,18 +10,9 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
   role="group"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="l"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
@@ -44,8 +35,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-      component="div"
-      grow={true}
     >
       <EuiFormRow
         describedByIds={Array []}
@@ -69,18 +58,9 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
   role="group"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="l"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
@@ -94,8 +74,6 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
     </EuiFlexItem>
     <EuiFlexItem
       className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-      component="div"
-      grow={true}
     >
       <EuiFormRow
         describedByIds={Array []}
@@ -120,18 +98,9 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
   role="group"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="l"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
@@ -154,8 +123,6 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-      component="div"
-      grow={true}
     >
       <EuiFormRow
         describedByIds={Array []}
@@ -180,18 +147,9 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
   role="group"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="s"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
@@ -214,8 +172,6 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-      component="div"
-      grow={true}
     >
       <EuiFormRow
         describedByIds={Array []}
@@ -240,18 +196,9 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
   role="group"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="l"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
+    <EuiFlexItem>
       <EuiTitle
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
@@ -274,8 +221,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--large"
-      component="div"
-      grow={true}
     >
       <EuiFormRow
         describedByIds={Array []}
@@ -315,21 +260,12 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
     role="group"
   >
     <EuiFlexGroup
-      alignItems="stretch"
-      component="div"
-      direction="row"
       gutterSize="l"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
     >
       <div
         className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
+        <EuiFlexItem>
           <div
             className="euiFlexItem"
           >
@@ -373,8 +309,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
         </EuiFlexItem>
         <EuiFlexItem
           className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-          component="div"
-          grow={true}
         >
           <div
             className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
index 134b6bdc70d..0ef700dad94 100644
--- a/src/components/form/form_row/__snapshots__/form_row.test.js.snap
+++ b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
@@ -343,16 +343,12 @@ exports[`EuiFormRow props label append is rendered 1`] = `
   id="generated-id-row"
 >
   <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    direction="row"
     gutterSize="xs"
     justifyContent="spaceBetween"
     responsive={false}
     wrap={true}
   >
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       <div>
@@ -366,7 +362,6 @@ exports[`EuiFormRow props label append is rendered 1`] = `
       </div>
     </EuiFlexItem>
     <EuiFlexItem
-      component="div"
       grow={false}
     >
       append
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 475f5496f3d..fec51e41283 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -8,12 +8,10 @@
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./context_menu/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
-/// <reference path="./description_list/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="./flex/index.d.ts" />
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./focus_trap/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
diff --git a/src/components/search_bar/__snapshots__/search_bar.test.js.snap b/src/components/search_bar/__snapshots__/search_bar.test.js.snap
index d4358c93d40..e5c5208e5b6 100644
--- a/src/components/search_bar/__snapshots__/search_bar.test.js.snap
+++ b/src/components/search_bar/__snapshots__/search_bar.test.js.snap
@@ -3,15 +3,9 @@
 exports[`SearchBar render - box 1`] = `
 <EuiFlexGroup
   alignItems="center"
-  component="div"
-  direction="row"
   gutterSize="m"
-  justifyContent="flexStart"
-  responsive={true}
-  wrap={false}
 >
   <EuiFlexItem
-    component="div"
     grow={true}
   >
     <EuiSearchBox
@@ -31,15 +25,9 @@ exports[`SearchBar render - box 1`] = `
 exports[`SearchBar render - no config, no query 1`] = `
 <EuiFlexGroup
   alignItems="center"
-  component="div"
-  direction="row"
   gutterSize="m"
-  justifyContent="flexStart"
-  responsive={true}
-  wrap={false}
 >
   <EuiFlexItem
-    component="div"
     grow={true}
   >
     <EuiSearchBox
@@ -56,15 +44,9 @@ exports[`SearchBar render - no config, no query 1`] = `
 exports[`SearchBar render - provided query, filters 1`] = `
 <EuiFlexGroup
   alignItems="center"
-  component="div"
-  direction="row"
   gutterSize="m"
-  justifyContent="flexStart"
-  responsive={true}
-  wrap={false}
 >
   <EuiFlexItem
-    component="div"
     grow={true}
   >
     <EuiSearchBox
@@ -76,7 +58,6 @@ exports[`SearchBar render - provided query, filters 1`] = `
     />
   </EuiFlexItem>
   <EuiFlexItem
-    component="div"
     grow={false}
   >
     <EuiSearchFilters
@@ -165,15 +146,9 @@ exports[`SearchBar render - provided query, filters 1`] = `
 exports[`SearchBar render - tools 1`] = `
 <EuiFlexGroup
   alignItems="center"
-  component="div"
-  direction="row"
   gutterSize="m"
-  justifyContent="flexStart"
-  responsive={true}
-  wrap={false}
 >
   <EuiFlexItem
-    component="div"
     grow={false}
   >
     <div>
@@ -181,7 +156,6 @@ exports[`SearchBar render - tools 1`] = `
     </div>
   </EuiFlexItem>
   <EuiFlexItem
-    component="div"
     grow={true}
   >
     <EuiSearchBox
@@ -193,7 +167,6 @@ exports[`SearchBar render - tools 1`] = `
     />
   </EuiFlexItem>
   <EuiFlexItem
-    component="div"
     grow={false}
   >
     <div>
diff --git a/src/index.d.ts b/src/index.d.ts
index d0f8c86bfa8..062fd6e01fe 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,3 +1,2 @@
 /// <reference path="./components/index.d.ts" />
 /// <reference path="./themes/index.d.ts" />
-/// <reference path="./test/index.d.ts" />
diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.ts
similarity index 64%
rename from src/test/find_test_subject.js
rename to src/test/find_test_subject.ts
index 15d2bf6c342..9c590eeedbb 100644
--- a/src/test/find_test_subject.js
+++ b/src/test/find_test_subject.ts
@@ -1,3 +1,10 @@
+import { ReactWrapper, ShallowWrapper } from 'enzyme';
+
+type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (
+  mountedComponent: T,
+  testSubjectSelector: string
+) => ReturnType<T['find']>;
+
 /**
  * Find node which matches a specific test subject selector. Returns ReactWrappers around DOM element,
  * https://github.com/airbnb/enzyme/tree/master/docs/api/ReactWrapper.
@@ -17,12 +24,22 @@ const MATCHERS = [
   '*=', // Contains substring
 ];
 
-export const findTestSubject = (mountedComponent, testSubjectSelector, matcher = '~=') => {
+export const findTestSubject: FindTestSubject<ShallowWrapper | ReactWrapper> = (
+  mountedComponent,
+  testSubjectSelector,
+  matcher = '~='
+) => {
   if (!MATCHERS.includes(matcher)) {
-    throw new Error(`Matcher ${matcher} not found in list of allowed matchers: ${MATCHERS.join(' ')}`);
+    throw new Error(
+      `Matcher ${matcher} not found in list of allowed matchers: ${MATCHERS.join(
+        ' '
+      )}`
+    );
   }
 
-  const testSubject = mountedComponent.find(`[data-test-subj${matcher}"${testSubjectSelector}"]`);
+  const testSubject = mountedComponent.find(
+    `[data-test-subj${matcher}"${testSubjectSelector}"]`
+  );
 
   // Restores Enzyme 2's find behavior, which was to only return ReactWrappers around DOM elements.
   // Enzyme 3 returns ReactWrappers around both DOM elements and React components.
diff --git a/src/test/index.d.ts b/src/test/index.d.ts
deleted file mode 100644
index e75d40657aa..00000000000
--- a/src/test/index.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ShallowWrapper, ReactWrapper } from 'enzyme';
-
-declare module '@elastic/eui' {
-  export function findTestSubject<T extends ShallowWrapper | ReactWrapper> (
-    mountedComponent: T,
-    testSubjectSelector: string
-  ): ReturnType<T["find"]>;
-}
diff --git a/src/test/index.js b/src/test/index.ts
similarity index 63%
rename from src/test/index.js
rename to src/test/index.ts
index af1224e7b7b..08a7fc9ccd1 100644
--- a/src/test/index.js
+++ b/src/test/index.ts
@@ -1,4 +1,7 @@
 export { requiredProps } from './required_props';
 export { takeMountedSnapshot } from './take_mounted_snapshot';
 export { findTestSubject } from './find_test_subject';
-export { startThrowingReactWarnings, stopThrowingReactWarnings } from './react_warnings';
+export {
+  startThrowingReactWarnings,
+  stopThrowingReactWarnings,
+} from './react_warnings';
diff --git a/src/test/patch_random.js b/src/test/patch_random.js
deleted file mode 100644
index de18b8023de..00000000000
--- a/src/test/patch_random.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const _mathRandom = Math.random;
-
-export function patchRandom() {
-  let x = 0;
-  Math.random = () => x += 0.00001;
-}
-
-export function unpatchRandom() {
-  Math.random = _mathRandom;
-}
diff --git a/src/test/patch_random.ts b/src/test/patch_random.ts
new file mode 100644
index 00000000000..65ef2b6c4cd
--- /dev/null
+++ b/src/test/patch_random.ts
@@ -0,0 +1,10 @@
+const originalMathRandom = Math.random;
+
+export function patchRandom() {
+  let x = 0;
+  Math.random = () => (x += 0.00001);
+}
+
+export function unpatchRandom() {
+  Math.random = originalMathRandom;
+}
diff --git a/src/test/react_warnings.js b/src/test/react_warnings.ts
similarity index 53%
rename from src/test/react_warnings.js
rename to src/test/react_warnings.ts
index 9917990b4db..8105da46b2e 100644
--- a/src/test/react_warnings.js
+++ b/src/test/react_warnings.ts
@@ -1,3 +1,5 @@
+/* tslint:disable:no-console */
+
 /*
   Use this utility to throw errors whenever React complains via the console
   about things like invalid propTypes. This lets us assert that a propType
@@ -9,14 +11,16 @@
   afterAll(stopThrowingReactWarnings);
 */
 
-const consoleWarn = console.warn; // eslint-disable-line no-console
-const consoleError = console.error; // eslint-disable-line no-console
+const consoleWarn = console.warn;
+const consoleError = console.error;
 
 export const startThrowingReactWarnings = () => {
-  console.warn = console.error = (msg) => { throw msg; }; // eslint-disable-line no-console
+  console.warn = console.error = (msg: any) => {
+    throw msg;
+  };
 };
 
 export const stopThrowingReactWarnings = () => {
-  console.warn = consoleWarn; // eslint-disable-line no-console
-  console.error = consoleError; // eslint-disable-line no-console
+  console.warn = consoleWarn;
+  console.error = consoleError;
 };
diff --git a/src/test/take_mounted_snapshot.js b/src/test/take_mounted_snapshot.ts
similarity index 74%
rename from src/test/take_mounted_snapshot.js
rename to src/test/take_mounted_snapshot.ts
index cce0fbc8740..69f4ab57b7a 100644
--- a/src/test/take_mounted_snapshot.js
+++ b/src/test/take_mounted_snapshot.ts
@@ -1,10 +1,15 @@
+import { ReactWrapper } from 'enzyme';
+import { Component } from 'react';
+
 /**
  * Use this function to generate a Jest snapshot of components that have been fully rendered
  * using Enzyme's `mount` method. Typically, a mounted component will result in a snapshot
  * containing both React components and HTML elements. This function removes the React components,
  * leaving only HTML elements in the snapshot.
  */
-export const takeMountedSnapshot = mountedComponent => {
+export const takeMountedSnapshot = (
+  mountedComponent: ReactWrapper<{}, {}, Component>
+) => {
   const html = mountedComponent.html();
   const template = document.createElement('template');
   template.innerHTML = html;
diff --git a/src/test/time_execution.js b/src/test/time_execution.ts
similarity index 64%
rename from src/test/time_execution.js
rename to src/test/time_execution.ts
index 582e03d3997..dd3f6ee6414 100644
--- a/src/test/time_execution.js
+++ b/src/test/time_execution.ts
@@ -1,12 +1,16 @@
-export function timeExecution(fn) {
+export function timeExecution(fn: () => void) {
   const start = process.hrtime();
   fn();
   const [seconds, nanoseconds] = process.hrtime(start);
-  const milliseconds = (seconds * 1000) + (nanoseconds / 1000000);
+  const milliseconds = seconds * 1000 + nanoseconds / 1000000;
   return milliseconds;
 }
 
-export function benchmarkFunction(fn, warmupRuns = 3, benchmarkRuns = 3) {
+export function benchmarkFunction(
+  fn: () => void,
+  warmupRuns = 3,
+  benchmarkRuns = 3
+) {
   // warmup v8 optimizations, cache, etc
   for (let i = 0; i < warmupRuns; i++) {
     fn();