Grafana UI: Make FileUpload button size customizable (#26013)

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])}
     />
   );

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;

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);
+}