[Lens] Use eui component instead of custom color stops (#85239) (#85421)

elastic · Dec 10, 2020 · f5ae464 · f5ae464
1 parent 59461a6
commit f5ae464
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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/.../plugins/lens/public/editor_frame_service/editor_frame/config_panel/palette_indicator.tsx b/.../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>
   );
 }