From 88270a2bf8bcdfd3d539b34a5ee41249c6fd694a Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 2 Jul 2020 14:17:42 +0300
Subject: [PATCH] Grafana UI: Make FileUpload button size customizable (#26013)

(cherry picked from commit c3d4e69a3229906f5c6d028a7ee48152590d1c1b)
---
 .../components/FileUpload/FileUpload.story.tsx   |  4 ++++
 .../src/components/FileUpload/FileUpload.tsx     | 16 ++++++++++++----
 .../grafana-ui/src/utils/storybook/useSize.ts    |  7 +++++++
 3 files changed, 23 insertions(+), 4 deletions(-)
 create 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 d3e44096404..398295d3e43 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { FileUpload } from './FileUpload';
 import mdx from './FileUpload.mdx';
+import { useSize } from '../../utils/storybook/useSize';
+import { ComponentSize } from '../../types/size';
 
 export default {
   title: 'Forms/FileUpload',
@@ -15,8 +17,10 @@ export default {
 };
 
 export const single = () => {
+  const size = useSize();
   return (
     <FileUpload
+      size={size as ComponentSize}
       onFileUpload={({ currentTarget }) => console.log('file', currentTarget?.files && currentTarget.files[0])}
     />
   );
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index 776fdec5f45..5525001112d 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
@@ -3,12 +3,14 @@ import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 import { getFormStyles, Icon } from '../index';
 import { stylesFactory, useTheme } from '../../themes';
+import { ComponentSize } from '../../types/size';
 
 export interface Props {
   onFileUpload: (event: FormEvent<HTMLInputElement>) => void;
   /** Accepted file extensions */
   accept?: string;
   className?: string;
+  size?: ComponentSize;
 }
 
 function trimFileName(fileName: string) {
@@ -24,9 +26,15 @@ function trimFileName(fileName: string) {
   return `${file.substring(0, nameLength)}...${extension}`;
 }
 
-export const FileUpload: FC<Props> = ({ onFileUpload, className, children = 'Upload file', accept = '*' }) => {
+export const FileUpload: FC<Props> = ({
+  onFileUpload,
+  className,
+  children = 'Upload file',
+  accept = '*',
+  size = 'md',
+}) => {
   const theme = useTheme();
-  const style = getStyles(theme);
+  const style = getStyles(theme, size);
   const [fileName, setFileName] = useState('');
 
   const onChange = useCallback((event: FormEvent<HTMLInputElement>) => {
@@ -60,8 +68,8 @@ export const FileUpload: FC<Props> = ({ onFileUpload, className, children = 'Upl
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const buttonFormStyle = getFormStyles(theme, { variant: 'primary', invalid: false, size: 'md' }).button.button;
+const getStyles = stylesFactory((theme: GrafanaTheme, size: ComponentSize) => {
+  const buttonFormStyle = getFormStyles(theme, { variant: 'primary', invalid: false, size }).button.button;
   return {
     fileUpload: css`
       display: none;
diff --git a/packages/grafana-ui/src/utils/storybook/useSize.ts b/packages/grafana-ui/src/utils/storybook/useSize.ts
new file mode 100644
index 00000000000..d7a5d4e8064
--- /dev/null
+++ b/packages/grafana-ui/src/utils/storybook/useSize.ts
@@ -0,0 +1,7 @@
+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);
+}