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

flash1293 · web-flow · commit 33c552feee04 · 2020-12-09T16:06:25.000+01:00
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/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>
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -114,8 +114,12 @@`
`114`	`114`	`right: 0;`
`115`	`115`	`}`
`116`	`116`
`117`		`-.lnsLayerPanel__paletteColor {`
`118`		`- height: $euiSizeXS;`
	`117`	`+.lnsLayerPanel__palette {`
	`118`	`+ border-radius: 0 0 ($euiBorderRadius - 1px) ($euiBorderRadius - 1px);`
	`119`	`+`
	`120`	`+ &::after {`
	`121`	`+ border: none;`
	`122`	`+ }`
`119`	`123`	`}`
`120`	`124`
`121`	`125`	`.lnsLayerPanel__dimensionLink {`