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', }, ]} diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index 55ed7a3b751..646fd924b54 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -32,20 +32,16 @@ const tokensSource = require('!!raw-loader!./tokens'); const tokensSnippet = [ '', ``, ``, ]; @@ -210,23 +206,12 @@ export const IconExample = { text: (

- 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 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 ae59983696e..152996284fa 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -23,9 +23,18 @@ import { } from '../../../../src/components'; const tokens = [ + 'tokenString', + 'tokenNumber', + 'tokenBoolean', + 'tokenDate', + 'tokenGeo', + 'tokenIP', + 'tokenShape', + 'tokenNested', + 'tokenAlias', + 'tokenRange', 'tokenAnnotation', 'tokenArray', - 'tokenBoolean', 'tokenClass', 'tokenConstant', 'tokenElement', @@ -41,13 +50,11 @@ const tokens = [ 'tokenModule', 'tokenNamespace', 'tokenNull', - 'tokenNumber', 'tokenObject', 'tokenOperator', 'tokenPackage', 'tokenParameter', 'tokenProperty', - 'tokenString', 'tokenStruct', 'tokenVariable', 'tokenFile', @@ -87,11 +94,13 @@ export default () => ( +

Custom tokens

- 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. + 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.

@@ -106,18 +115,25 @@ export default () => ( justifyContent: 'center', marginBottom: '8px', }}> - + -

A custom token

+

An xs, gray tokenStruct

+ + + + + +
+ +
+ +

A none fill tokenStruct

 @@ -130,15 +146,14 @@ export default () => ( marginBottom: '8px', }}> -

A custom token

+

A size m, circle, #FF0000 tokenStruct

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

A custom token

+

A completely custom token

 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..9672dfecbb8 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 { EuiTokenProps } from '../token'; 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?: EuiTokenProps['color'] | 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: ( `; @@ -7278,6 +7278,25 @@ exports[`EuiIcon props type timelionApp is rendered 1`] = ` `; +exports[`EuiIcon props type tokenAlias is rendered 1`] = ` + +`; + exports[`EuiIcon props type tokenAnnotation is rendered 1`] = ` `; @@ -7367,6 +7387,25 @@ exports[`EuiIcon props type tokenConstant is rendered 1`] = ` `; +exports[`EuiIcon props type tokenDate is rendered 1`] = ` + +`; + exports[`EuiIcon props type tokenElement is rendered 1`] = `
+ + +`; + +exports[`EuiToken props color can be a custom hex 1`] = ` + + + +`; + +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 color tokenTint01 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint02 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint03 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint04 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint05 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint06 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint07 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint08 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint09 is rendered 1`] = ` -
-
+ `; -exports[`EuiToken props color tokenTint10 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 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/_index.scss b/src/components/token/_index.scss index 486546cf04e..30c744130f3 100644 --- a/src/components/token/_index.scss +++ b/src/components/token/_index.scss @@ -1 +1,2 @@ +@import 'variables'; @import 'token'; diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss index 9f97c1d856f..97fa36f131f 100644 --- a/src/components/token/_token.scss +++ b/src/components/token/_token.scss @@ -1,10 +1,9 @@ .euiToken { - display: flex; + display: inline-flex; align-items: center; justify-content: center; svg { - width: 100%; height: 100%; margin: auto; } @@ -60,42 +59,27 @@ box-sizing: content-box; } -$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 -); - -@each $tintName, $tintValue in $tokenTypes { - .euiToken--#{$tintName} { - box-shadow: 0 0 0 1px $tintValue; - - $backgroundColor: tintOrShade($tintValue, 70%, 70%); - background-color: $backgroundColor; - - &.euiToken--no-border { - box-shadow: none; - } +@each $type in $euiTokenTypeKeys { + .euiToken--#{$type} { + $color: map-get(map-get($euiTokenTypes, $type), 'graphic'); + $backgroundColor: tintOrShade($color, 90%, 70%); + $fillColor: makeHighContrastColor($color, $backgroundColor); - &.euiToken--fill { - background-color: $tintValue; + // Without a background, the fill color should be the graphic color + color: $color; - svg { - fill: $euiColorGhost; - } + &.euiToken--light { + color: $fillColor; + background-color: $backgroundColor; + box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%); } - svg { - fill: makeHighContrastColor($tintValue, $backgroundColor); + // Dark tokens uses the main color as the background against light or dark text + $color: map-get(map-get($euiTokenTypes, $type), 'behindText'); + + &.euiToken--dark { + background-color: $color; + color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk); } } } diff --git a/src/components/token/_variables.scss b/src/components/token/_variables.scss new file mode 100644 index 00000000000..8bad4d5f81e --- /dev/null +++ b/src/components/token/_variables.scss @@ -0,0 +1,13 @@ +// sass-lint:disable indentation + +$euiTokenGrayColor: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade); + +// Appends the gray color to the color blind palette +$euiTokenTypes: map-merge($euiPaletteColorBlind, ( + 'gray': ( + graphic: $euiTokenGrayColor, + behindText: $euiTokenGrayColor, + ) +)); + +$euiTokenTypeKeys: map-keys($euiTokenTypes); diff --git a/src/components/token/token.test.tsx b/src/components/token/token.test.tsx index b8eccac15a7..119fcc8a36b 100644 --- a/src/components/token/token.test.tsx +++ b/src/components/token/token.test.tsx @@ -1,43 +1,36 @@ import React from 'react'; import { render } from 'enzyme'; +import { requiredProps } from '../../test'; -import { EuiToken, SHAPES, SIZES } from './token'; -import { TokenColor } from './token_map'; - -const tokenColors: TokenColor[] = [ - 'tokenTint01', - 'tokenTint02', - 'tokenTint03', - 'tokenTint04', - 'tokenTint05', - 'tokenTint06', - 'tokenTint07', - 'tokenTint08', - 'tokenTint09', - 'tokenTint10', -]; +import { EuiToken, COLORS, SHAPES, SIZES, FILLS } from './token'; +import { TOKEN_MAP } from './token_map'; +import { keysOf } from '../common'; + +const tokenTypes = keysOf(TOKEN_MAP); +const tokenColors = COLORS; describe('EuiToken', () => { test('is rendered', () => { - const component = render(); + const component = render(); expect(component).toMatchSnapshot(); }); describe('props', () => { + describe('iconType as EuiTokenMapType', () => { + tokenTypes.forEach(type => { + test(`${type} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + describe('shape', () => { SHAPES.forEach(shape => { test(`${shape} is rendered`, () => { - const component = render( - - ); + const component = render(); expect(component).toMatchSnapshot(); }); @@ -47,39 +40,39 @@ describe('EuiToken', () => { describe('color', () => { tokenColors.forEach(color => { test(`${color} is rendered`, () => { - const component = render( - - ); + const component = render(); expect(component).toMatchSnapshot(); }); }); + + test('can be a custom hex', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); describe('size', () => { SIZES.forEach(tokenSize => { test(`${tokenSize} is rendered`, () => { const component = render( - + ); expect(component).toMatchSnapshot(); }); }); }); + + describe('fill', () => { + FILLS.forEach(fill => { + test(`${fill} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); }); diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 1b53e63debe..8d7e0f726e5 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -1,16 +1,27 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; +import { defaults } from 'lodash'; import classNames from 'classnames'; -import { IconType, EuiIcon } from '../icon'; -import { - EuiTokenMapType, - EuiTokenMapDisplayOptions, - TokenColor, - TokenShape, - TOKEN_MAP, -} from './token_map'; import { CommonProps, keysOf } from '../common'; +import { isColorDark, hexToRgb } from '../../services'; + +import { IconType, EuiIcon, IconSize } from '../icon'; +import { EuiTokenMapType, TOKEN_MAP } from './token_map'; type TokenSize = 'xs' | 's' | 'm' | 'l'; +type TokenShape = 'circle' | 'square' | 'rectangle'; +type TokenFill = 'dark' | 'light' | 'none'; +type TokenColor = + | 'euiColorVis0' + | 'euiColorVis1' + | 'euiColorVis2' + | 'euiColorVis3' + | 'euiColorVis4' + | 'euiColorVis5' + | 'euiColorVis6' + | 'euiColorVis7' + | 'euiColorVis8' + | 'euiColorVis9' + | 'gray'; const sizeToClassMap: { [size in TokenSize]: string } = { xs: 'euiToken--xsmall', @@ -29,95 +40,138 @@ const shapeToClassMap: { [shape in TokenShape]: string } = { export const SHAPES = keysOf(shapeToClassMap); +const fillToClassMap: { [fill in TokenFill]: string | null } = { + none: null, + light: 'euiToken--light', + dark: 'euiToken--dark', +}; + +export const FILLS = keysOf(fillToClassMap); + const colorToClassMap: { [color in TokenColor]: string } = { - tokenTint01: 'euiToken--tokenTint01', - tokenTint02: 'euiToken--tokenTint02', - tokenTint03: 'euiToken--tokenTint03', - tokenTint04: 'euiToken--tokenTint04', - tokenTint05: 'euiToken--tokenTint05', - tokenTint06: 'euiToken--tokenTint06', - tokenTint07: 'euiToken--tokenTint07', - tokenTint08: 'euiToken--tokenTint08', - tokenTint09: 'euiToken--tokenTint09', - tokenTint10: 'euiToken--tokenTint10', - tokenTint11: 'euiToken--tokenTint11', - tokenTint12: 'euiToken--tokenTint12', + euiColorVis0: 'euiToken--euiColorVis0', + euiColorVis1: 'euiToken--euiColorVis1', + euiColorVis2: 'euiToken--euiColorVis2', + euiColorVis3: 'euiToken--euiColorVis3', + euiColorVis4: 'euiToken--euiColorVis4', + euiColorVis5: 'euiToken--euiColorVis5', + euiColorVis6: 'euiToken--euiColorVis6', + euiColorVis7: 'euiToken--euiColorVis7', + euiColorVis8: 'euiToken--euiColorVis8', + euiColorVis9: 'euiToken--euiColorVis9', + gray: 'euiToken--gray', }; export const COLORS = keysOf(colorToClassMap); -interface TokenProps { +export interface TokenProps { /** * An EUI icon type */ iconType: IconType; /** - * Size of the token + * 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` */ - size?: TokenSize; + 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; /** - * By default EUI will auto color tokens. You can can however control it - * - `color`: can be `tokenTint01` thru `tokenTint10` - * - `shape`: square, circle, rectangle as options - * - `fill`: makes it a solid color - * - `hideBorder`: disables the outer border + * Size of the token */ - displayOptions?: EuiTokenMapDisplayOptions; + size?: TokenSize; } export type EuiTokenProps = CommonProps & TokenProps & - HTMLAttributes; + HTMLAttributes; export const EuiToken: FunctionComponent = ({ iconType, - displayOptions = {}, + color, + fill, + shape, size = 's', + style = {}, className, ...rest }) => { - // Check if display options is empty - const displayOptionsIsEmpty = - Object.keys(displayOptions).length === 0 && - displayOptions.constructor === Object; - - let tokenShape: TokenShape; - let tokenColor: TokenColor; - let fill: boolean; - let tokenHidesBorder: boolean; - - // Check if this has a mapping, and doesn't have custom displayOptions - if (iconType in TOKEN_MAP && displayOptionsIsEmpty) { - const mapping = TOKEN_MAP[iconType as EuiTokenMapType]; - // These should be found in the standard mappings, but apply defaults - // just in case. - tokenShape = mapping.shape || 'square'; - tokenColor = mapping.color || 'tokenTint01'; - fill = mapping.fill ? true : false; - tokenHidesBorder = mapping.hideBorder ? true : false; + // Set the icon size to the same as the passed size + // unless they passed `xs` which IconSize doesn't support + let finalSize: IconSize = size === 'xs' ? 's' : size; + + // When displaying at the small size, the token specific icons + // should actually be displayed at medium size + if ( + typeof iconType === 'string' && + iconType.indexOf('token') === 0 && + size === 's' + ) { + finalSize = 'm'; + } + + const currentDisplay = { + color, + fill, + shape, + }; + let finalDisplay; + + // If the iconType passed is one of the prefab token types, + // grab its properties + if (iconType in TOKEN_MAP) { + const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType]; + finalDisplay = defaults(currentDisplay, tokenDisplay); } else { - // Use the displayOptions passed or use some defaults - tokenShape = displayOptions.shape ? displayOptions.shape : 'square'; - tokenColor = displayOptions.color ? displayOptions.color : 'tokenTint01'; - fill = displayOptions.fill ? true : false; - tokenHidesBorder = displayOptions.hideBorder ? true : false; + finalDisplay = currentDisplay; + } + + const finalColor = finalDisplay.color || 'gray'; + const finalShape = finalDisplay.shape || 'circle'; + let finalFill = finalDisplay.fill || 'light'; + + // Color can be a named space via euiColorVis + let colorClass; + if (finalColor in colorToClassMap) { + colorClass = colorToClassMap[finalColor as TokenColor]; + } + // Or it can be a string which adds inline styles for the + else { + // text color if fill='none' or + if (finalFill === 'none') { + style.color = finalColor; + } + // full background color if fill='dark' and overrides fill='light' with dark + else { + finalFill = 'dark'; + style.backgroundColor = finalColor; + style.color = isColorDark(...hexToRgb(finalColor)) + ? '#FFFFFF' + : '#000000'; + } } const classes = classNames( 'euiToken', - colorToClassMap[tokenColor], - shapeToClassMap[tokenShape], + colorClass, + shapeToClassMap[finalShape], + fillToClassMap[finalFill], sizeToClassMap[size], - { - 'euiToken--fill': fill, - 'euiToken--no-border': tokenHidesBorder, - }, className ); return ( -
- -
+ + + ); }; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index 46c669cd679..bfab347a752 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -1,189 +1,202 @@ -// Sets default displayOptions for EuiTokens based on iconType -// tokenClass: { -// shape: 'square', -// color: 'tokenTint01', -// fill: false, -// }, - -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; - hideBorder?: boolean; -} +import { TokenProps } from './token'; 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' + | 'tokenDate' + | 'tokenIP' + | 'tokenNested' + | 'tokenAlias' + | 'tokenShape' + | 'tokenGeo' + | 'tokenRange' | 'tokenSymbol' - | 'tokenFile' - | 'tokenNamespace' - | 'tokenModule'; + | '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]: EuiTokenMapDisplayOptions + [mapType in EuiTokenMapType]: Omit } = { tokenClass: { shape: 'circle', - color: 'tokenTint01', + color: 'euiColorVis1', }, tokenProperty: { shape: 'circle', - color: 'tokenTint02', + color: 'euiColorVis2', }, tokenEnum: { shape: 'circle', - color: 'tokenTint03', + color: 'euiColorVis3', }, tokenVariable: { shape: 'circle', - color: 'tokenTint04', + color: 'euiColorVis7', }, tokenMethod: { shape: 'square', - color: 'tokenTint02', + color: 'euiColorVis2', }, tokenAnnotation: { shape: 'square', - color: 'tokenTint06', + color: 'euiColorVis5', }, tokenException: { shape: 'circle', - color: 'tokenTint07', + color: 'euiColorVis0', }, tokenInterface: { shape: 'circle', - color: 'tokenTint08', + color: 'euiColorVis9', }, tokenParameter: { shape: 'square', - color: 'tokenTint09', + color: 'euiColorVis4', }, tokenField: { shape: 'circle', - color: 'tokenTint10', + color: 'euiColorVis0', }, tokenElement: { shape: 'square', - color: 'tokenTint03', + color: 'euiColorVis3', }, tokenFunction: { shape: 'circle', - color: 'tokenTint02', + color: 'euiColorVis2', }, tokenBoolean: { shape: 'square', - color: 'tokenTint05', + color: 'euiColorVis7', }, tokenString: { shape: 'square', - color: 'tokenTint07', + color: 'euiColorVis1', }, tokenArray: { shape: 'square', - color: 'tokenTint04', + color: 'euiColorVis7', }, tokenNumber: { - shape: 'circle', - color: 'tokenTint05', + shape: 'square', + color: 'euiColorVis0', }, tokenConstant: { shape: 'circle', - color: 'tokenTint07', + color: 'euiColorVis0', }, tokenObject: { - shape: 'square', - color: 'tokenTint03', + shape: 'circle', + color: 'euiColorVis3', }, tokenEvent: { shape: 'circle', - color: 'tokenTint09', + color: 'euiColorVis4', }, tokenKey: { shape: 'circle', - color: 'tokenTint06', + color: 'euiColorVis5', }, tokenNull: { shape: 'square', - color: 'tokenTint02', + color: 'euiColorVis2', }, tokenStruct: { shape: 'square', - color: 'tokenTint07', + color: 'euiColorVis0', }, tokenPackage: { shape: 'square', - color: 'tokenTint10', + color: 'euiColorVis0', }, tokenOperator: { shape: 'circle', - color: 'tokenTint09', + color: 'euiColorVis4', }, tokenEnumMember: { shape: 'square', - color: 'tokenTint04', + color: 'euiColorVis7', }, tokenRepo: { shape: 'rectangle', - color: 'tokenTint05', - fill: true, + color: 'euiColorVis1', + fill: 'dark', }, tokenSymbol: { shape: 'rectangle', - color: 'tokenTint07', - fill: true, + color: 'euiColorVis0', + fill: 'dark', }, tokenFile: { shape: 'rectangle', - color: 'tokenTint12', - fill: true, + color: 'gray', + fill: 'dark', }, tokenNamespace: { shape: 'square', - color: 'tokenTint01', + color: 'euiColorVis1', }, tokenModule: { shape: 'square', - color: 'tokenTint09', + color: 'euiColorVis4', + }, + tokenDate: { + shape: 'square', + color: 'euiColorVis6', + }, + tokenGeo: { + shape: 'square', + color: 'euiColorVis5', + }, + tokenIP: { + shape: 'square', + color: 'euiColorVis9', + }, + tokenShape: { + shape: 'circle', + color: 'euiColorVis8', + }, + tokenRange: { + shape: 'circle', + color: 'euiColorVis4', + }, + tokenNested: { + shape: 'circle', + color: 'euiColorVis2', + }, + tokenAlias: { + shape: 'circle', + color: 'euiColorVis3', }, }; 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 { diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index aade7d9b11e..b0224f9ad14 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -78,6 +78,8 @@ $euiPaletteColorBlind: ( ) ) !default; +$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); + $euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; $euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; $euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;