Convert EuiFlex* and EuiDescriptionList* to typescript

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)
 

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;

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', () => {

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',

src-docs/src/views/flex/component_span.js → 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

src-docs/src/views/flex/direction.js → 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">

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',

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>
+);

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>
+);

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>
+);

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>
+);

src-docs/src/views/flex/flex_grow_numeric.js → 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>
 

src-docs/src/views/flex/flex_grow_zero.js → 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>

src-docs/src/views/flex/flex_gutter.js → 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>

src-docs/src/views/flex/flex_items.js → 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>

src-docs/src/views/flex/flex_nest.js → 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>