[Lens] Use eui component instead of custom color stops (#85239)
This commit is contained in:
parent
f3d60c519d
commit
33c552feee
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue