From 63fb805fbaeae448b00b3bf46b55dcff836ccc2d Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 23 Apr 2019 12:36:08 +0100 Subject: [PATCH 1/4] `token_map` converted to TS --- src/components/token/index.d.ts | 26 ++--- src/components/token/token_map.js | 132 ----------------------- src/components/token/token_map.ts | 169 ++++++++++++++++++++++++++++++ 3 files changed, 182 insertions(+), 145 deletions(-) delete mode 100644 src/components/token/token_map.js create mode 100644 src/components/token/token_map.ts diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts index c042d3c3dc4..74a456e42ec 100644 --- a/src/components/token/index.d.ts +++ b/src/components/token/index.d.ts @@ -3,7 +3,6 @@ import { CommonProps } from '../common'; import { IconType } from '../icon'; declare module '@elastic/eui' { - /** * token type defs * @@ -24,23 +23,24 @@ declare module '@elastic/eui' { | 'tokenTint09' | 'tokenTint10' | 'tokenTint11' - | 'tokenTint12' + | 'tokenTint12'; + + export type TokenShape = 'circle' | 'square' | 'rectangle'; - export type TokenShape = - | 'circle' - | 'square' - | 'rectangle' + export interface EuiTokenMapDisplayOptions { + color?: TokenColor; + shape?: TokenShape; + fill?: boolean; + hasBorder?: boolean; + } export interface EuiTokenProps { iconType: IconType; size?: TokenSize; - displayOptions?: { - color?: TokenColor; - shape?: TokenShape; - fill?: boolean; - hasBorder?: boolean; - }; + displayOptions?: EuiTokenMapDisplayOptions; } - export const EuiToken: FunctionComponent>; + export const EuiToken: FunctionComponent< + CommonProps & EuiTokenProps & HTMLAttributes + >; } diff --git a/src/components/token/token_map.js b/src/components/token/token_map.js deleted file mode 100644 index 3324212377c..00000000000 --- a/src/components/token/token_map.js +++ /dev/null @@ -1,132 +0,0 @@ -// Sets default displayOptions for EuiTokens based on iconType -// tokenClass: { -// 'shape': 'square', -// 'color': 'tokenTint01', -// 'fill': false, -// }, - -export const TOKEN_MAP = { - tokenClass: { - 'shape': 'circle', - 'color': 'tokenTint01', - }, - tokenProperty: { - 'shape': 'circle', - 'color': 'tokenTint02', - }, - tokenEnum: { - 'shape': 'circle', - 'color': 'tokenTint03', - }, - tokenVariable: { - 'shape': 'circle', - 'color': 'tokenTint04', - }, - tokenMethod: { - 'shape': 'square', - 'color': 'tokenTint02', - }, - tokenAnnotation: { - 'shape': 'square', - 'color': 'tokenTint06', - }, - tokenException: { - 'shape': 'circle', - 'color': 'tokenTint07', - }, - tokenInterface: { - 'shape': 'circle', - 'color': 'tokenTint08', - }, - tokenParameter: { - 'shape': 'square', - 'color': 'tokenTint09', - }, - tokenField: { - 'shape': 'circle', - 'color': 'tokenTint10', - }, - tokenElement: { - 'shape': 'square', - 'color': 'tokenTint03', - }, - tokenFunction: { - 'shape': 'circle', - 'color': 'tokenTint02', - }, - tokenBoolean: { - 'shape': 'square', - 'color': 'tokenTint05', - }, - tokenString: { - 'shape': 'square', - 'color': 'tokenTint07', - }, - tokenArray: { - 'shape': 'square', - 'color': 'tokenTint04', - }, - tokenNumber: { - 'shape': 'circle', - 'color': 'tokenTint05', - }, - tokenConstant: { - 'shape': 'circle', - 'color': 'tokenTint07', - }, - tokenObject: { - 'shape': 'square', - 'color': 'tokenTint03', - }, - tokenEvent: { - 'shape': 'circle', - 'color': 'tokenTint09', - }, - tokenKey: { - 'shape': 'circle', - 'color': 'tokenTint06', - }, - tokenNull: { - 'shape': 'square', - 'color': 'tokenTint02', - }, - tokenStruct: { - 'shape': 'square', - 'color': 'tokenTint07', - }, - tokenPackage: { - 'shape': 'square', - 'color': 'tokenTint10', - }, - tokenOperator: { - 'shape': 'circle', - 'color': 'tokenTint09', - }, - tokenEnumMember: { - 'shape': 'square', - 'color': 'tokenTint04', - }, - tokenRepo: { - 'shape': 'rectangle', - 'color': 'tokenTint05', - 'fill': true, - }, - tokenSymbol: { - 'shape': 'rectangle', - 'color': 'tokenTint07', - 'fill': true, - }, - tokenFile: { - 'shape': 'rectangle', - 'color': 'tokenTint12', - 'fill': true, - }, - tokenNamespace: { - 'shape': 'square', - 'color': 'tokenTint01' - }, - tokenModule: { - 'shape': 'square', - 'color': 'tokenTint09' - } -}; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts new file mode 100644 index 00000000000..36d1bb97b70 --- /dev/null +++ b/src/components/token/token_map.ts @@ -0,0 +1,169 @@ +// Sets default displayOptions for EuiTokens based on iconType +// tokenClass: { +// shape: 'square', +// color: 'tokenTint01', +// fill: false, +// }, + +import { EuiTokenMapDisplayOptions } from '@elastic/eui'; + +export type EuiTokenMapType = + | 'tokenClass' + | 'tokenProperty' + | 'tokenEnum' + | 'tokenVariable' + | 'tokenMethod' + | 'tokenAnnotation' + | 'tokenException' + | 'tokenInterface' + | 'tokenParameter' + | 'tokenField' + | 'tokenFunction' + | 'tokenElement' + | 'tokenBoolean' + | 'tokenString' + | 'tokenArray' + | 'tokenConstant' + | 'tokenNumber' + | 'tokenObject' + | 'tokenEvent' + | 'tokenKey' + | 'tokenNull' + | 'tokenStruct' + | 'tokenPackage' + | 'tokenOperator' + | 'tokenEnumMember' + | 'tokenRepo' + | 'tokenSymbol' + | 'tokenFile' + | 'tokenNamespace' + | 'tokenModule'; + +export const TOKEN_MAP: Record< + EuiTokenMapType, + Partial +> = { + tokenClass: { + shape: 'circle', + color: 'tokenTint01', + }, + tokenProperty: { + shape: 'circle', + color: 'tokenTint02', + }, + tokenEnum: { + shape: 'circle', + color: 'tokenTint03', + }, + tokenVariable: { + shape: 'circle', + color: 'tokenTint04', + }, + tokenMethod: { + shape: 'square', + color: 'tokenTint02', + }, + tokenAnnotation: { + shape: 'square', + color: 'tokenTint06', + }, + tokenException: { + shape: 'circle', + color: 'tokenTint07', + }, + tokenInterface: { + shape: 'circle', + color: 'tokenTint08', + }, + tokenParameter: { + shape: 'square', + color: 'tokenTint09', + }, + tokenField: { + shape: 'circle', + color: 'tokenTint10', + }, + tokenElement: { + shape: 'square', + color: 'tokenTint03', + }, + tokenFunction: { + shape: 'circle', + color: 'tokenTint02', + }, + tokenBoolean: { + shape: 'square', + color: 'tokenTint05', + }, + tokenString: { + shape: 'square', + color: 'tokenTint07', + }, + tokenArray: { + shape: 'square', + color: 'tokenTint04', + }, + tokenNumber: { + shape: 'circle', + color: 'tokenTint05', + }, + tokenConstant: { + shape: 'circle', + color: 'tokenTint07', + }, + tokenObject: { + shape: 'square', + color: 'tokenTint03', + }, + tokenEvent: { + shape: 'circle', + color: 'tokenTint09', + }, + tokenKey: { + shape: 'circle', + color: 'tokenTint06', + }, + tokenNull: { + shape: 'square', + color: 'tokenTint02', + }, + tokenStruct: { + shape: 'square', + color: 'tokenTint07', + }, + tokenPackage: { + shape: 'square', + color: 'tokenTint10', + }, + tokenOperator: { + shape: 'circle', + color: 'tokenTint09', + }, + tokenEnumMember: { + shape: 'square', + color: 'tokenTint04', + }, + tokenRepo: { + shape: 'rectangle', + color: 'tokenTint05', + fill: true, + }, + tokenSymbol: { + shape: 'rectangle', + color: 'tokenTint07', + fill: true, + }, + tokenFile: { + shape: 'rectangle', + color: 'tokenTint12', + fill: true, + }, + tokenNamespace: { + shape: 'square', + color: 'tokenTint01', + }, + tokenModule: { + shape: 'square', + color: 'tokenTint09', + }, +}; From 1ca3d3fa8dfc6ef27c8c3cc5cf29989e3eb56bad Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 23 Apr 2019 12:46:51 +0100 Subject: [PATCH 2/4] `token_map` updated Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 679346d3819..0c9da445adf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `token_map` to TS ([#1870](https://github.com/elastic/eui/pull/1870)) - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858)) - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848)) - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848)) From 9ba2dfc196f0e15e2413c392c9748eef667edb7c Mon Sep 17 00:00:00 2001 From: Theo Date: Wed, 24 Apr 2019 17:12:50 +0100 Subject: [PATCH 3/4] `TOKEN_MAP` code review fixes --- src/components/token/index.d.ts | 32 +++++++------------------------ src/components/token/token_map.ts | 28 ++++++++++++++++++++++----- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts index 74a456e42ec..538e37f5565 100644 --- a/src/components/token/index.d.ts +++ b/src/components/token/index.d.ts @@ -1,6 +1,13 @@ import { FunctionComponent, HTMLAttributes } from 'react'; import { CommonProps } from '../common'; import { IconType } from '../icon'; +import { EuiTokenMapDisplayOptions } from './token_map'; +export { + EuiTokenMapDisplayOptions, + TokenShape, + TokenColor, + EuiTokenMapType, +} from './token_map'; declare module '@elastic/eui' { /** @@ -8,32 +15,7 @@ declare module '@elastic/eui' { * * @see './token.js' */ - export type TokenSize = 's' | 'm' | 'l'; - - export type TokenColor = - | 'tokenTint01' - | 'tokenTint02' - | 'tokenTint03' - | 'tokenTint04' - | 'tokenTint05' - | 'tokenTint06' - | 'tokenTint07' - | 'tokenTint08' - | 'tokenTint09' - | 'tokenTint10' - | 'tokenTint11' - | 'tokenTint12'; - - export type TokenShape = 'circle' | 'square' | 'rectangle'; - - export interface EuiTokenMapDisplayOptions { - color?: TokenColor; - shape?: TokenShape; - fill?: boolean; - hasBorder?: boolean; - } - export interface EuiTokenProps { iconType: IconType; size?: TokenSize; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index 36d1bb97b70..e9617f0cf59 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -5,7 +5,28 @@ // fill: false, // }, -import { EuiTokenMapDisplayOptions } from '@elastic/eui'; +export type TokenColor = + | 'tokenTint01' + | 'tokenTint02' + | 'tokenTint03' + | 'tokenTint04' + | 'tokenTint05' + | 'tokenTint06' + | 'tokenTint07' + | 'tokenTint08' + | 'tokenTint09' + | 'tokenTint10' + | 'tokenTint11' + | 'tokenTint12'; + +export type TokenShape = 'circle' | 'square' | 'rectangle'; + +export interface EuiTokenMapDisplayOptions { + color?: TokenColor; + shape?: TokenShape; + fill?: boolean; + hasBorder?: boolean; +} export type EuiTokenMapType = | 'tokenClass' @@ -39,10 +60,7 @@ export type EuiTokenMapType = | 'tokenNamespace' | 'tokenModule'; -export const TOKEN_MAP: Record< - EuiTokenMapType, - Partial -> = { +export const TOKEN_MAP: Record = { tokenClass: { shape: 'circle', color: 'tokenTint01', From 588424ca5b85415abc77c31f842afd60677f3c23 Mon Sep 17 00:00:00 2001 From: Theo Date: Wed, 24 Apr 2019 22:02:42 +0100 Subject: [PATCH 4/4] `TOKEN_MAP` code review fixes --- src/components/token/index.d.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts index 538e37f5565..5a605ef7f9b 100644 --- a/src/components/token/index.d.ts +++ b/src/components/token/index.d.ts @@ -1,12 +1,11 @@ import { FunctionComponent, HTMLAttributes } from 'react'; import { CommonProps } from '../common'; import { IconType } from '../icon'; -import { EuiTokenMapDisplayOptions } from './token_map'; -export { - EuiTokenMapDisplayOptions, - TokenShape, - TokenColor, - EuiTokenMapType, +import { + EuiTokenMapDisplayOptions as DisplayOptions, + TokenShape as TkShape, + TokenColor as TkColor, + EuiTokenMapType as TkMapType, } from './token_map'; declare module '@elastic/eui' { @@ -19,9 +18,14 @@ declare module '@elastic/eui' { export interface EuiTokenProps { iconType: IconType; size?: TokenSize; - displayOptions?: EuiTokenMapDisplayOptions; + displayOptions?: DisplayOptions; } + export type TokenShape = TkShape; + export type TokenColor = TkColor; + export type TokenType = TkMapType; + export interface EuiTokenMapDisplayOptions extends DisplayOptions {} + export const EuiToken: FunctionComponent< CommonProps & EuiTokenProps & HTMLAttributes >;