[Discover] Update array field format to use a CSS class instead of in…

…line styles

src/plugins/field_formats/common/content_types/html_content_type.ts

@@ -7,7 +7,6 @@
  */
 
 import { escape, isFunction } from 'lodash';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { IFieldFormat, HtmlContextTypeConvert, FieldFormatsContentType } from '../types';
 import { asPrettyString, getHighlightHtml } from '../utils';
 
@@ -34,8 +33,7 @@ export const setup = (
  htmlContextTypeConvert?: HtmlContextTypeConvert
 ): HtmlContextTypeConvert => {
  const convert = getConvertFn(format, htmlContextTypeConvert);
- const highlightColor = euiThemeVars.euiColorMediumShade;
- const highlight = (text: string) => `<span style="color: ${highlightColor};">${text}</span>`;
+ const highlight = (text: string) => `<span class="ffArray__highlight">${text}</span>`;
 
  const recurse: HtmlContextTypeConvert = (value, options = {}) => {
  if (value == null) {

src/plugins/field_formats/common/field_format.test.ts

@@ -152,7 +152,7 @@ describe('FieldFormat class', () => {
  const f = getTestFormat();
 
  expect(f.convert([123, 456, 789], 'html')).toMatchInlineSnapshot(
- `"<span style=\\"color: #98a2b3;\\">[</span>123<span style=\\"color: #98a2b3;\\">,</span> 456<span style=\\"color: #98a2b3;\\">,</span> 789<span style=\\"color: #98a2b3;\\">]</span>"`
+ `"<span class=\\"ffArray__highlight\\">[</span>123<span class=\\"ffArray__highlight\\">,</span> 456<span class=\\"ffArray__highlight\\">,</span> 789<span class=\\"ffArray__highlight\\">]</span>"`
  );
  });
 
@@ -164,16 +164,16 @@ describe('FieldFormat class', () => {
  ];
 
  expect(f.convert(newlineList, 'html')).toMatchInlineSnapshot(`
- "<span style=\\"color: #98a2b3;\\">[</span>
+ "<span class=\\"ffArray__highlight\\">[</span>
  {
  &quot;foo&quot;: &quot;bar&quot;,
  &quot;fizz&quot;: &quot;buzz&quot;
- }<span style=\\"color: #98a2b3;\\">,</span>
+ }<span class=\\"ffArray__highlight\\">,</span>
  {
  &quot;bar&quot;: &quot;foo&quot;,
  &quot;buzz&quot;: &quot;fizz&quot;
  }
- <span style=\\"color: #98a2b3;\\">]</span>"
+ <span class=\\"ffArray__highlight\\">]</span>"
  `);
  });
  });

src/plugins/field_formats/public/index.scss

@@ -1 +1,2 @@
 @import './lib/converters/index';
+@import './lib/content_types/index';

src/plugins/field_formats/public/lib/content_types/_html_content_type.scss

@@ -0,0 +1,3 @@
+.ffArray__highlight {
+ color: $euiColorMediumShade;
+}

src/plugins/field_formats/public/lib/content_types/_index.scss

@@ -0,0 +1 @@
+@import './html_content_type';