[7.x] Upgrade EUI to v18.2.0 (#54786) (#54869)

* Upgrade EUI to v18.2.0 (#54786)

* 18.2.0

* ts update

* Updated `euiColorVis0`

* Update `euiColorVis1`

* Updating `euiColorVis2`

* Updated `euiColorVis3`

* Updated the rest

* Updated hard-coded viz palette hexes to latest

* src snapshot updates

* x-pack test updates

* mock jest fn

* Updated two vegalite visualization screenshots

Co-authored-by: Caroline Horn <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>

* snapshot

Co-authored-by: Caroline Horn <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>

Author: 3 people

package.json

@@ -115,7 +115,7 @@
     "@elastic/charts": "^16.1.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "18.0.0",
+    "@elastic/eui": "18.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --watch"
   },
   "devDependencies": {
-    "@elastic/eui": "18.0.0",
+    "@elastic/eui": "18.2.0",
     "@elastic/charts": "^16.1.0",
     "@kbn/dev-utils": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",

src/legacy/core_plugins/vis_type_vega/public/__tests__/vegalite_graph.hjson

@@ -39,7 +39,7 @@
     range: {
       category: {scheme: "elastic"}
     }
-    mark: {color: "#00B3A4"}
+    mark: {color: "#54B399"}
   }
   autosize: {type: "fit", contains: "padding"}
 }

src/legacy/core_plugins/vis_type_vega/public/__tests__/vegalite_image_256.png

@@ -53,7 +53,7 @@ describe(`VegaParser._setDefaultColors`, () => {
     test({}, true, {
       config: {
         range: { category: { scheme: 'elastic' } },
-        mark: { color: '#5BBAA0' },
+        mark: { color: '#54B399' },
       },
     })
   );
@@ -63,15 +63,15 @@ describe(`VegaParser._setDefaultColors`, () => {
     test({}, false, {
       config: {
         range: { category: { scheme: 'elastic' } },
-        arc: { fill: '#5BBAA0' },
-        area: { fill: '#5BBAA0' },
-        line: { stroke: '#5BBAA0' },
-        path: { stroke: '#5BBAA0' },
-        rect: { fill: '#5BBAA0' },
-        rule: { stroke: '#5BBAA0' },
-        shape: { stroke: '#5BBAA0' },
-        symbol: { fill: '#5BBAA0' },
-        trail: { fill: '#5BBAA0' },
+        arc: { fill: '#54B399' },
+        area: { fill: '#54B399' },
+        line: { stroke: '#54B399' },
+        path: { stroke: '#54B399' },
+        rect: { fill: '#54B399' },
+        rule: { stroke: '#54B399' },
+        shape: { stroke: '#54B399' },
+        symbol: { fill: '#54B399' },
+        trail: { fill: '#54B399' },
       },
     })
   );

src/legacy/core_plugins/vis_type_vega/public/__tests__/vegalite_image_512.png

@@ -577,7 +577,7 @@ export class VegaParser {
     this._setDefaultValue({ scheme: 'elastic' }, 'config', 'range', 'category');
 
     if (this.isVegaLite) {
-      // Vega-Lite: set default color, works for fill and strike --  config: { mark:  { color: '#00B3A4' }}
+      // Vega-Lite: set default color, works for fill and strike --  config: { mark:  { color: '#54B399' }}
       this._setDefaultValue(defaultColor, 'config', 'mark', 'color');
     } else {
       // Vega - global mark has very strange behavior, must customize each mark type individually

src/legacy/core_plugins/vis_type_vega/public/data_model/__tests__/vega_parser.js

@@ -345,7 +345,7 @@
 //** Background color of the whole progress component
 @progress-bg:                           shade(@gray-lighter, 13%);
 //** Default progress bar color
-@progress-bar-bg:                       #00B3A4;
+@progress-bar-bg:                       #54B399;
 
 //== List group
 //

src/legacy/core_plugins/vis_type_vega/public/data_model/vega_parser.js

@@ -40,7 +40,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
       <EuiRange
         min={1}
         max={config.get('visualization:tileMap:maxPrecision')}
-        value={value}
+        value={value || ''}
         onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
           setValue(Number(ev.currentTarget.value))
         }