From 113c6dfecea02697df2840e27482dd1b07ae20e9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 20 Dec 2019 13:18:31 -0500 Subject: [PATCH 01/18] Updated token color map to match the order of the color blind vis palette Slight changes to these colors: - Neon pink became light pink - Primary is no longer used but uses the blue from vis palette instead --- src/components/token/_token.scss | 25 +++++----- src/components/token/token.tsx | 1 + src/components/token/token_map.ts | 83 ++++++++++++++++--------------- 3 files changed, 56 insertions(+), 53 deletions(-) diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss index 9f97c1d856f..b2475b06a65 100644 --- a/src/components/token/_token.scss +++ b/src/components/token/_token.scss @@ -61,18 +61,19 @@ } $tokenTypes: ( - tokenTint01: $euiColorPrimary, - tokenTint02: $euiColorAccent, - tokenTint03: $euiColorVis3, - tokenTint04: $euiColorVis7, - tokenTint05: $euiColorVis1, - tokenTint06: #E6C220, - tokenTint07: $euiColorVis0, - tokenTint08: #920000, - tokenTint09: #F0F, - tokenTint10: #26AB00, - tokenTint11: #4C1604, - tokenTint12: #666 + tokenTint00: $euiColorVis0, // green + tokenTint01: $euiColorVis1, // blue + tokenTint02: $euiColorVis2, // hot pink + tokenTint03: $euiColorVis3, // purple + tokenTint04: $euiColorVis4, // light pink + tokenTint05: $euiColorVis5, // yellow + tokenTint06: $euiColorVis6, // tan + tokenTint07: $euiColorVis7, // orange + tokenTint08: $euiColorVis8, // brown + tokenTint09: $euiColorVis9, // red + tokenTint10: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade), // mid-gray + tokenTint11: #F0F, + tokenTint12: #26AB00, ); @each $tintName, $tintValue in $tokenTypes { diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 1b53e63debe..89e7e02fd44 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -30,6 +30,7 @@ const shapeToClassMap: { [shape in TokenShape]: string } = { export const SHAPES = keysOf(shapeToClassMap); const colorToClassMap: { [color in TokenColor]: string } = { + tokenTint00: 'euiToken--tokenTint00', tokenTint01: 'euiToken--tokenTint01', tokenTint02: 'euiToken--tokenTint02', tokenTint03: 'euiToken--tokenTint03', diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index 46c669cd679..87e9ddee91a 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -6,6 +6,7 @@ // }, export type TokenColor = + | 'tokenTint00' | 'tokenTint01' | 'tokenTint02' | 'tokenTint03' @@ -29,36 +30,36 @@ export interface EuiTokenMapDisplayOptions { } export type EuiTokenMapType = + | 'tokenAnnotation' + | 'tokenArray' + | 'tokenBoolean' | 'tokenClass' - | 'tokenProperty' + | 'tokenConstant' + | 'tokenElement' | 'tokenEnum' - | 'tokenVariable' - | 'tokenMethod' - | 'tokenAnnotation' + | 'tokenEnumMember' + | 'tokenEvent' | 'tokenException' - | 'tokenInterface' - | 'tokenParameter' | 'tokenField' + | 'tokenFile' | 'tokenFunction' - | 'tokenElement' - | 'tokenBoolean' - | 'tokenString' - | 'tokenArray' - | 'tokenConstant' - | 'tokenNumber' - | 'tokenObject' - | 'tokenEvent' + | 'tokenInterface' | 'tokenKey' + | 'tokenMethod' + | 'tokenModule' + | 'tokenNamespace' | 'tokenNull' - | 'tokenStruct' - | 'tokenPackage' + | 'tokenNumber' + | 'tokenObject' | 'tokenOperator' - | 'tokenEnumMember' + | 'tokenPackage' + | 'tokenParameter' + | 'tokenProperty' | 'tokenRepo' + | 'tokenString' + | 'tokenStruct' | 'tokenSymbol' - | 'tokenFile' - | 'tokenNamespace' - | 'tokenModule'; + | 'tokenVariable'; export const TOKEN_MAP: { [mapType in EuiTokenMapType]: EuiTokenMapDisplayOptions @@ -77,7 +78,7 @@ export const TOKEN_MAP: { }, tokenVariable: { shape: 'circle', - color: 'tokenTint04', + color: 'tokenTint07', }, tokenMethod: { shape: 'square', @@ -85,23 +86,23 @@ export const TOKEN_MAP: { }, tokenAnnotation: { shape: 'square', - color: 'tokenTint06', + color: 'tokenTint05', }, tokenException: { shape: 'circle', - color: 'tokenTint07', + color: 'tokenTint00', }, tokenInterface: { shape: 'circle', - color: 'tokenTint08', + color: 'tokenTint09', }, tokenParameter: { shape: 'square', - color: 'tokenTint09', + color: 'tokenTint04', }, tokenField: { shape: 'circle', - color: 'tokenTint10', + color: 'tokenTint12', }, tokenElement: { shape: 'square', @@ -113,23 +114,23 @@ export const TOKEN_MAP: { }, tokenBoolean: { shape: 'square', - color: 'tokenTint05', + color: 'tokenTint01', }, tokenString: { shape: 'square', - color: 'tokenTint07', + color: 'tokenTint00', }, tokenArray: { shape: 'square', - color: 'tokenTint04', + color: 'tokenTint07', }, tokenNumber: { shape: 'circle', - color: 'tokenTint05', + color: 'tokenTint01', }, tokenConstant: { shape: 'circle', - color: 'tokenTint07', + color: 'tokenTint00', }, tokenObject: { shape: 'square', @@ -137,11 +138,11 @@ export const TOKEN_MAP: { }, tokenEvent: { shape: 'circle', - color: 'tokenTint09', + color: 'tokenTint04', }, tokenKey: { shape: 'circle', - color: 'tokenTint06', + color: 'tokenTint05', }, tokenNull: { shape: 'square', @@ -149,33 +150,33 @@ export const TOKEN_MAP: { }, tokenStruct: { shape: 'square', - color: 'tokenTint07', + color: 'tokenTint00', }, tokenPackage: { shape: 'square', - color: 'tokenTint10', + color: 'tokenTint12', }, tokenOperator: { shape: 'circle', - color: 'tokenTint09', + color: 'tokenTint04', }, tokenEnumMember: { shape: 'square', - color: 'tokenTint04', + color: 'tokenTint07', }, tokenRepo: { shape: 'rectangle', - color: 'tokenTint05', + color: 'tokenTint01', fill: true, }, tokenSymbol: { shape: 'rectangle', - color: 'tokenTint07', + color: 'tokenTint00', fill: true, }, tokenFile: { shape: 'rectangle', - color: 'tokenTint12', + color: 'tokenTint10', fill: true, }, tokenNamespace: { @@ -184,6 +185,6 @@ export const TOKEN_MAP: { }, tokenModule: { shape: 'square', - color: 'tokenTint09', + color: 'tokenTint04', }, }; From 33e1e9312a6fd43913bbf22d6c382595fa67af85 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 20 Dec 2019 14:26:37 -0500 Subject: [PATCH 02/18] Allowing custom `iconType` in token map and correctly add the icon sizing --- .../token/__snapshots__/token.test.tsx.snap | 34 +++++++++---------- src/components/token/_token.scss | 6 +++- src/components/token/token.tsx | 8 +++-- src/components/token/token_map.ts | 3 ++ 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index b791c84f605..9084e9b87d0 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiToken is rendered 1`] = ` >
- +
); }; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index 87e9ddee91a..71be16d5256 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -1,3 +1,5 @@ +import { IconType } from '../icon'; + // Sets default displayOptions for EuiTokens based on iconType // tokenClass: { // shape: 'square', @@ -27,6 +29,7 @@ export interface EuiTokenMapDisplayOptions { shape?: TokenShape; fill?: boolean; hideBorder?: boolean; + iconType?: IconType; } export type EuiTokenMapType = From 176ba4404f11e537faf26f202bf3f29e3df9ddfb Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 20 Dec 2019 14:37:20 -0500 Subject: [PATCH 03/18] Adding more tokens and modifying a few to match Kibana palette --- src-docs/src/views/icon/tokens.js | 46 ++++++++++++++++++++++----- src/components/token/token_map.ts | 52 ++++++++++++++++++++++++++++--- 2 files changed, 85 insertions(+), 13 deletions(-) diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index ae59983696e..2dd705de73e 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -25,7 +25,6 @@ import { const tokens = [ 'tokenAnnotation', 'tokenArray', - 'tokenBoolean', 'tokenClass', 'tokenConstant', 'tokenElement', @@ -41,18 +40,26 @@ const tokens = [ 'tokenModule', 'tokenNamespace', 'tokenNull', - 'tokenNumber', - 'tokenObject', 'tokenOperator', 'tokenPackage', 'tokenParameter', 'tokenProperty', - 'tokenString', 'tokenStruct', 'tokenVariable', 'tokenFile', 'tokenSymbol', 'tokenRepo', + 'tokenString', + 'tokenNumber', + 'tokenBoolean', + 'tokenDate', + 'tokenGeo', + 'tokenIP', + 'tokenRange', + 'tokenShape', + 'tokenObject', + 'tokenNested', + 'tokenAlias', ]; export default () => ( @@ -107,8 +114,8 @@ export default () => ( marginBottom: '8px', }}> ( marginBottom: '8px', }}> ( marginBottom: '8px', }}> + + +

