Docs: Add docs for valuepicker (#28327)

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

+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { ValuePicker } from './ValuePicker';
+
+<Meta title="MDX|Button" component={ValuePicker} />
+
+# ValuePicker
+A component that looks like a button but transforms into a select when clicked.
+
+### Example usage
+This component is currently used when adding [FieldOverrides](https://grafana.com/docs/grafana/latest/panels/field-options/) in the panel edit mode.
+
+
+```tsx
+  <ValuePicker
+    label='Choose an option'
+    options={[
+      {
+        value: 'option1',
+        label: 'Option 1'
+      },
+      {
+        value: 'option2',
+        label: 'Option 2'
+      },
+      {
+        value: 'option3',
+        label: 'Option 3'
+      }
+    ]}
+    onChange={(value) => doThings}
+    variant='primary'
+    size='md'
+  />
+```
+
+
+<Props of={ValuePicker} />

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

-import { text } from '@storybook/addon-knobs';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ValuePicker } from '@grafana/ui';
 import React from 'react';
 import React from 'react';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { ButtonVariant, ValuePicker } from '@grafana/ui';
 import { generateOptions } from '../Select/mockOptions';
 import { generateOptions } from '../Select/mockOptions';
+import { getIconKnob } from '../../utils/storybook/knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { ComponentSize } from '../../types/size';
+import mdx from './ValuePicker.mdx';
 
 
 export default {
 export default {
   title: 'Pickers and Editors/ValuePicker',
   title: 'Pickers and Editors/ValuePicker',
   component: ValuePicker,
   component: ValuePicker,
   decorators: [withCenteredStory],
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 };
-
+const VISUAL_GROUP = 'Visual options';
+const variants = ['primary', 'secondary', 'destructive', 'link'];
+const sizes = ['sm', 'md', 'lg'];
 const options = generateOptions();
 const options = generateOptions();
 
 
 export const simple = () => {
 export const simple = () => {
-  const label = text('Label', 'Pick an option');
+  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);
+
   return (
   return (
     <div style={{ width: '200px' }}>
     <div style={{ width: '200px' }}>
-      <ValuePicker options={options} label={label} onChange={v => console.log(v)} />
+      <ValuePicker
+        options={options}
+        label={label}
+        onChange={v => console.log(v)}
+        variant={variant as ButtonVariant}
+        icon={icon}
+        isFullWidth={isFullWidth}
+        size={size as ComponentSize}
+        menuPlacement={menuPlacement}
+      />
     </div>
     </div>
   );
   );
 };
 };

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

@@ -14,10 +14,15 @@ interface ValuePickerProps<T> {
   icon?: IconName;
   icon?: IconName;
   /** ValuePicker options  */
   /** ValuePicker options  */
   options: Array<SelectableValue<T>>;
   options: Array<SelectableValue<T>>;
+  /** Callback to handle selected option */
   onChange: (value: SelectableValue<T>) => void;
   onChange: (value: SelectableValue<T>) => void;
+  /** Which ButtonVariant to render */
   variant?: ButtonVariant;
   variant?: ButtonVariant;
+  /** Size of button  */
   size?: ComponentSize;
   size?: ComponentSize;
+  /** Should the picker cover the full width of its parent */
   isFullWidth?: boolean;
   isFullWidth?: boolean;
+  /** Control where the menu is rendered */
   menuPlacement?: 'auto' | 'bottom' | 'top';
   menuPlacement?: 'auto' | 'bottom' | 'top';
 }
 }