feat: allow clearing colors from memory

src/chart_types/xy_chart/utils/series.ts

@@ -694,7 +694,12 @@ function getHighestOverride(
   customColors: Map<SeriesKey, Color>,
   overrides: ColorOverrides,
 ): Color | undefined {
-  let color: Color | undefined = overrides.temporary[key];
+  let color: Color | undefined | null = overrides.temporary[key];
+
+  if (color === null) {
+    // Use default color when temporary is null
+    return;
+  }
 
   if (color) {
     return color;

src/components/legend/legend_item.tsx

@@ -110,6 +110,7 @@ interface LegendItemState {
 /** @internal */
 export class LegendListItem extends Component<LegendItemProps, LegendItemState> {
   static displayName = 'LegendItem';
+  shouldClearPersistedColor = false;
 
   colorRef = createRef<HTMLDivElement>();
   state: LegendItemState = {
@@ -183,17 +184,21 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
     const { seriesIdentifier, color } = item;
 
     const handleClose = () => {
-      setPersistedColorAction(seriesIdentifier.key, color);
+      setPersistedColorAction(seriesIdentifier.key, this.shouldClearPersistedColor ? null : color);
       clearTemporaryColorsAction();
       this.toggleIsOpen();
     };
+    const handleChange = (c: Color | null) => {
+      this.shouldClearPersistedColor = c === null;
+      setTemporaryColorAction(seriesIdentifier.key, c);
+    };
     if (ColorPicker && this.state.isOpen && this.colorRef.current) {
       return (
         <ColorPicker
           anchor={this.colorRef.current}
           color={color}
           onClose={handleClose}
-          onChange={(color: Color) => setTemporaryColorAction(seriesIdentifier.key, color)}
+          onChange={handleChange}
           seriesIdentifier={seriesIdentifier}
         />
       );

src/specs/settings.tsx

@@ -248,7 +248,7 @@ export interface LegendColorPickerProps {
   /**
    * Callback to update temporary color state
    */
-  onChange: (color: Color) => void;
+  onChange: (color: Color | null) => void;
   /**
    * Series id for the active series
    */

src/state/actions/colors.ts

@@ -36,13 +36,13 @@ interface ClearTemporaryColors {
 interface SetTemporaryColor {
   type: typeof SET_TEMPORARY_COLOR;
   key: SeriesKey;
-  color: Color;
+  color: Color | null;
 }
 
 interface SetPersistedColor {
   type: typeof SET_PERSISTED_COLOR;
   key: SeriesKey;
-  color: Color;
+  color: Color | null;
 }
 
 /** @internal */
@@ -51,12 +51,12 @@ export function clearTemporaryColors(): ClearTemporaryColors {
 }
 
 /** @internal */
-export function setTemporaryColor(key: SeriesKey, color: Color): SetTemporaryColor {
+export function setTemporaryColor(key: SeriesKey, color: Color | null): SetTemporaryColor {
   return { type: SET_TEMPORARY_COLOR, key, color };
 }
 
 /** @internal */
-export function setPersistedColor(key: SeriesKey, color: Color): SetPersistedColor {
+export function setPersistedColor(key: SeriesKey, color: Color | null): SetPersistedColor {
   return { type: SET_PERSISTED_COLOR, key, color };
 }
 

src/state/chart_state.ts

@@ -191,7 +191,7 @@ export interface ExternalEventsState {
 
 /** @internal */
 export interface ColorOverrides {
-  temporary: Record<SeriesKey, Color>;
+  temporary: Record<SeriesKey, Color | null>;
   persisted: Record<SeriesKey, Color>;
 }
 
@@ -399,10 +399,18 @@ export const chartStoreReducer = (chartId: string) => {
           ...state,
           colors: {
             ...state.colors,
-            persisted: {
-              ...state.colors.persisted,
-              [action.key]: action.color,
-            },
+            persisted:
+              action.color !== null
+                ? {
+                    ...state.colors.persisted,
+                    [action.key]: action.color,
+                  }
+                : (() => {
+                    const colors = { ...state.colors.persisted };
+                    delete colors[action.key];
+
+                    return colors;
+                  })(),
           },
         };
       default:

stories/legend/9_color_picker.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer } from '@elastic/eui';
+import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 
@@ -41,14 +41,19 @@ export const Example = () => {
         [seriesIdentifier.key]: color,
       });
     };
-    const handleChange = (color: Color) => {
-      onChange(color);
-      onChangeAction(color);
+    const handleChange = (c: Color | null) => {
+      onChange(c);
+      onChangeAction(c);
     };
     return (
       <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
         <EuiColorPicker display="inline" color={color} onChange={handleChange} />
         <EuiSpacer size="m" />
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty size="s" onClick={() => handleChange(null)}>
+            Clear color
+          </EuiButtonEmpty>
+        </EuiFlexItem>
         <EuiButton fullWidth size="s" onClick={handleClose}>
           Done
         </EuiButton>