From cb9484cdd0bd7646d2554ad0ea06e716043c27b4 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 8 Dec 2020 10:38:55 +0100
Subject: [PATCH] use eui component instead of custom color stops

---
 .../editor_frame/config_panel/layer_panel.scss  |  4 ----
 .../config_panel/palette_indicator.tsx          | 17 ++++-------------
 2 files changed, 4 insertions(+), 17 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..98e1571dcb605 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,10 +114,6 @@
   right: 0;
 }
 
-.lnsLayerPanel__paletteColor {
-  height: $euiSizeXS;
-}
-
 .lnsLayerPanel__dimensionLink {
   width: 100%;
 
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..e11e0af952d74 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,14 @@
  */
 
 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 size="xs" palette={accessorConfig.palette} />
+    </div>
   );
 }