A custom token

+ + + + + +
+ Date: Sat, 21 Dec 2019 16:25:52 -0500 Subject: [PATCH 04/18] Undoing map.iconType and changing names of new ones to match icon glyph names Cleans up Token code Makes background color more subtle --- src-docs/src/views/icon/tokens.js | 18 ++--- .../token/__snapshots__/token.test.tsx.snap | 36 +++++----- src/components/token/_token.scss | 19 +++--- src/components/token/token.tsx | 66 ++++++++++--------- src/components/token/token_map.ts | 39 ++++------- 5 files changed, 80 insertions(+), 98 deletions(-) diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index 2dd705de73e..e72d8ac4943 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -52,14 +52,13 @@ const tokens = [ 'tokenString', 'tokenNumber', 'tokenBoolean', - 'tokenDate', - 'tokenGeo', - 'tokenIP', - 'tokenRange', - 'tokenShape', + 'calendar', + 'globe', + 'ip', + 'vector', 'tokenObject', - 'tokenNested', - 'tokenAlias', + 'nested', + 'link', ]; export default () => ( @@ -139,7 +138,6 @@ export default () => ( @@ -161,9 +159,7 @@ export default () => ( iconType="tokenStruct" size="m" displayOptions={{ - color: 'tokenTint10', - shape: 'square', - fill: true, + hideBorder: true, }} />
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 9084e9b87d0..da68c77548d 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiToken is rendered 1`] = `
@@ -138,7 +137,7 @@ export default () => ( @@ -159,7 +158,7 @@ export default () => ( iconType="tokenStruct" size="m" displayOptions={{ - hideBorder: true, + shape: 'circle', }} /> @@ -182,7 +181,7 @@ export default () => ( displayOptions={{ color: 'tokenTint07', shape: 'rectangle', - hideBorder: true, + fill: 'dark', }} /> diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index da68c77548d..e2081826154 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiToken is rendered 1`] = `
+`; + +exports[`EuiToken props fill dark is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props fill light is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props fill none is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props color gray is rendered 1`] = ` +

- Tokens are most commonly used in search to help visually classify - results. The tokens included in EUI can be used to identify a number - of code-based search results. -

- -

- An EuiToken accepts any valid{' '} + Tokens are most commonly used in to visually signify field or code + types. An EuiToken accepts any valid{' '} EuiIcon as its iconType property. However, icons designed specifically for use in the EuiToken are prefixed - with "token" in their name. -

- -

- Multiple variants are available including: shape,{' '} - size,color,{' '} - hideBorder, and fill. + with "token" in their name and have pre-defined styles.

), diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index b0a10c40551..f869840a2e8 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -96,9 +96,11 @@ export default () => (

By default the iconType prop defines the styling of - the token. However, displayOptions allows you to - overwrite the color, shape and fill used if you need a more custom token - using any of the EUI glyph set. + the token if it is a valid EuiTokenMapType (starts + with token) or you can pass any valid{' '} + IconType. You can customize the both by changing the{' '} + shape, size, + color, and fill.

@@ -113,17 +115,10 @@ export default () => ( justifyContent: 'center', marginBottom: '8px', }}> - +
-

A custom token

+

An xs, gray tokenStruct

 @@ -135,15 +130,10 @@ export default () => ( justifyContent: 'center', marginBottom: '8px', }}> - +
-

A custom token

+

A none fill tokenStruct

 @@ -158,13 +148,12 @@ export default () => (
-

A custom token

+

A size m, circle, #FF0000 tokenStruct

 @@ -177,17 +166,15 @@ export default () => ( marginBottom: '8px', }}>
-

A custom token

+

A completely custom token

 diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 78701add5b9..2589362f2e6 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -2,7 +2,27 @@ exports[`EuiToken is rendered 1`] = `
+ +
+`; + +exports[`EuiToken props color can be a custom hex 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenAnnotation is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenArray is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenBoolean is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenClass is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenConstant is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenDate is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenElement is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenEnum is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenEnumMember is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenEvent is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenException is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenField is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenFile is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenFunction is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenGeo is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenIP is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenInterface is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenKey is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenMethod is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenModule is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenNamespace is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenNested is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenNull is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenNumber is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenObject is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenOperator is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenPackage is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenParameter is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenProperty is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenRange is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenRepo is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenShape is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenString is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenStruct is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenSymbol is rendered 1`] = ` +
+ +
+`; + +exports[`EuiToken props iconType as EuiTokenMapType tokenVariable is rendered 1`] = ` +
+ +
+`; + exports[`EuiToken props shape circle is rendered 1`] = `
- +
+
); }; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index c55116fdb1a..b460eec5375 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -15,8 +15,18 @@ export type TokenShape = 'circle' | 'square' | 'rectangle'; export type TokenFill = 'dark' | 'light' | 'none'; export interface EuiTokenMapDisplayOptions { - color?: TokenColor; + /** + * For best results use one of the vis color names (or 'gray'). + * Or supply your own color (can be used with dark or no fill only). + */ + color?: TokenColor | string; + /** + * Outer shape surrounding the icon + */ shape?: TokenShape; + /** + * `light` for lightened color with border, `dark` for solid, or `none` + */ fill?: TokenFill; } From 0cf378192b10944e5dccf5d80f6e4d99df841e1b Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 11 Jan 2020 09:14:24 -0500 Subject: [PATCH 11/18] Using tokens in EuiDataGrid --- src/components/datagrid/column_sorting.tsx | 19 +++++++---------- .../datagrid/column_sorting_draggable.tsx | 21 ++++++------------- src/components/datagrid/data_grid_schema.tsx | 20 +++++++----------- 3 files changed, 22 insertions(+), 38 deletions(-) diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx index 02cd4210694..d38536088b6 100644 --- a/src/components/datagrid/column_sorting.tsx +++ b/src/components/datagrid/column_sorting.tsx @@ -18,14 +18,13 @@ import { euiDragDropReorder, } from '../drag_and_drop'; import { DropResult } from 'react-beautiful-dnd'; -import { EuiIcon } from '../icon'; import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable'; import { EuiDataGridSchema, EuiDataGridSchemaDetector, getDetailsForSchema, } from './data_grid_schema'; -import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; +import { EuiToken } from '../token'; export const useColumnSorting = ( columns: EuiDataGridColumn[], @@ -35,7 +34,6 @@ export const useColumnSorting = ( ): ReactNode => { const [isOpen, setIsOpen] = useState(false); const [avilableColumnsisOpen, setAvailableColumnsIsOpen] = useState(false); - const defaultSchemaColor: string = euiPaletteColorBlind()[4]; // prune any non-existant/hidden columns from sorting useEffect(() => { @@ -143,7 +141,6 @@ export const useColumnSorting = ( sorting={sorting} schema={schema} schemaDetectors={schemaDetectors} - defaultSchemaColor={defaultSchemaColor} /> ); })} @@ -216,24 +213,24 @@ export const useColumnSorting = ( gutterSize="s" component="span"> - diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx index 65d80143aeb..5559b705008 100644 --- a/src/components/datagrid/column_sorting_draggable.tsx +++ b/src/components/datagrid/column_sorting_draggable.tsx @@ -12,6 +12,7 @@ import { EuiDataGridSchemaDetector, } from './data_grid_schema'; import { EuiDataGridSorting } from './data_grid_types'; +import { EuiToken } from '../token'; export interface EuiDataGridColumnSortingDraggableProps { id: string; @@ -20,21 +21,11 @@ export interface EuiDataGridColumnSortingDraggableProps { sorting: EuiDataGridSorting; schema: EuiDataGridSchema; schemaDetectors: EuiDataGridSchemaDetector[]; - defaultSchemaColor: string; } export const EuiDataGridColumnSortingDraggable: FunctionComponent< EuiDataGridColumnSortingDraggableProps -> = ({ - id, - direction, - index, - sorting, - schema, - schemaDetectors, - defaultSchemaColor, - ...rest -}) => { +> = ({ id, direction, index, sorting, schema, schemaDetectors, ...rest }) => { const textSortAsc = schema.hasOwnProperty(id) && schema[id].columnType != null ? ( getDetailsForSchema(schemaDetectors, schema[id].columnType).sortTextAsc @@ -116,22 +107,22 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent< - diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx index fd76e35eaed..6b8e3aeddf3 100644 --- a/src/components/datagrid/data_grid_schema.tsx +++ b/src/components/datagrid/data_grid_schema.tsx @@ -7,8 +7,8 @@ import { import { EuiI18n } from '../i18n'; -import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; import { IconType } from '../icon'; +import { TokenColor } from '../token/token_map'; export interface EuiDataGridSchemaDetector { /** @@ -28,9 +28,9 @@ export interface EuiDataGridSchemaDetector { */ icon: IconType; /** - * The color associated with this data type; it's used to color the icon + * The color associated with this data type; it's used to color the icon token */ - color: string; + color?: TokenColor | string; /** * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z' */ @@ -70,8 +70,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [ if (aValue > bValue) return direction === 'asc' ? -1 : 1; return 0; }, - icon: 'invert', - color: euiPaletteColorBlind()[5], + icon: 'tokenBoolean', sortTextAsc: ( ), @@ -188,8 +186,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [ return 0; }, - icon: 'number', - color: euiPaletteColorBlind()[0], + icon: 'tokenNumber', sortTextAsc: ( ), @@ -220,8 +217,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [ if (a.length < b.length) return direction === 'asc' ? 1 : -1; return 0; }, - icon: 'visVega', - color: euiPaletteColorBlind()[3], + icon: 'tokenObject', sortTextAsc: ( Date: Mon, 13 Jan 2020 14:32:19 -0500 Subject: [PATCH 12/18] Update docs comments --- src-docs/src/views/datagrid/datagrid_example.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js index 2a20d29889a..4541aa3ee29 100644 --- a/src-docs/src/views/datagrid/datagrid_example.js +++ b/src-docs/src/views/datagrid/datagrid_example.js @@ -39,7 +39,7 @@ const gridSnippet = ` rowCount={200} // Required. Sets up three columns, the last of which has a custom schema we later define down below. // The second column B won't allow clicking in to see the content in a popup. - // The first column defines an starting width of 150px and prevents the user from resizing it + // The first column defines a starting width of 150px and prevents the user from resizing it columns={[{ id: 'A', initialWidth: 150, isResizable: false }, { id: 'B', isExpandable: false }, {id: 'C', schema: 'franchise'}]} // Optional. This allows you to initially hide columns. Users can still turn them on. columnVisibility={{ @@ -105,9 +105,9 @@ const gridSnippet = ` sortTextAsc: 'Star Wars-Star Trek', // Text for what the DESC sort does. sortTextDesc: 'Star Trek-Star Wars', - // EuiIcon to signify this schema. + // EuiIcon or Token to signify this schema. icon: 'star', - // The color to use for the icon. + // The color to use for the icon token. color: '#000000', }, ]} From 7930aaf607541aa5688d7dc76121e1f9fa0e24cf Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 13 Jan 2020 17:21:56 -0500 Subject: [PATCH 13/18] Render span and no fill text is graphic color --- .../token/__snapshots__/token.test.tsx.snap | 242 +++++++++--------- src/components/token/_token.scss | 3 +- src/components/token/token.tsx | 6 +- src/components/token/token_map.ts | 2 +- 4 files changed, 127 insertions(+), 126 deletions(-) diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 2589362f2e6..bc687fb3e8f 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiToken is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color can be a custom hex 1`] = ` -
@@ -34,11 +34,11 @@ exports[`EuiToken props color can be a custom hex 1`] = ` width="16" xmlns="http://www.w3.org/2000/svg" /> -
+ `; exports[`EuiToken props color euiColorVis0 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis1 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis2 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis3 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis4 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis5 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis6 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis7 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis8 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color euiColorVis9 is rendered 1`] = ` -
-
+ `; exports[`EuiToken props color gray is rendered 1`] = ` -
-
+ `; exports[`EuiToken props fill dark is rendered 1`] = ` -
-
+ `; exports[`EuiToken props fill light is rendered 1`] = ` -
-
+ `; exports[`EuiToken props fill none is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenAlias is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenAnnotation is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenArray is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenBoolean is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenClass is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenConstant is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenDate is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenElement is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenEnum is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenEnumMember is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenEvent is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenException is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenField is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenFile is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenFunction is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenGeo is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenIP is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenInterface is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenKey is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenMethod is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenModule is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenNamespace is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenNested is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenNull is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenNumber is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenObject is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenOperator is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenPackage is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenParameter is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenProperty is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenRange is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenRepo is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenShape is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenString is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenStruct is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenSymbol is rendered 1`] = ` -
-
+ `; exports[`EuiToken props iconType as EuiTokenMapType tokenVariable is rendered 1`] = ` -
-
+ `; exports[`EuiToken props shape circle is rendered 1`] = ` -
-
+ `; exports[`EuiToken props shape rectangle is rendered 1`] = ` -
-
+ `; exports[`EuiToken props shape square is rendered 1`] = ` -
-
+ `; exports[`EuiToken props size l is rendered 1`] = ` -
-
+ `; exports[`EuiToken props size m is rendered 1`] = ` -
-
+ `; exports[`EuiToken props size s is rendered 1`] = ` -
-
+ `; exports[`EuiToken props size xs is rendered 1`] = ` -
-
+ `; diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss index e0a0a60298c..b678445edca 100644 --- a/src/components/token/_token.scss +++ b/src/components/token/_token.scss @@ -72,9 +72,10 @@ // Always coloring the fill against the tinted/shaded background color, // ensures the color of the icon is the same with or without a background - color: $fillColor; + color: $color; &.euiToken--light { + color: $fillColor; background-color: $backgroundColor; box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 70%); } diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 37362f8abb0..a659abff945 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -78,7 +78,7 @@ interface TokenProps { export type EuiTokenProps = CommonProps & TokenProps & EuiTokenMapDisplayOptions & - HTMLAttributes; + HTMLAttributes; export const EuiToken: FunctionComponent = ({ iconType, @@ -153,8 +153,8 @@ export const EuiToken: FunctionComponent = ({ ); return ( -
+ -
+ ); }; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index b460eec5375..5a22fe23cbc 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -201,7 +201,7 @@ export const TOKEN_MAP: { }, tokenGeo: { shape: 'square', - color: 'euiColorVis1', + color: 'euiColorVis5', }, tokenIP: { shape: 'square', From 92b0646e0845d52b564d9f0c115bdb06be5da1b0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 14 Jan 2020 17:17:32 -0500 Subject: [PATCH 14/18] Cleanup --- src-docs/src/views/icon/icon_example.js | 2 +- src-docs/src/views/icon/tokens.js | 2 +- src/components/datagrid/data_grid_schema.tsx | 4 +- .../token/__snapshots__/token.test.tsx.snap | 40 ++++----- src/components/token/_token.scss | 4 +- src/components/token/token.test.tsx | 6 +- src/components/token/token.tsx | 88 +++++++++++-------- src/components/token/token_map.ts | 34 +------ 8 files changed, 82 insertions(+), 98 deletions(-) diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index a2c79c6ed4d..2c90f771cd3 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -206,7 +206,7 @@ export const IconExample = { text: (

- Tokens are most commonly used in to visually signify field or code + Tokens are most commonly used to visually signify field or code types. An EuiToken accepts any valid{' '} EuiIcon as its iconType property. However, icons designed diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index f869840a2e8..57a5aabb37e 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -98,7 +98,7 @@ export default () => ( By default the iconType prop defines the styling of the token if it is a valid EuiTokenMapType (starts with token) or you can pass any valid{' '} - IconType. You can customize the both by changing the{' '} + IconType. You can customize both by changing the{' '} shape, size, color, and fill.

diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx index 6b8e3aeddf3..9672dfecbb8 100644 --- a/src/components/datagrid/data_grid_schema.tsx +++ b/src/components/datagrid/data_grid_schema.tsx @@ -8,7 +8,7 @@ import { import { EuiI18n } from '../i18n'; import { IconType } from '../icon'; -import { TokenColor } from '../token/token_map'; +import { EuiTokenProps } from '../token'; export interface EuiDataGridSchemaDetector { /** @@ -30,7 +30,7 @@ export interface EuiDataGridSchemaDetector { /** * The color associated with this data type; it's used to color the icon token */ - color?: TokenColor | string; + color?: EuiTokenProps['color'] | string; /** * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z' */ diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index bc687fb3e8f..bb5ef2b49a1 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiToken is rendered 1`] = ` - + ); }; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index 5a22fe23cbc..dab1d2218a6 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -1,34 +1,4 @@ -export type TokenColor = - | 'euiColorVis0' - | 'euiColorVis1' - | 'euiColorVis2' - | 'euiColorVis3' - | 'euiColorVis4' - | 'euiColorVis5' - | 'euiColorVis6' - | 'euiColorVis7' - | 'euiColorVis8' - | 'euiColorVis9' - | 'gray'; - -export type TokenShape = 'circle' | 'square' | 'rectangle'; -export type TokenFill = 'dark' | 'light' | 'none'; - -export interface EuiTokenMapDisplayOptions { - /** - * For best results use one of the vis color names (or 'gray'). - * Or supply your own color (can be used with dark or no fill only). - */ - color?: TokenColor | string; - /** - * Outer shape surrounding the icon - */ - shape?: TokenShape; - /** - * `light` for lightened color with border, `dark` for solid, or `none` - */ - fill?: TokenFill; -} +import { TokenProps } from './token'; export type EuiTokenMapType = | 'tokenAnnotation' @@ -70,7 +40,7 @@ export type EuiTokenMapType = | 'tokenVariable'; export const TOKEN_MAP: { - [mapType in EuiTokenMapType]: EuiTokenMapDisplayOptions + [mapType in EuiTokenMapType]: Omit } = { tokenClass: { shape: 'circle', From a4f5aa3346623bc0afa59b05b4683e2c436589fb Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 15 Jan 2020 13:26:15 -0500 Subject: [PATCH 15/18] Fixed sizing of xs Token and TreeView usage --- src/components/token/_token.scss | 4 ---- src/components/tree_view/tree_view.scss | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss index b85b8065fd2..72c47d8a0c5 100644 --- a/src/components/token/_token.scss +++ b/src/components/token/_token.scss @@ -23,10 +23,6 @@ width: $euiSizeM; height: $euiSizeM; - svg { - max-width: $euiSizeS + 2px; - } - &.euiToken--rectangle { padding: 0 $euiSizeXS; } diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 48af8a17d6a..f21e3f9fc1b 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -71,7 +71,7 @@ } .euiTreeView__iconWrapper { - margin: -1px ($euiSizeS * .75) 0 0; + margin: 0 ($euiSizeS * .75) 0 0; } .euiTreeView__nodeLabel { From d1f8a5212638055f637690d66ef2ccee51e0a7a1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 3 Feb 2020 11:07:29 -0500 Subject: [PATCH 16/18] Addressing a few PR comments & fixing snaps --- src-docs/src/views/icon/tokens.js | 12 ++++++------ src/components/token/_token.scss | 4 ++-- src/components/token/token.tsx | 16 +++++++++------- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index 57a5aabb37e..152996284fa 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -94,13 +94,13 @@ export default () => ( +

Custom tokens

- By default the iconType prop defines the styling of - the token if it is a valid EuiTokenMapType (starts - with token) or you can pass any valid{' '} - IconType. You can customize both by changing the{' '} - shape, size, - color, and fill. + By default, an iconType with the token prefix (i.e. + those listed above) will have predefined styles. However, any valid{' '} + iconType can be passed and, in either case, the{' '} + shape, size,{' '} + color, and fill can be customized.

diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss index 72c47d8a0c5..97fa36f131f 100644 --- a/src/components/token/_token.scss +++ b/src/components/token/_token.scss @@ -62,7 +62,7 @@ @each $type in $euiTokenTypeKeys { .euiToken--#{$type} { $color: map-get(map-get($euiTokenTypes, $type), 'graphic'); - $backgroundColor: tintOrShade($color, 90%, 90%); + $backgroundColor: tintOrShade($color, 90%, 70%); $fillColor: makeHighContrastColor($color, $backgroundColor); // Without a background, the fill color should be the graphic color @@ -71,7 +71,7 @@ &.euiToken--light { color: $fillColor; background-color: $backgroundColor; - box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 70%); + box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%); } // Dark tokens uses the main color as the background against light or dark text diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 76fd56f648a..6d32798ee45 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -72,14 +72,17 @@ export interface TokenProps { /** * For best results use one of the vis color names (or 'gray'). * Or supply your own color (can be used with dark or no fill only). + * Default: `gray` */ color?: TokenColor | string; /** * Outer shape surrounding the icon + * Default: `circle` */ shape?: TokenShape; /** * `light` for lightened color with border, `dark` for solid, or `none` + * Default: `light` */ fill?: TokenFill; /** @@ -109,15 +112,14 @@ export const EuiToken: FunctionComponent = ({ // When displaying at the small size, the token specific icons // should actually be displayed at medium size - if (String(iconType).indexOf('token') === 0 && size === 's') { + if ( + typeof iconType === 'string' && + iconType.indexOf('token') === 0 && + size === 's' + ) { finalSize = 'm'; } - const defaultDisplay = { - color: 'gray', - fill: 'light', - shape: 'sqaure', - }; const currentDisplay = { color, fill, @@ -129,7 +131,7 @@ export const EuiToken: FunctionComponent = ({ // grab its properties if (iconType in TOKEN_MAP) { const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType]; - finalDisplay = defaults(currentDisplay, tokenDisplay, defaultDisplay); + finalDisplay = defaults(currentDisplay, tokenDisplay); } else { finalDisplay = currentDisplay; } From 1cba948d99ebbe2750010e7b6e88126153b0e610 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 3 Feb 2020 15:15:40 -0500 Subject: [PATCH 17/18] Remove `style` from type declaration --- src/components/token/token.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 6d32798ee45..8d7e0f726e5 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import { defaults } from 'lodash'; import classNames from 'classnames'; import { CommonProps, keysOf } from '../common'; @@ -89,7 +89,6 @@ export interface TokenProps { * Size of the token */ size?: TokenSize; - style?: CSSProperties; } export type EuiTokenProps = CommonProps & From ff797bebe2853fca3ab1b4171caa485f58fec909 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 5 Feb 2020 11:09:57 -0500 Subject: [PATCH 18/18] Adding comment --- src/components/token/token_map.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index dab1d2218a6..bfab347a752 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -39,6 +39,12 @@ export type EuiTokenMapType = | 'tokenSymbol' | 'tokenVariable'; +/** + * Most of the style combinations for tokens are semi-arbitrary. However, there was an effort + * to use the square shape for more common token types like string and number. Reserving the + * circle shape for more uncommon token types so they grab attention. + */ + export const TOKEN_MAP: { [mapType in EuiTokenMapType]: Omit } = {