Storybook: Add controls to `UnitPicker` (#54694)

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

@@ -1,10 +1,10 @@
+import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { UnitPicker } from '@grafana/ui';
-
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
+import { UnitPicker, UnitPickerProps } from './UnitPicker';
 import mdx from './UnitPicker.mdx';
 
 const meta: ComponentMeta<typeof UnitPicker> = {
@@ -12,10 +12,18 @@ const meta: ComponentMeta<typeof UnitPicker> = {
   component: UnitPicker,
   decorators: [withCenteredStory],
   parameters: {
+    controls: {
+      exclude: ['onChange', 'value'],
+    },
     docs: mdx,
   },
 };
 
-export const simple: ComponentStory<typeof UnitPicker> = () => <UnitPicker onChange={(val) => console.log(val)} />;
+export const Basic: ComponentStory<typeof UnitPicker> = (args: UnitPickerProps) => <UnitPicker {...args} />;
+
+Basic.args = {
+  onChange: action('onChange fired'),
+  width: 30,
+};
 
 export default meta;

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

@@ -4,7 +4,7 @@ import { getValueFormats, SelectableValue } from '@grafana/data';
 
 import { Cascader, CascaderOption } from '../Cascader/Cascader';
 
-interface Props {
+export interface UnitPickerProps {
   onChange: (item?: string) => void;
   value?: string;
   width?: number;
@@ -14,7 +14,7 @@ function formatCreateLabel(input: string) {
   return `Custom unit: ${input}`;
 }
 
-export class UnitPicker extends PureComponent<Props> {
+export class UnitPicker extends PureComponent<UnitPickerProps> {
   onChange = (value: SelectableValue<string>) => {
     this.props.onChange(value.value);
   };