From 597c0990508607e06c16a88240f563591565cdb5 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 15 Jun 2021 15:37:36 +0100
Subject: [PATCH] FileUpload: refactor story from knobs to control (#35760)

---
 .../FileUpload/FileUpload.story.tsx           | 24 ++++++++++++++-----
 .../grafana-ui/src/utils/storybook/useSize.ts |  7 ------
 2 files changed, 18 insertions(+), 13 deletions(-)
 delete mode 100644 packages/grafana-ui/src/utils/storybook/useSize.ts

diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
index 205c469c71c..ea5a4b975f5 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { FileUpload } from '@grafana/ui';
 import mdx from './FileUpload.mdx';
-import { useSize } from '../../utils/storybook/useSize';
-import { ComponentSize } from '../../types/size';
+import { Meta, Story } from '@storybook/react';
 
 export default {
   title: 'Forms/FileUpload',
@@ -13,15 +12,28 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['className', 'onFileUpload'],
+    },
   },
-};
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+  },
+} as Meta;
 
-export const Single = () => {
-  const size = useSize();
+export const Basic: Story = (args) => {
   return (
     <FileUpload
-      size={size as ComponentSize}
+      size={args.size}
       onFileUpload={({ currentTarget }) => console.log('file', currentTarget?.files && currentTarget.files[0])}
     />
   );
 };
+Basic.args = {
+  size: 'md',
+};
diff --git a/packages/grafana-ui/src/utils/storybook/useSize.ts b/packages/grafana-ui/src/utils/storybook/useSize.ts
deleted file mode 100644
index d7a5d4e8064..00000000000
--- a/packages/grafana-ui/src/utils/storybook/useSize.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { select } from '@storybook/addon-knobs';
-import { ComponentSize } from '../../types/size';
-
-export function useSize(size: ComponentSize = 'md') {
-  const sizes = ['xs', 'sm', 'md', 'lg'];
-  return select('Size', sizes, size);
-}