Convert EuiIcon to TypeScript (#1355)

Convert the `EuiIcon` component to TypeScript. Notes:

   - I switched the invocation of `tsc` and `tslint`, as TSLint recommends
     that compilation run cleanly before linting.
   - I added a directory for custom library definitions, so that TS wouldn't
     complain about importing SVGs. These imports are still compiled into inline
     React components with Babel.
   - I removed the icon title tests, since they have been deprecated and wrong
     for a long time.

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `5.5.1`.
+- Convert `EuiIcon` to TypeScript ([#1355](https://github.com/elastic/eui/pull/1355))
 
 ## [`5.5.1`](https://github.com/elastic/eui/tree/v5.5.1)
 

package.json

@@ -20,7 +20,7 @@
     "lint-es-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
     "lint-sass": "sass-lint -v --max-warnings 0",
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
-    "lint-ts": "tslint -c ./tslint.yaml -p ./tsconfig.json && tsc -p ./tsconfig.json --noEmit",
+    "lint-ts": "tsc -p ./tsconfig.json --noEmit && tslint -c ./tslint.yaml -p ./tsconfig.json",
     "lint-ts-fix": "tslint -c ./tslint.yaml -p ./tsconfig.json --fix",
     "lint-framer": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json",
     "lint-framer-fix": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json --fix",

src/components/badge/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="../icon/index.d.ts" />
+import { IconType } from '../icon'
 /// <reference path="../tool_tip/index.d.ts" />
 
 import { HTMLAttributes, MouseEventHandler, SFC, ReactNode } from 'react';

src/components/button/index.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from '../common';
-/// <reference path="../icon/index.d.ts" />
+import { IconType } from '../icon'
 
 import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, MouseEventHandler, HTMLAttributes } from 'react';
 

src/components/call_out/index.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps, Omit } from '../common';
-/// <reference path="../icon/index.d.ts" />
+import { IconType } from '../icon'
 
 import { SFC, ReactNode, HTMLAttributes } from 'react';
 

src/components/common.ts

@@ -13,3 +13,7 @@ export type RefCallback<Element extends HTMLElement> = (
 // utility types:
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export function keysOf<T, K extends keyof T>(obj: T): K[] {
+  return Object.keys(obj) as K[];
+}

src/components/empty_prompt/index.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps, Omit } from '../common';
-/// <reference path="../icon/index.d.ts" />
+import { IconColor, IconType } from '../icon'
 /// <reference path="../title/index.d.ts" />
 
 import { SFC, ReactNode, HTMLAttributes } from 'react';

src/components/form/field_number/index.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from '../../common';
-/// <reference path="../../icon/index.d.ts" />
+import { IconType } from '../../icon'
 
 import { ReactNode, SFC, InputHTMLAttributes } from 'react';
 

src/components/health/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="../icon/index.d.ts" />
+import { IconColor } from '../icon'
 
 import { SFC, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';

src/components/icon/__snapshots__/icon.test.js.snap → src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -24,9 +24,10 @@ exports[`EuiIcon is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size l is rendered 1`] = `
+exports[`EuiIcon props other props are passed through to the icon 1`] = `
 <svg
-  class="euiIcon euiIcon--large"
+  aria-label="a custom title"
+  class="euiIcon euiIcon--medium"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -46,9 +47,9 @@ exports[`EuiIcon props size l is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size m is rendered 1`] = `
+exports[`EuiIcon props size l is rendered 1`] = `
 <svg
-  class="euiIcon euiIcon--medium"
+  class="euiIcon euiIcon--large"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -68,9 +69,9 @@ exports[`EuiIcon props size m is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size original is rendered 1`] = `
+exports[`EuiIcon props size m is rendered 1`] = `
 <svg
-  class="euiIcon"
+  class="euiIcon euiIcon--medium"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -90,9 +91,9 @@ exports[`EuiIcon props size original is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size s is rendered 1`] = `
+exports[`EuiIcon props size original is rendered 1`] = `
 <svg
-  class="euiIcon euiIcon--small"
+  class="euiIcon"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -112,9 +113,9 @@ exports[`EuiIcon props size s is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size xl is rendered 1`] = `
+exports[`EuiIcon props size s is rendered 1`] = `
 <svg
-  class="euiIcon euiIcon--xLarge"
+  class="euiIcon euiIcon--small"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -134,9 +135,9 @@ exports[`EuiIcon props size xl is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props size xxl is rendered 1`] = `
+exports[`EuiIcon props size xl is rendered 1`] = `
 <svg
-  class="euiIcon euiIcon--xxLarge"
+  class="euiIcon euiIcon--xLarge"
   focusable="false"
   height="16"
   viewBox="0 0 16 16"
@@ -156,12 +157,11 @@ exports[`EuiIcon props size xxl is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = `
+exports[`EuiIcon props size xxl is rendered 1`] = `
 <svg
-  class="euiIcon euiIcon--medium"
+  class="euiIcon euiIcon--xxLarge"
   focusable="false"
   height="16"
-  tabindex="-1"
   viewBox="0 0 16 16"
   width="16"
   xlink="http://www.w3.org/1999/xlink"
@@ -179,11 +179,12 @@ exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`] = `
+exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
   focusable="false"
   height="16"
+  tabindex="-1"
   viewBox="0 0 16 16"
   width="16"
   xlink="http://www.w3.org/1999/xlink"
@@ -201,12 +202,11 @@ exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`]
 </svg>
 `;
 
-exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = `
+exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
-  focusable="true"
+  focusable="false"
   height="16"
-  tabindex="0"
   viewBox="0 0 16 16"
   width="16"
   xlink="http://www.w3.org/1999/xlink"
@@ -224,38 +224,12 @@ exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props title defaults to a humanized version of the type 1`] = `
-<svg
-  class="euiIcon euiIcon--medium euiIcon--app"
-  focusable="false"
-  height="32"
-  viewBox="0 0 32 32"
-  width="32"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M29 9H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h26a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3zM3 2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"
-  />
-  <path
-    class="euiIcon__fillSecondary"
-    d="M12 20H3a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3zm-9-7a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z"
-  />
-  <path
-    d="M12 31H3a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3zm-9-7a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z"
-  />
-  <path
-    class="euiIcon__fillSecondary"
-    d="M29 31h-9a3 3 0 0 1-3-3V14a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3zm-9-18a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V14a1 1 0 0 0-1-1h-9z"
-  />
-</svg>
-`;
-
-exports[`EuiIcon props title is rendered 1`] = `
+exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
-  focusable="false"
+  focusable="true"
   height="16"
-  title="a custom title"
+  tabindex="0"
   viewBox="0 0 16 16"
   width="16"
   xlink="http://www.w3.org/1999/xlink"

src/components/icon/icon.test.js → src/components/icon/icon.test.tsx

@@ -18,18 +18,10 @@ describe('EuiIcon', () => {
   });
 
   describe('props', () => {
-    describe('title', () => {
-      test('defaults to a humanized version of the type', () => {
+    describe('other props', () => {
+      test('are passed through to the icon', () => {
         const component = render(
-          <EuiIcon type="dashboardApp" />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('is rendered', () => {
-        const component = render(
-          <EuiIcon type="search" title="a custom title" />
+          <EuiIcon type="search" aria-label="a custom title" />
         );
 
         expect(component).toMatchSnapshot();
@@ -67,12 +59,12 @@ describe('EuiIcon', () => {
       });
 
       test('renders focusable="false" when -1', () => {
-        const component = render(<EuiIcon type="search" tabIndex="-1" />);
+        const component = render(<EuiIcon type="search" tabIndex={-1} />);
         expect(component).toMatchSnapshot();
       });
 
       test('renders focusable="true" when 0', () => {
-        const component = render(<EuiIcon type="search" tabIndex="0" />);
+        const component = render(<EuiIcon type="search" tabIndex={0} />);
         expect(component).toMatchSnapshot();
       });
     });