StatsPicker: updates story from knobs to control (#34008)

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

@@ -3,16 +3,8 @@ import React, { PureComponent } from 'react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { StatsPicker } from '@grafana/ui';
-import { text, boolean } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
-
+import { Props } from './StatsPicker';
-const getKnobs = () => {
-  return {
-    placeholder: text('Placeholder Text', ''),
-    defaultStat: text('Default Stat', ''),
-    allowMultiple: boolean('Allow Multiple', false),
-    initialStats: text('Initial Stats', ''),
-  };
-};
 
 interface State {
   stats: string[];
@@ -42,19 +34,20 @@ class WrapperWithState extends PureComponent<any, State> {
   }
 
   render() {
-    const { placeholder, defaultStat, allowMultiple } = this.props;
+    const { placeholder, allowMultiple, menuPlacement, width } = this.props;
     const { stats } = this.state;
 
     return (
       <StatsPicker
         placeholder={placeholder}
-        defaultStat={defaultStat}
         allowMultiple={allowMultiple}
         stats={stats}
         onChange={(stats: string[]) => {
           action('Picked:')(stats);
           this.setState({ stats });
         }}
+        menuPlacement={menuPlacement}
+        width={width}
       />
     );
   }
@@ -64,19 +57,26 @@ export default {
   title: 'Pickers and Editors/StatsPicker',
   component: StatsPicker,
   decorators: [withCenteredStory],
-};
+  parameters: {
-
+    controls: {
-export const picker = () => {
+      exclude: ['onChange', 'stats', 'defaultStat', 'className'],
-  const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs();
+    },
+    knobs: {
+      disable: true,
+    },
+  },
+} as Meta;
 
+export const Picker: Story<Props> = (args) => {
   return (
     <div>
-      <WrapperWithState
+      <WrapperWithState {...args} />
-        placeholder={placeholder}
-        defaultStat={defaultStat}
-        allowMultiple={allowMultiple}
-        initialStats={initialStats}
-      />
     </div>
   );
 };
+Picker.args = {
+  placeholder: 'placeholder',
+  allowMultiple: false,
+  menuPlacement: 'auto',
+  width: 10,
+};

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

@@ -6,13 +6,14 @@ import { Select } from '../Select/Select';
 
 import { fieldReducers, SelectableValue } from '@grafana/data';
 
-interface Props {
+export interface Props {
   placeholder?: string;
   onChange: (stats: string[]) => void;
   stats: string[];
   allowMultiple?: boolean;
   defaultStat?: string;
   className?: string;
+  width?: number;
   menuPlacement?: 'auto' | 'bottom' | 'top';
 }
 
@@ -62,7 +63,7 @@ export class StatsPicker extends PureComponent<Props> {
   };
 
   render() {
-    const { stats, allowMultiple, defaultStat, placeholder, className, menuPlacement } = this.props;
+    const { stats, allowMultiple, defaultStat, placeholder, className, menuPlacement, width } = this.props;
 
     const select = fieldReducers.selectOptions(stats);
     return (
@@ -71,6 +72,7 @@ export class StatsPicker extends PureComponent<Props> {
         className={className}
         isClearable={!defaultStat}
         isMulti={allowMultiple}
+        width={width}
         isSearchable={true}
         options={select.options}
         placeholder={placeholder}