Added deprecation warning to old color picker API props. Moved named color support handling to color popovers

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -5,10 +5,23 @@ import { ColorPickerPopover } from './ColorPickerPopover';
 import { Themeable, GrafanaTheme } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
+import propDeprecationWarning from '../../utils/propDeprecationWarning';
 
+type ColorPickerChangeHandler = (color: string) => void;
+
+export const handleColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
+  const { onColorChange } = props;
+  if (onColorChange) {
+    propDeprecationWarning(componentName, 'onColorChange', 'onChange');
+  }
+};
 export interface ColorPickerProps extends Themeable {
   color: string;
-  onChange: (color: string) => void;
+  onChange: ColorPickerChangeHandler;
+  /**
+   * @deprecated Use onChange instead
+   */
+  onColorChange?: ColorPickerChangeHandler;
   enableNamedColors?: boolean;
   withArrow?: boolean;
   children?: JSX.Element;
@@ -16,20 +29,18 @@ export interface ColorPickerProps extends Themeable {
 
 export const colorPickerFactory = <T extends ColorPickerProps>(
   popover: React.ComponentType<T>,
-  displayName?: string,
+  displayName = 'ColorPicker',
   renderPopoverArrowFunction?: RenderPopperArrowFn
 ) => {
   return class ColorPicker extends Component<T, any> {
-    static displayName = displayName || 'ColorPicker';
+    static displayName = displayName;
     pickerTriggerRef = createRef<HTMLDivElement>();
 
     handleColorChange = (color: string) => {
-      const { enableNamedColors, onChange } = this.props;
+      const { onColorChange, onChange } = this.props;
+      const changeHandler = (onColorChange || onChange) as ColorPickerChangeHandler;
 
-      if (enableNamedColors) {
-        return onChange(color);
-      }
-      return onChange(getColorFromHexRgbOrName(color));
+      return changeHandler(color);
     };
 
     render() {
@@ -77,7 +88,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                       <div
                         className="sp-preview-inner"
                         style={{
-                          backgroundColor: getColorFromHexRgbOrName(this.props.color, theme),
+                          backgroundColor: getColorFromHexRgbOrName(this.props.color || '#000000', theme),
                         }}
                       />
                     </div>

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import NamedColorsPicker from './NamedColorsPalette';
-import { getColorName } from '../..//utils/colorsPalette';
-import { ColorPickerProps } from './ColorPicker';
+import { getColorName, getColorFromHexRgbOrName } from '../..//utils/colorsPalette';
+import { ColorPickerProps, handleColorPickerPropsDeprecation } from './ColorPicker';
 import { GrafanaTheme, Themeable } from '../../types';
 import { PopperContentProps } from '../Tooltip/PopperController';
 import SpectrumPalette from './SpectrumPalette';
@@ -20,20 +20,27 @@ export class ColorPickerPopover extends React.Component<Props, State> {
     this.state = {
       activePicker: 'palette',
     };
+    handleColorPickerPropsDeprecation('ColorPickerPopover', props);
   }
 
-  handleSpectrumColorSelect = (color: any) => {
-    this.props.onChange(color);
+  handleChange = (color: any) => {
+    const { onColorChange, onChange, enableNamedColors } = this.props;
+    const changeHandler = onColorChange || onChange;
+
+    if (enableNamedColors) {
+      return changeHandler(color);
+    }
+    changeHandler(getColorFromHexRgbOrName(color));
   };
 
   renderPicker = () => {
     const { activePicker } = this.state;
-    const { color, onChange, theme } = this.props;
+    const { color, theme } = this.props;
 
     return activePicker === 'spectrum' ? (
-      <SpectrumPalette color={color} onChange={this.handleSpectrumColorSelect} />
+      <SpectrumPalette color={color} onChange={this.handleChange} />
     ) : (
-      <NamedColorsPicker color={getColorName(color)} onChange={onChange} theme={theme} />
+      <NamedColorsPicker color={getColorName(color)} onChange={this.handleChange} theme={theme} />
     );
   };
 

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -1,24 +1,19 @@
 import React, { FunctionComponent } from 'react';
-import { ColorPickerPopover } from './ColorPickerPopover';
-import { Themeable } from '../../types';
-import { ColorPickerProps } from './ColorPicker';
-import  { PopperContentProps } from '../Tooltip/PopperController';
 
-export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Themeable, PopperContentProps {
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { ColorPickerProps } from './ColorPicker';
+import { PopperContentProps } from '../Tooltip/PopperController';
+
+export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
   yaxis?: number;
   onToggleAxis?: () => void;
 }
 
-export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = ({
-  onChange,
-  color,
-  theme,
-  yaxis,
-  onToggleAxis,
-  updatePopperPosition
-}) => {
+export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = props => {
+  const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
+
   return (
-    <ColorPickerPopover theme={theme} color={color} onChange={onChange} updatePopperPosition={updatePopperPosition}>
+    <ColorPickerPopover color={color || '#000000'} {...colorPickerProps}>
       <div style={{ marginTop: '32px' }}>{yaxis && <AxisSelector yaxis={yaxis} onToggleAxis={onToggleAxis} />}</div>
     </ColorPickerPopover>
   );

packages/grafana-ui/src/utils/propDeprecationWarning.ts

@@ -0,0 +1,6 @@
+const propDeprecationWarning = (componentName: string, propName: string, newPropName: string) => {
+  const message = `[Deprecation warning] ${componentName}: ${propName} is deprecated. Use ${newPropName} instead`;
+  console.warn(message);
+};
+
+export default propDeprecationWarning;