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 1/2] 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>
   );
 }

From 054696683a3ca003482c92328a14c96590128b7f Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 9 Dec 2020 14:00:02 +0100
Subject: [PATCH 2/2] design border changes

---
 .../editor_frame/config_panel/layer_panel.scss            | 8 ++++++++
 .../editor_frame/config_panel/palette_indicator.tsx       | 6 +++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

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 98e1571dcb605..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,6 +114,14 @@
   right: 0;
 }
 
+.lnsLayerPanel__palette {
+  border-radius: 0 0 ($euiBorderRadius - 1px) ($euiBorderRadius - 1px);
+
+  &::after {
+    border: none;
+  }
+}
+
 .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 e11e0af952d74..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
@@ -12,7 +12,11 @@ export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorC
   if (accessorConfig.triggerIcon !== 'colorBy' || !accessorConfig.palette) return null;
   return (
     <div className="lnsLayerPanel__paletteContainer">
-      <EuiColorPaletteDisplay size="xs" palette={accessorConfig.palette} />
+      <EuiColorPaletteDisplay
+        className="lnsLayerPanel__palette"
+        size="xs"
+        palette={accessorConfig.palette}
+      />
     </div>
   );
 }