Convert EuiIcon to TypeScript

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();
  });
  });