From 5af27cb43e47abd617b09b63d1330219250c295f Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 24 Feb 2021 12:35:35 +0100
Subject: [PATCH] ColorPicker: updates story from knobs to controls (#31429)

* ColorPicker: updates story from knobs to controls

* changed story name to uppercase

* made some changes to story name

* made some changes
---
 .../ColorPicker/ColorPicker.story.tsx         | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
index ee44c0c78d4..7d0f61ccc31 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
@@ -1,18 +1,14 @@
 import React from 'react';
-import { boolean } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { UseState } from '../../utils/storybook/UseState';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import { ColorPickerProps } from './ColorPickerPopover';
 import mdx from './ColorPicker.mdx';
 
-const getColorPickerKnobs = () => {
-  return {
-    enableNamedColors: boolean('Enable named colors', false),
-  };
-};
-
 export default {
   title: 'Pickers and Editors/ColorPicker',
   component: ColorPicker,
@@ -22,12 +18,21 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    enableNamedColors: false,
+  },
+  argTypes: {
+    color: NOOP_CONTROL,
+    onChange: NOOP_CONTROL,
+    onColorChange: NOOP_CONTROL,
   },
 };
 
-export const basic = () => {
-  const { enableNamedColors } = getColorPickerKnobs();
-
+export const Basic: Story<ColorPickerProps> = ({ enableNamedColors }) => {
   return (
     <UseState initialState="#00ff00">
       {(selectedColor, updateSelectedColor) => {
@@ -44,9 +49,7 @@ export const basic = () => {
   );
 };
 
-export const seriesColorPicker = () => {
-  const { enableNamedColors } = getColorPickerKnobs();
-
+export const SeriesPicker: Story<ColorPickerProps> = ({ enableNamedColors }) => {
   return (
     <UseState initialState="#00ff00">
       {(selectedColor, updateSelectedColor) => {