From 65d97edb3b08782deb1077df88e5f5a83a167ad2 Mon Sep 17 00:00:00 2001 From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Date: Wed, 25 Mar 2020 13:10:37 +0100 Subject: [PATCH] Create ComponentSize type and replace ButtonSize with it (#23059) --- packages/grafana-ui/src/components/Button/Button.tsx | 5 +++-- packages/grafana-ui/src/components/Button/ButtonContent.tsx | 4 ++-- packages/grafana-ui/src/components/Button/styles.ts | 5 +++-- packages/grafana-ui/src/components/Button/types.ts | 5 ++--- .../src/components/ConfirmButton/ConfirmButton.tsx | 5 +++-- .../grafana-ui/src/components/ConfirmButton/DeleteButton.tsx | 4 ++-- packages/grafana-ui/src/components/Forms/Button.story.tsx | 4 ++-- packages/grafana-ui/src/components/Forms/Button.tsx | 5 +++-- .../grafana-ui/src/components/Forms/Select/ButtonSelect.tsx | 4 ++-- packages/grafana-ui/src/components/Forms/commonStyles.ts | 4 ++-- packages/grafana-ui/src/components/Forms/getFormStyles.ts | 4 ++-- packages/grafana-ui/src/types/size.ts | 1 + 12 files changed, 27 insertions(+), 23 deletions(-) create mode 100644 packages/grafana-ui/src/types/size.ts diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index a998c521008..009f67819b2 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/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. diff --git a/packages/grafana-ui/src/components/Button/ButtonContent.tsx b/packages/grafana-ui/src/components/Button/ButtonContent.tsx index d2e3d4e9f27..19c540aa66d 100644 --- a/packages/grafana-ui/src/components/Button/ButtonContent.tsx +++ b/packages/grafana-ui/src/components/Button/ButtonContent.tsx @@ -1,8 +1,8 @@ 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) { diff --git a/packages/grafana-ui/src/components/Button/styles.ts b/packages/grafana-ui/src/components/Button/styles.ts index 7b4d2073aec..24e9bcb677e 100644 --- a/packages/grafana-ui/src/components/Button/styles.ts +++ b/packages/grafana-ui/src/components/Button/styles.ts @@ -1,7 +1,8 @@ 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 { diff --git a/packages/grafana-ui/src/components/Button/types.ts b/packages/grafana-ui/src/components/Button/types.ts index a6f6f6ba865..71a7e0e93f9 100644 --- a/packages/grafana-ui/src/components/Button/types.ts +++ b/packages/grafana-ui/src/components/Button/types.ts @@ -1,12 +1,11 @@ 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; } diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index 04aefac91b9..a22702e54e2 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx index 2e0fe5b02ff..a8957838ec4 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx @@ -1,10 +1,10 @@ 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; } diff --git a/packages/grafana-ui/src/components/Forms/Button.story.tsx b/packages/grafana-ui/src/components/Forms/Button.story.tsx index e2343c1c281..8d76538aaad 100644 --- a/packages/grafana-ui/src/components/Forms/Button.story.tsx +++ b/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 ( - ); diff --git a/packages/grafana-ui/src/components/Forms/Button.tsx b/packages/grafana-ui/src/components/Forms/Button.tsx index 592284ce5a7..41253830850 100644 --- a/packages/grafana-ui/src/components/Forms/Button.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx index bf2ae67c177..a19cc3c1e4e 100644 --- a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx +++ b/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 extends Omit, 'renderControl' | 'size' | 'prefix'> { icon?: IconType; variant?: ButtonVariant; - size?: ButtonSize; + size?: ComponentSize; } interface SelectButtonProps extends Omit { diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index 1f061c2188f..806a4decb13 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -1,6 +1,6 @@ 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 { diff --git a/packages/grafana-ui/src/components/Forms/getFormStyles.ts b/packages/grafana-ui/src/components/Forms/getFormStyles.ts index b52956ea3c3..bf623427db0 100644 --- a/packages/grafana-ui/src/components/Forms/getFormStyles.ts +++ b/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), diff --git a/packages/grafana-ui/src/types/size.ts b/packages/grafana-ui/src/types/size.ts new file mode 100644 index 00000000000..2f98fe61fdd --- /dev/null +++ b/packages/grafana-ui/src/types/size.ts @@ -0,0 +1 @@ +export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';