Stories updates

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

@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { ColorPicker } from './ColorPicker';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { SeriesColorPicker } from './SeriesColorPicker';
+import { UseState } from './NamedColorsPicker.story';
 
 const CenteredStory: FunctionComponent<{}> = ({ children }) => {
   return (
@@ -21,7 +22,24 @@ const CenteredStory: FunctionComponent<{}> = ({ children }) => {
 const ColorPickerStories = storiesOf('UI/ColorPicker', module);
 
 ColorPickerStories.addDecorator(story => <CenteredStory>{story()}</CenteredStory>);
-ColorPickerStories.addDecorator(withKnobs);
 ColorPickerStories.add('Color picker', () => {
-  return <ColorPicker color={text('Color HEX or Name or RGB string', '#ff0000')} onChange={() => {}} />;
+  return <ColorPicker color="#ff0000" onChange={() => {}} />;
+});
+ColorPickerStories.add('Series color picker', () => {
+  return (
+    <UseState initialState="#00ff00">
+      {(selectedColor, updateSelectedColor) => {
+        return (
+          <SeriesColorPicker
+            yaxis={1}
+            onToggleAxis={() => {}}
+            color={selectedColor}
+            onChange={color => updateSelectedColor(color)}
+          >
+            <div style={{color: selectedColor}}>Open color picker</div>
+          </SeriesColorPicker>
+        );
+      }}
+    </UseState>
+  );
 });

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

@@ -35,7 +35,7 @@ storiesOf('UI/ColorPickerPopover', module)
     return (
       <ColorPickerPopover
         color="#BC67E6"
-        onColorSelect={color => {
+        onChange={color => {
           console.log(color);
         }}
         theme={selectedTheme || undefined}

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import NamedColorsPicker from './NamedColorsPicker';
-import { Color, getColorName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorName } from '@grafana/ui/src/utils/colorsPalette';
 import { withKnobs, select } from '@storybook/addon-knobs';
 
 const CenteredStory: FunctionComponent<{}> = ({ children }) => {
@@ -24,16 +24,18 @@ interface StateHolderProps<T> {
   children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
 }
 
-class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
+export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
   constructor(props: StateHolderProps<T>) {
     super(props);
     this.state = {
       value: props.initialState,
     };
   }
+
   static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: {} }) {
     return {
       value: props.initialState,
+      ...state
     };
   }
 
@@ -62,14 +64,10 @@ storiesOf('UI/NamedColorPicker', module)
     return (
       <UseState initialState={selectedColor}>
         {(selectedColor, updateSelectedColor) => {
-          console.log(selectedColor);
           return (
             <NamedColorsPicker
-              selectedColor={selectedColor as Color}
+              color={selectedColor}
-              onChange={color => {
+              onChange={updateSelectedColor}
-                // @ts-ignore
-                updateSelectedColor((color).name);
-              }}
             />
           );
         }}
@@ -82,8 +80,8 @@ storiesOf('UI/NamedColorPicker', module)
         {(selectedColor, updateSelectedColor) => {
           return (
             <NamedColorsPicker
-              selectedColor={getColorName(selectedColor)}
+              color={getColorName(selectedColor)}
-              onChange={color => updateSelectedColor(color.variants.dark)}
+              onChange={updateSelectedColor}
             />
           );
         }}

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

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { find, upperFirst } from 'lodash';
-import { Color, ColorsPalete, ColorDefinition } from '../../utils/colorsPalette';
+import { Color, ColorsPalete, ColorDefinition, getColorForTheme } from '../../utils/colorsPalette';
+import { Themeable } from '../../types';
 
 type ColorChangeHandler = (color: ColorDefinition) => void;
 
@@ -10,13 +11,15 @@ enum ColorSwatchVariant {
 }
 
 interface ColorSwatchProps extends React.DOMAttributes<HTMLDivElement> {
-  color: ColorDefinition;
+  color: string;
+  label?: string;
   variant?: ColorSwatchVariant;
   isSelected?: boolean;
 }
 
 const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
   color,
+  label,
   variant = ColorSwatchVariant.Small,
   isSelected,
   ...otherProps
@@ -27,10 +30,10 @@ const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
     width: swatchSize,
     height: swatchSize,
     borderRadius: '50%',
-    background: `${color.variants.dark}`,
+    background: `${color}`,
     marginRight: isSmall ? '0px' : '8px',
-    boxShadow: isSelected ? `inset 0 0 0 2px ${color.variants.dark}, inset 0 0 0 4px white` : 'none',
+    boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px white` : 'none',
-    cursor: isSelected ? 'default' : 'pointer'
+    cursor: isSelected ? 'default' : 'pointer',
   };
 
   return (
@@ -42,32 +45,35 @@ const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
       {...otherProps}
     >
       <div style={swatchStyles} />
-      {variant === ColorSwatchVariant.Large && <span>{upperFirst(color.hue)}</span>}
+      {variant === ColorSwatchVariant.Large && <span>{label}</span>}
     </div>
   );
 };
 
-interface ColorsGroupProps  {
+interface ColorsGroupProps extends Themeable {
   colors: ColorDefinition[];
   selectedColor?: Color;
   onColorSelect: ColorChangeHandler;
   key?: string;
 }
+
 const ColorsGroup: FunctionComponent<ColorsGroupProps> = ({
   colors,
   selectedColor,
   onColorSelect,
+  theme,
   ...otherProps
 }) => {
   const primaryColor = find(colors, color => !!color.isPrimary);
 
   return (
-    <div  {...otherProps} style={{ display: 'flex', flexDirection: 'column' }}>
+    <div {...otherProps} style={{ display: 'flex', flexDirection: 'column' }}>
       {primaryColor && (
         <ColorSwatch
           isSelected={primaryColor.name === selectedColor}
           variant={ColorSwatchVariant.Large}
-          color={primaryColor}
+          color={getColorForTheme(primaryColor, theme)}
+          label={upperFirst(primaryColor.hue)}
           onClick={() => onColorSelect(primaryColor)}
         />
       )}
@@ -77,30 +83,39 @@ const ColorsGroup: FunctionComponent<ColorsGroupProps> = ({
           marginTop: '8px',
         }}
       >
-        {colors.map(color => !color.isPrimary && (
+        {colors.map(
-          <div key={color.name} style={{ marginRight: '4px' }}>
+          color =>
-            <ColorSwatch
+            !color.isPrimary && (
-              isSelected={color.name === selectedColor}
+              <div key={color.name} style={{ marginRight: '4px' }}>
-              color={color}
+                <ColorSwatch
-              onClick={() => onColorSelect(color)}
+                  isSelected={color.name === selectedColor}
-            />
+                  color={getColorForTheme(color, theme)}
-          </div>
+                  onClick={() => onColorSelect(color)}
-        ))}
+                />
+              </div>
+            )
+        )}
       </div>
     </div>
   );
 };
 
-interface NamedColorsPickerProps {
+interface NamedColorsPickerProps extends Themeable {
-  selectedColor?: Color;
+  color?: Color;
-  onChange: ColorChangeHandler;
+  onChange: (colorName: string) => void;
 }
-const NamedColorsPicker = ({ selectedColor, onChange }: NamedColorsPickerProps) => {
-  const swatches: JSX.Element[] = [];
 
+const NamedColorsPicker = ({ color, onChange, theme }: NamedColorsPickerProps) => {
+  const swatches: JSX.Element[] = [];
   ColorsPalete.forEach((colors, hue) => {
     swatches.push(
-      <ColorsGroup key={hue} selectedColor={selectedColor} colors={colors} onColorSelect={onChange} />
+      <ColorsGroup
+        key={hue}
+        theme={theme}
+        selectedColor={color}
+        colors={colors}
+        onColorSelect={color => onChange(color.name)}
+      />
     );
   });