Adjusting EuiToken for use as ES field types

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',
       },
     ]}

src-docs/src/views/icon/icon_example.js

@@ -32,20 +32,16 @@ const tokensSource = require('!!raw-loader!./tokens');
 const tokensSnippet = [
   '<EuiToken type="tokenAnnotation" />',
   `<EuiToken
-  iconType="visMapCoordinate"
-  displayOptions={{
-    color: 'tokenTint05',
-    shape: 'circle',
-  }}
+  iconType="tokenElement"
+  color="euiColorVis07"
+  shape="circle"
 />`,
   `<EuiToken
-  iconType="tokenElement"
+  iconType="visMapCoordinate"
   size="l"
-  displayOptions={{
-    color: 'tokenTint07',
-    shape: 'rectangle',
-    hideBorder: true
-  }}
+  color="#FF0000"
+  shape="rectangle"
+  fill="dark"
 />`,
 ];
 
@@ -210,23 +206,12 @@ export const IconExample = {
       text: (
         <div>
           <p>
-            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.
-          </p>
-
-          <p>
-            An <EuiCode>EuiToken</EuiCode> accepts any valid{' '}
+            Tokens are most commonly used to visually signify field or code
+            types. An <EuiCode>EuiToken</EuiCode> accepts any valid{' '}
             <EuiCode>EuiIcon</EuiCode> as its
             <EuiCode>iconType</EuiCode> property. However, icons designed
             specifically for use in the <EuiCode>EuiToken</EuiCode> are prefixed
-            with &quot;token&quot; in their name.
-          </p>
-
-          <p>
-            Multiple variants are available including: <EuiCode>shape</EuiCode>,{' '}
-            <EuiCode>size</EuiCode>,<EuiCode>color</EuiCode>,{' '}
-            <EuiCode>hideBorder</EuiCode>, and <EuiCode>fill</EuiCode>.
+            with &quot;token&quot; in their name and have pre-defined styles.
           </p>
         </div>
       ),

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',
@@ -89,9 +96,11 @@ export default () => (
     <EuiText size="s">
       <p>
         By default the <EuiCode>iconType</EuiCode> prop defines the styling of
-        the token. However, <EuiCode>displayOptions</EuiCode> 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 <EuiCode>EuiTokenMapType</EuiCode> (starts
+        with <EuiCode>token</EuiCode>) or you can pass any valid{' '}
+        <EuiCode>IconType</EuiCode>. You can customize both by changing the{' '}
+        <EuiCode>shape</EuiCode>, <EuiCode>size</EuiCode>,
+        <EuiCode>color</EuiCode>, and <EuiCode>fill</EuiCode>.
       </p>
     </EuiText>
 
@@ -106,18 +115,25 @@ export default () => (
               justifyContent: 'center',
               marginBottom: '8px',
             }}>
-            <EuiToken
-              iconType="tokenEvent"
-              size="m"
-              displayOptions={{
-                color: 'tokenTint10',
-                shape: 'square',
-                fill: true,
-              }}
-            />
+            <EuiToken iconType="tokenStruct" size="xs" color="gray" />
           </div>
           <EuiText size="s">
-            <p>A custom token</p>
+            <p>An xs, gray tokenStruct</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem className="guideDemo__icon">
+        <EuiPanel>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: '8px',
+            }}>
+            <EuiToken iconType="tokenStruct" fill="none" />
+          </div>
+          <EuiText size="s">
+            <p>A none fill tokenStruct</p>
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>
@@ -130,15 +146,14 @@ export default () => (
               marginBottom: '8px',
             }}>
             <EuiToken
-              iconType="visMapCoordinate"
-              displayOptions={{
-                color: 'tokenTint05',
-                shape: 'circle',
-              }}
+              iconType="tokenStruct"
+              size="m"
+              shape="circle"
+              color="#FF0000"
             />
           </div>
           <EuiText size="s">
-            <p>A custom token</p>
+            <p>A size m, circle, #FF0000 tokenStruct</p>
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>
@@ -151,17 +166,15 @@ export default () => (
               marginBottom: '8px',
             }}>
             <EuiToken
-              iconType="tokenElement"
+              iconType="faceNeutral"
               size="l"
-              displayOptions={{
-                color: 'tokenTint07',
-                shape: 'rectangle',
-                hideBorder: true,
-              }}
+              color="euiColorVis7"
+              shape="rectangle"
+              fill="dark"
             />
           </div>
           <EuiText size="s">
-            <p>A custom token</p>
+            <p>A completely custom token</p>
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>

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">
                               <EuiFlexItem grow={false}>
-                                <EuiIcon
-                                  color={
+                                <EuiToken
+                                  iconType={
                                     schema.hasOwnProperty(id) &&
                                     schema[id].columnType != null
                                       ? getDetailsForSchema(
                                           schemaDetectors,
                                           schema[id].columnType
-                                        ).color
-                                      : defaultSchemaColor
+                                        ).icon
+                                      : 'tokenString'
                                   }
-                                  type={
+                                  color={
                                     schema.hasOwnProperty(id) &&
                                     schema[id].columnType != null
                                       ? getDetailsForSchema(
                                           schemaDetectors,
                                           schema[id].columnType
-                                        ).icon
-                                      : 'string'
+                                        ).color
+                                      : undefined
                                   }
                                 />
                               </EuiFlexItem>

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<
             </EuiFlexItem>
 
             <EuiFlexItem grow={false}>
-              <EuiIcon
+              <EuiToken
                 color={
                   schema.hasOwnProperty(id) && schema[id].columnType != null
                     ? getDetailsForSchema(
                         schemaDetectors,
                         schema[id].columnType
                       ).color
-                    : defaultSchemaColor
+                    : undefined
                 }
-                type={
+                iconType={
                   schema.hasOwnProperty(id) && schema[id].columnType != null
                     ? getDetailsForSchema(
                         schemaDetectors,
                         schema[id].columnType
                       ).icon
-                    : 'string'
+                    : 'tokenString'
                 }
               />
             </EuiFlexItem>

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: (
       <EuiI18n
         token="euiDataGridSchema.booleanSortTextAsc"
@@ -112,7 +111,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
       return 0;
     },
     icon: 'currency',
-    color: euiPaletteColorBlind()[0],
+    color: 'euiColorVis0',
     sortTextAsc: (
       <EuiI18n
         token="euiDataGridSchema.currencySortTextAsc"
@@ -150,8 +149,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
 
       return Math.max(isoMatchLength, unixMatchLength) / value.length || 0;
     },
-    icon: 'calendar',
-    color: euiPaletteColorBlind()[7],
+    icon: 'tokenDate',
     sortTextAsc: (
       <EuiI18n token="euiDataGridSchema.dateSortTextAsc" default="New-Old" />
     ),
@@ -188,8 +186,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
 
       return 0;
     },
-    icon: 'number',
-    color: euiPaletteColorBlind()[0],
+    icon: 'tokenNumber',
     sortTextAsc: (
       <EuiI18n token="euiDataGridSchema.numberSortTextAsc" default="Low-High" />
     ),
@@ -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: (
       <EuiI18n
         token="euiDataGridSchema.jsonSortTextAsc"