Use chroma-js color methods in EuiColorPicker

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added prepend and append to `EuiColorPicker` ([#2819](https://github.com/elastic/eui/pull/2819))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
 - Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817))
+- Converted `EuiColorPicker` color conversion functions to `chroma-js` methods ([#2805](https://github.com/elastic/eui/pull/2805))
 
 **Bug fixes**
 

src/components/color_picker/color_picker.tsx

@@ -3,34 +3,28 @@ import React, {
   HTMLAttributes,
   ReactElement,
   cloneElement,
+  useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
 import classNames from 'classnames';
+import chroma, { ColorSpaces } from 'chroma-js';
 
 import { CommonProps } from '../common';
 
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-// @ts-ignore
 import { EuiFieldText } from '../form/field_text';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from '../form/form_control_layout';
 import { EuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
-import {
-  HSV,
-  VISUALIZATION_COLORS,
-  keyCodes,
-  hexToHsv,
-  hsvToHex,
-  isValidHex,
-} from '../../services';
+import { VISUALIZATION_COLORS, keyCodes } from '../../services';
 
 import { EuiHue } from './hue';
 import { EuiSaturation } from './saturation';
@@ -98,6 +92,13 @@ function isKeyboardEvent(
   return typeof event === 'object' && 'keyCode' in event;
 }
 
+const chromaValid = (color: string) => {
+  // Temporary function until `@types/chroma-js` allows the 2nd param.
+  // Consolidating the `ts-ignore`s to one location
+  // @ts-ignore
+  return chroma.valid(color, 'hex');
+};
+
 export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   button,
   className,
@@ -118,25 +119,34 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   prepend,
   append,
 }) => {
-  const [isColorSelectorShown, setIsColorSelectorShown] = useState(false);
-  const [colorAsHsv, setColorAsHsv] = useState(
-    color ? hexToHsv(color) : hexToHsv('')
+  const getHsvFromColor = useCallback(
+    (): ColorSpaces['hsv'] =>
+      color && chromaValid(color) ? chroma(color).hsv() : [0, 0, 0],
+    [color]
   );
+  const [isColorSelectorShown, setIsColorSelectorShown] = useState(false);
+  const [colorAsHsv, setColorAsHsv] = useState(getHsvFromColor());
   const [lastHex, setLastHex] = useState(color);
   const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null); // Ideally this is uses `useRef`, but `EuiFieldText` isn't ready for that
   const [popoverShouldOwnFocus, setPopoverShouldOwnFocus] = useState(false);
 
   const satruationRef = useRef<HTMLDivElement>(null);
   const swatchRef = useRef<HTMLButtonElement>(null);
 
+  const updateColorAsHsv = ([h, s, v]: ColorSpaces['hsv']) => {
+    // Chroma's passthrough (RGB) parsing determines that black/white/gray are hue-less and returns `NaN`
+    // For our purposes we can process `NaN` as `0`
+    const hue = isNaN(h) ? 0 : h;
+    setColorAsHsv([hue, s, v]);
+  };
+
   useEffect(() => {
-    // Mimics `componentDidMount` and `componentDidUpdate`
     if (lastHex !== color) {
       // Only react to outside changes
-      const newColorAsHsv = color ? hexToHsv(color) : hexToHsv('');
-      setColorAsHsv(newColorAsHsv);
+      const newColorAsHsv = getHsvFromColor();
+      updateColorAsHsv(newColorAsHsv);
     }
-  }, [color, lastHex]);
+  }, [color, lastHex, getHsvFromColor]);
 
   const classes = classNames('euiColorPicker', className);
   const popoverClass = 'euiColorPicker__popoverAnchor';
@@ -236,30 +246,29 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
 
   const handleColorInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleOnChange(e.target.value);
-    if (isValidHex(e.target.value)) {
-      setColorAsHsv(hexToHsv(e.target.value));
+    if (chromaValid(e.target.value)) {
+      updateColorAsHsv(chroma(e.target.value).hsv());
     }
   };
 
-  const handleColorSelection = (color: HSV) => {
-    const { h } = colorAsHsv;
-    const hue = h ? h : 1;
-    const newHsv = { ...color, h: hue };
-    handleOnChange(hsvToHex(newHsv));
-    setColorAsHsv(newHsv);
+  const handleColorSelection = (color: ColorSpaces['hsv']) => {
+    const [h] = colorAsHsv;
+    const [, s, v] = color;
+    const newHsv: ColorSpaces['hsv'] = [h, s, v];
+    handleOnChange(chroma.hsv(...newHsv).hex());
+    updateColorAsHsv(newHsv);
   };
 
   const handleHueSelection = (hue: number) => {
-    const { s, v } = colorAsHsv;
-    const satVal = s && v ? { s, v } : { s: 1, v: 1 };
-    const newHsv = { ...satVal, h: hue };
-    handleOnChange(hsvToHex(newHsv));
-    setColorAsHsv(newHsv);
+    const [, s, v] = colorAsHsv;
+    const newHsv: ColorSpaces['hsv'] = [hue, s, v];
+    handleOnChange(chroma.hsv(...newHsv).hex());
+    updateColorAsHsv(newHsv);
   };
 
   const handleSwatchSelection = (color: string) => {
     handleOnChange(color);
-    setColorAsHsv(hexToHsv(color));
+    updateColorAsHsv(chroma(color).hsv());
 
     handleFinalSelection();
   };
@@ -277,7 +286,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
           />
           <EuiHue
             id={id}
-            hue={typeof colorAsHsv === 'object' ? colorAsHsv.h : undefined}
+            hue={typeof colorAsHsv === 'object' ? colorAsHsv[0] : undefined}
             hex={color || undefined}
             onChange={handleHueSelection}
           />
@@ -318,7 +327,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
       'data-test-subj': testSubjAnchor,
     });
   } else {
-    const showColor = color && isValidHex(color);
+    const showColor = color && chromaValid(color);
     buttonOrInput = (
       <EuiFormControlLayout
         icon={

src/components/color_picker/saturation.test.tsx

@@ -20,7 +20,7 @@ describe('EuiHue', () => {
   test('accepts a color', () => {
     const component = render(
       <EuiSaturation
-        color={{ h: 180, s: 1, v: 0.5 }}
+        color={[180, 1, 0.5]}
         onChange={onChange}
         {...requiredProps}
       />

src/components/color_picker/saturation.tsx

@@ -7,10 +7,10 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
+import { ColorSpaces } from 'chroma-js';
 
 import { CommonProps } from '../common';
 import { keyCodes } from '../../services';
-import { HSV } from '../../services/color';
 import { isNil } from '../../services/predicate';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
@@ -25,8 +25,8 @@ export type SaturationClientRect = Pick<
 export type SaturationPosition = Pick<SaturationClientRect, 'left' | 'top'>;
 
 interface HTMLDivElementOverrides {
-  color?: HSV;
-  onChange: (color: HSV) => void;
+  color?: ColorSpaces['hsv'];
+  onChange: (color: ColorSpaces['hsv']) => void;
 }
 export type EuiSaturationProps = Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -41,7 +41,7 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
   (
     {
       className,
-      color = { h: 1, s: 0, v: 0 },
+      color = [1, 0, 0],
       'data-test-subj': dataTestSubj = 'euiSaturation',
       hex,
       id,
@@ -55,17 +55,14 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       left: 0,
       top: 0,
     });
-    const [lastColor, setlastColor] = useState<HSV | {}>({});
+    const [lastColor, setlastColor] = useState<ColorSpaces['hsv'] | []>([]);
 
     const boxRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
       // Mimics `componentDidMount` and `componentDidUpdate`
-      const { s, v } = color;
-      if (
-        !isNil(boxRef.current) &&
-        Object.values(lastColor).join() !== Object.values(color).join()
-      ) {
+      const [, s, v] = color;
+      if (!isNil(boxRef.current) && lastColor.join() !== color.join()) {
         const { height, width } = boxRef.current.getBoundingClientRect();
         setIndicator({
           left: s * width,
@@ -79,11 +76,11 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       height,
       left,
       width,
-    }: SaturationClientRect) => {
-      const { h } = color;
+    }: SaturationClientRect): ColorSpaces['hsv'] => {
+      const [h] = color;
       const s = left / width;
       const v = 1 - top / height;
-      return { h, s, v };
+      return [h, s, v];
     };
 
     const handleUpdate = (box: SaturationClientRect) => {
@@ -164,7 +161,7 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
             className={classes}
             data-test-subj={dataTestSubj}
             style={{
-              background: `hsl(${color.h}, 100%, 50%)`,
+              background: `hsl(${color[0]}, 100%, 50%)`,
             }}
             {...rest}>
             <EuiScreenReaderOnly>