From f5ae464bf9489358a0afeadbad373da77dfc59ab Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 10 Dec 2020 09:35:44 +0100
Subject: [PATCH] [Lens] Use eui component instead of custom color stops
 (#85239) (#85421)

---
 .../config_panel/layer_panel.scss             |  8 +++++--
 .../config_panel/palette_indicator.tsx        | 21 +++++++------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
index a1a072be77f81..0f512e535c9d1 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@@ -114,8 +114,12 @@
   right: 0;
 }
 
-.lnsLayerPanel__paletteColor {
-  height: $euiSizeXS;
+.lnsLayerPanel__palette {
+  border-radius: 0 0 ($euiBorderRadius - 1px) ($euiBorderRadius - 1px);
+
+  &::after {
+    border: none;
+  }
 }
 
 .lnsLayerPanel__dimensionLink {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/palette_indicator.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/palette_indicator.tsx
index 7e65fe7025932..b27451236e3b4 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/palette_indicator.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/palette_indicator.tsx
@@ -5,23 +5,18 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiColorPaletteDisplay } from '@elastic/eui';
 import { AccessorConfig } from '../../../types';
 
 export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorConfig }) {
   if (accessorConfig.triggerIcon !== 'colorBy' || !accessorConfig.palette) return null;
   return (
-    <EuiFlexGroup className="lnsLayerPanel__paletteContainer" gutterSize="none" alignItems="center">
-      {accessorConfig.palette.map((color) => (
-        <EuiFlexItem
-          key={color}
-          className="lnsLayerPanel__paletteColor"
-          grow={true}
-          style={{
-            backgroundColor: color,
-          }}
-        />
-      ))}
-    </EuiFlexGroup>
+    <div className="lnsLayerPanel__paletteContainer">
+      <EuiColorPaletteDisplay
+        className="lnsLayerPanel__palette"
+        size="xs"
+        palette={accessorConfig.palette}
+      />
+    </div>
   );
 }