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

This commit is contained in:
Joe Reuter 2020-12-09 16:06:25 +01:00 committed by GitHub
parent f3d60c519d
commit 33c552feee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 15 deletions

View file

@ -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 {

View file

@ -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>
);
}