From 8fb0d3421bc677e07fdd774ba6859918af61b8d7 Mon Sep 17 00:00:00 2001
From: Tima Gixe <60817786+timagixe@users.noreply.github.com>
Date: Thu, 8 Sep 2022 15:16:27 +0300
Subject: [PATCH] Storybook: Add controls to `UnitPicker` (#54694)

---
 .../src/components/UnitPicker/UnitPicker.story.tsx | 14 +++++++++++---
 .../src/components/UnitPicker/UnitPicker.tsx       |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx
index 856dde0a927..be4e6cdd401 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index 570b4e9de5f..1718ae5b128 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/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);
   };