ValuePicker: refactors story from knobs to control (#33122)

* ValuePicker: refactors story from knobs to control

* fixes wrong type issue

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { ButtonVariant, ValuePicker } from '@grafana/ui';
+import { Story } from '@storybook/react';
+import { ValuePicker } from '@grafana/ui';
 import { generateOptions } from '../Select/mockOptions';
-import { getIconKnob } from '../../utils/storybook/knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ComponentSize } from '../../types/size';
+import { getAvailableIcons } from '../../types';
 import mdx from './ValuePicker.mdx';
+import { ValuePickerProps } from './ValuePicker';
 
 export default {
   title: 'Pickers and Editors/ValuePicker',
@@ -15,33 +15,42 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disabled: true,
+    },
+    controls: {
+      exclude: ['onChange', 'options'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'destructive', 'link'],
+      },
+    },
+    icon: {
+      control: {
+        type: 'select',
+        options: getAvailableIcons(),
+      },
+    },
   },
 };
-const VISUAL_GROUP = 'Visual options';
-const variants = ['primary', 'secondary', 'destructive', 'link'];
-const sizes = ['sm', 'md', 'lg'];
 const options = generateOptions();
 
-export const simple = () => {
-  const label = text('Label', 'Pick an option', VISUAL_GROUP);
-  const variant = select('Variant', variants, 'primary', VISUAL_GROUP);
-  const size = select('Size', sizes, 'md', VISUAL_GROUP);
-  const isFullWidth = boolean('Is full width', false, VISUAL_GROUP);
-  const icon = getIconKnob();
-  const menuPlacement = select('Menu placement', ['auto', 'bottom', 'top'], 'auto', VISUAL_GROUP);
-
+export const Simple: Story<ValuePickerProps<string>> = (args) => {
   return (
     <div style={{ width: '200px' }}>
-      <ValuePicker
-        options={options}
-        label={label}
-        onChange={(v) => console.log(v)}
-        variant={variant as ButtonVariant}
-        icon={icon}
-        isFullWidth={isFullWidth}
-        size={size as ComponentSize}
-        menuPlacement={menuPlacement}
-      />
+      <ValuePicker {...args} options={options} onChange={(v) => console.log(v)} />
     </div>
   );
 };
+Simple.args = {
+  label: 'Pick an option',
+  variant: 'primary',
+  size: 'md',
+  isFullWidth: false,
+  icon: 'plus',
+  menuPlacement: 'auto',
+};

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

@@ -7,7 +7,7 @@ import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer';
 import { ComponentSize } from '../../types/size';
 import { selectors } from '@grafana/e2e-selectors';
 
-interface ValuePickerProps<T> {
+export interface ValuePickerProps<T> {
   /** Label to display on the picker button */
   label: string;
   /** Icon to display on the picker button */