Use EuiTokens for ES field types (#57911) (#58293)

* [FieldIcon] Refactor to extend EuiToken and props

* [Add to FieldIcon] Export props

* [Graph] Updated instances of FieldIcon

* [Maps] Update FieldIcon instance

* [Lens] Update FieldIcon usage


* [Discover] Update FieldIcon usage


* Remove comment

* [Lens] Delete unused files

* [Graph] Fix alignments

* More cleanup

* Fixing snaps

* [Lens] Removing method `getColorForDataType`

The method no longer returns the correct color and EuiProgress doesn’t currently support all the colors from the token map. @cchaos will follow up with a PR to address the coloring of the field data charts. Right now they will fallback to pink for progress and default for charts.

* [Maps] Fixing implementations of FieldIcon

* [Graph] Using css utility class instead of custom class

* Snap

* Fix css to use var

src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss

@@ -206,7 +206,7 @@ discover-app {
   background-color: transparent;
 }
 
-.dscField--noResults {
+.dscFieldName--noResults {
   color: $euiColorDarkShade;
 }
 

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx

@@ -18,7 +18,9 @@
  */
 import React from 'react';
 import classNames from 'classnames';
-import { FieldIcon } from '../../../../../../../../../plugins/kibana_react/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { FieldIcon, FieldIconProps } from '../../../../../../../../../plugins/kibana_react/public';
 import { shortenDottedString } from '../../../../../../../../../plugins/data/common/utils';
 import { getFieldTypeName } from './field_type_name';
 
@@ -35,25 +37,35 @@ interface Props {
   fieldName?: string;
   fieldType?: string;
   useShortDots?: boolean;
+  fieldIconProps?: Omit<FieldIconProps, 'type'>;
 }
 
-export function FieldName({ field, fieldName, fieldType, useShortDots }: Props) {
+export function FieldName({ field, fieldName, fieldType, useShortDots, fieldIconProps }: Props) {
   const type = field ? String(field.type) : String(fieldType);
   const typeName = getFieldTypeName(type);
 
   const name = field ? String(field.name) : String(fieldName);
   const displayName = useShortDots ? shortenDottedString(name) : name;
 
-  const className = classNames({
-    'dscField--noResults': field ? !field.rowCount && !field.scripted : false,
-    // this is currently not styled, should display an icon
-    scripted: field ? field.scripted : false,
+  const noResults = field ? !field.rowCount && !field.scripted : false;
+
+  const className = classNames('dscFieldName', {
+    'dscFieldName--noResults': noResults,
   });
 
   return (
-    <span className={className} title={typeName}>
-      <FieldIcon type={type} label={typeName} />
-      <span className="dscFieldName">{displayName}</span>
-    </span>
+    <EuiFlexGroup className={className} alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <FieldIcon
+          type={type}
+          label={typeName}
+          scripted={field ? field.scripted : false}
+          {...fieldIconProps}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem className="eui-textTruncate">
+        <span className="dscFieldName__displayName eui-textTruncate">{displayName}</span>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/_field_chooser.scss

@@ -10,7 +10,6 @@
 
 .dscFieldName {
   color: $euiColorDarkShade;
-  padding-left: $euiSizeS;
 }
 
 

src/legacy/core_plugins/kibana/public/discover/np_ready/components/table/table_row.tsx

@@ -87,7 +87,12 @@ export function DocViewTableRow({
         </td>
       )}
       <td className="kbnDocViewer__field">
-        <FieldName field={fieldMapping} fieldName={field} fieldType={fieldType} />
+        <FieldName
+          field={fieldMapping}
+          fieldName={field}
+          fieldType={fieldType}
+          fieldIconProps={{ fill: 'none', color: 'gray' }}
+        />
       </td>
       <td>
         {isCollapsible && (