Create ComponentSize type and replace ButtonSize with it (#23059)

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

@@ -2,11 +2,12 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'r
 import { ThemeContext } from '../../themes';
 import { getButtonStyles } from './styles';
 import { ButtonContent } from './ButtonContent';
-import { ButtonSize, ButtonStyles, ButtonVariant } from './types';
+import { ComponentSize } from '../../types/size';
+import { ButtonStyles, ButtonVariant } from './types';
 import { cx } from 'emotion';
 
 type CommonProps = {
-  size?: ButtonSize;
+  size?: ComponentSize;
   variant?: ButtonVariant;
   /**
    * icon prop is a temporary solution. It accepts legacy icon class names for the icon to be rendered.

packages/grafana-ui/src/components/Button/ButtonContent.tsx

 import React from 'react';
 import { css } from 'emotion';
 import { stylesFactory, useTheme } from '../../themes';
+import { ComponentSize } from '../../types/size';
 import { GrafanaTheme } from '@grafana/data';
-import { ButtonSize } from './types';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   content: css`
@@ -26,7 +26,7 @@ type Props = {
   icon?: string;
   className?: string;
   children: React.ReactNode;
-  size?: ButtonSize;
+  size?: ComponentSize;
 };
 
 export function ButtonContent(props: Props) {

packages/grafana-ui/src/components/Button/styles.ts

 import tinycolor from 'tinycolor2';
 import { css } from 'emotion';
 import { selectThemeVariant, stylesFactory } from '../../themes';
-import { StyleDeps, ButtonSize } from './types';
+import { ComponentSize } from '../../types/size';
+import { StyleDeps } from './types';
 import { GrafanaTheme } from '@grafana/data';
 
 const buttonVariantStyles = (
@@ -116,7 +117,7 @@ type ButtonMeasures = {
   fontWeight: number;
 };
 
-const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: boolean): ButtonMeasures => {
+const calculateMeasures = (theme: GrafanaTheme, size: ComponentSize, textAndIcon: boolean): ButtonMeasures => {
   switch (size) {
     case 'sm': {
       return {

packages/grafana-ui/src/components/Button/types.ts

 import { GrafanaTheme } from '@grafana/data';
+import { ComponentSize } from '../../types/size';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'inverse' | 'transparent' | 'destructive' | 'link';
 
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
 export interface StyleDeps {
   theme: GrafanaTheme;
-  size: ButtonSize;
+  size: ComponentSize;
   variant: ButtonVariant;
   textAndIcon?: boolean;
 }

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

@@ -3,9 +3,10 @@ import { cx, css } from 'emotion';
 import { stylesFactory, withTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { Themeable } from '../../types';
+import { ComponentSize } from '../../types/size';
 import { Button } from '../Button/Button';
 import Forms from '../Forms';
-import { ButtonVariant, ButtonSize } from '../Button/types';
+import { ButtonVariant } from '../Button/types';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
@@ -55,7 +56,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
 interface Props extends Themeable {
   className?: string;
-  size?: ButtonSize;
+  size?: ComponentSize;
   confirmText?: string;
   disabled?: boolean;
   confirmVariant?: ButtonVariant;

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx

 import React, { FC } from 'react';
 import { ConfirmButton } from './ConfirmButton';
 import { Button } from '../Button/Button';
-import { ButtonSize } from '../Button/types';
+import { ComponentSize } from '../../types/size';
 
 interface Props {
-  size?: ButtonSize;
+  size?: ComponentSize;
   disabled?: boolean;
   onConfirm(): void;
 }

packages/grafana-ui/src/components/Forms/Button.story.tsx

@@ -3,7 +3,7 @@ import { select, text } from '@storybook/addon-knobs';
 import { Button, ButtonVariant } from './Button';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { getIconKnob } from '../../utils/storybook/knobs';
-import { ButtonSize } from '../Button/types';
+import { ComponentSize } from '../../types/size';
 import mdx from './Button.mdx';
 
 export default {
@@ -28,7 +28,7 @@ export const simple = () => {
   const icon = getIconKnob();
 
   return (
-    <Button variant={variant as ButtonVariant} size={size as ButtonSize} icon={icon && `fa fa-${icon}`}>
+    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon && `fa fa-${icon}`}>
       {buttonText}
     </Button>
   );

packages/grafana-ui/src/components/Forms/Button.tsx

@@ -4,7 +4,8 @@ import tinycolor from 'tinycolor2';
 import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
 import { Button as DefaultButton, LinkButton as DefaultLinkButton } from '../Button/Button';
 import { getFocusStyle, getPropertiesForButtonSize } from './commonStyles';
-import { ButtonSize, StyleDeps } from '../Button/types';
+import { ComponentSize } from '../../types/size';
+import { StyleDeps } from '../Button/types';
 import { GrafanaTheme } from '@grafana/data';
 
 const buttonVariantStyles = (from: string, to: string, textColor: string) => css`
@@ -130,7 +131,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
 
 // These also needs to be different because the ButtonVariant is different
 type CommonProps = {
-  size?: ButtonSize;
+  size?: ComponentSize;
   variant?: ButtonVariant;
   icon?: string;
   className?: string;

packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx

@@ -3,7 +3,7 @@ import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 
 import { Button, ButtonVariant, ButtonProps } from '../Button';
-import { ButtonSize } from '../../Button/types';
+import { ComponentSize } from '../../../types/size';
 import { SelectCommonProps, CustomControlProps } from './types';
 import { SelectBase } from './SelectBase';
 import { stylesFactory, useTheme } from '../../../themes';
@@ -13,7 +13,7 @@ import { IconType } from '../../Icon/types';
 interface ButtonSelectProps<T> extends Omit<SelectCommonProps<T>, 'renderControl' | 'size' | 'prefix'> {
   icon?: IconType;
   variant?: ButtonVariant;
-  size?: ButtonSize;
+  size?: ComponentSize;
 }
 
 interface SelectButtonProps extends Omit<ButtonProps, 'icon'> {

packages/grafana-ui/src/components/Forms/commonStyles.ts

 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { ButtonSize } from '../Button/types';
+import { ComponentSize } from '../../types/size';
 
 export const getFocusCss = (theme: GrafanaTheme) => `
   outline: 2px dotted transparent;
@@ -90,7 +90,7 @@ export const inputSizesPixels = (size: string) => {
   }
 };
 
-export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ButtonSize) => {
+export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ComponentSize) => {
   switch (size) {
     case 'sm':
       return {

packages/grafana-ui/src/components/Forms/getFormStyles.ts

@@ -4,13 +4,13 @@ import { getLabelStyles } from './Label';
 import { getLegendStyles } from './Legend';
 import { getFieldValidationMessageStyles } from './FieldValidationMessage';
 import { getButtonStyles, ButtonVariant } from './Button';
-import { ButtonSize } from '../Button/types';
+import { ComponentSize } from '../../types/size';
 import { getInputStyles } from './Input/Input';
 import { getSwitchStyles } from './Switch';
 import { getCheckboxStyles } from './Checkbox';
 
 export const getFormStyles = stylesFactory(
-  (theme: GrafanaTheme, options: { variant: ButtonVariant; size: ButtonSize; invalid: boolean }) => {
+  (theme: GrafanaTheme, options: { variant: ButtonVariant; size: ComponentSize; invalid: boolean }) => {
     return {
       label: getLabelStyles(theme),
       legend: getLegendStyles(theme),

packages/grafana-ui/src/types/size.ts

+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';