diff --git a/packages/grafana-ui/src/components/Select/ValueContainer.tsx b/packages/grafana-ui/src/components/Select/ValueContainer.tsx index 88e6f7713e9..b7c6f957fcb 100644 --- a/packages/grafana-ui/src/components/Select/ValueContainer.tsx +++ b/packages/grafana-ui/src/components/Select/ValueContainer.tsx @@ -1,13 +1,13 @@ import { cx } from '@emotion/css'; import React, { Component, ReactNode } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { withTheme2 } from '../../themes/ThemeContext'; import { getSelectStyles } from './getSelectStyles'; -class UnthemedValueContainer extends Component { +class UnthemedValueContainer extends Component { render() { const { children } = this.props; const { selectProps } = this.props; diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx index a733ec1176e..44e24336e12 100644 --- a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx +++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx @@ -53,7 +53,7 @@ export class Typeahead extends PureComponent { const allItems = flattenGroupItems(this.props.groupedItems); const longestLabel = calculateLongestLabel(allItems); - const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context.v1, allItems, longestLabel); + const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel); this.setState({ listWidth, listHeight, @@ -87,7 +87,7 @@ export class Typeahead extends PureComponent { if (isEqual(prevProps.groupedItems, this.props.groupedItems) === false) { const allItems = flattenGroupItems(this.props.groupedItems); const longestLabel = calculateLongestLabel(allItems); - const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context.v1, allItems, longestLabel); + const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel); this.setState({ listWidth, listHeight, itemHeight, allItems, typeaheadIndex: null }); } }; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx index 505cfade34d..230027dc11e 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx @@ -1,9 +1,9 @@ import { Story, Meta } from '@storybook/react'; import React, { FC, useEffect, useState } from 'react'; -import { DisplayValue, GrafanaTheme } from '@grafana/data'; +import { DisplayValue, GrafanaTheme2 } from '@grafana/data'; import { LegendDisplayMode, LegendPlacement } from '@grafana/schema'; -import { useTheme, VizLegend } from '@grafana/ui'; +import { useTheme2, VizLegend } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -43,7 +43,7 @@ interface LegendStoryDemoProps { } const LegendStoryDemo: FC = ({ displayMode, seriesCount, name, placement, stats }) => { - const theme = useTheme(); + const theme = useTheme2(); const [items, setItems] = useState(generateLegendItems(seriesCount, theme, stats)); useEffect(() => { @@ -149,7 +149,7 @@ export const WithValues: Story = ({ containerWidth, seriesCount }) => { function generateLegendItems( numberOfSeries: number, - theme: GrafanaTheme, + theme: GrafanaTheme2, statsToDisplay?: DisplayValue[] ): VizLegendItem[] { const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); diff --git a/packages/grafana-ui/src/utils/typeahead.ts b/packages/grafana-ui/src/utils/typeahead.ts index 856b4f8d305..f0556efebbb 100644 --- a/packages/grafana-ui/src/utils/typeahead.ts +++ b/packages/grafana-ui/src/utils/typeahead.ts @@ -1,6 +1,6 @@ import { default as calculateSize } from 'calculate-size'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { CompletionItemGroup, CompletionItem, CompletionItemKind } from '../types/completion'; @@ -23,10 +23,10 @@ export const calculateLongestLabel = (allItems: CompletionItem[]): string => { }, ''); }; -export const calculateListSizes = (theme: GrafanaTheme, allItems: CompletionItem[], longestLabel: string) => { +export const calculateListSizes = (theme: GrafanaTheme2, allItems: CompletionItem[], longestLabel: string) => { const size = calculateSize(longestLabel, { - font: theme.typography.fontFamily.monospace, - fontSize: theme.typography.size.sm, + font: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.bodySmall.fontSize, fontWeight: 'normal', }); @@ -41,15 +41,15 @@ export const calculateListSizes = (theme: GrafanaTheme, allItems: CompletionItem }; }; -export const calculateItemHeight = (longestLabelHeight: number, theme: GrafanaTheme) => { - const horizontalPadding = parseInt(theme.spacing.sm, 10) * 2; +export const calculateItemHeight = (longestLabelHeight: number, theme: GrafanaTheme2) => { + const horizontalPadding = theme.spacing.gridSize * 2; const itemHeight = longestLabelHeight + horizontalPadding; return itemHeight; }; -export const calculateListWidth = (longestLabelWidth: number, theme: GrafanaTheme) => { - const verticalPadding = parseInt(theme.spacing.sm, 10) + parseInt(theme.spacing.md, 10); +export const calculateListWidth = (longestLabelWidth: number, theme: GrafanaTheme2) => { + const verticalPadding = theme.spacing.gridSize * 3; const maxWidth = 800; const listWidth = Math.min(Math.max(longestLabelWidth + verticalPadding, 200), maxWidth); diff --git a/public/app/core/components/OptionsUI/strings.tsx b/public/app/core/components/OptionsUI/strings.tsx index 88812a3ca77..4fd2aa2da81 100644 --- a/public/app/core/components/OptionsUI/strings.tsx +++ b/public/app/core/components/OptionsUI/strings.tsx @@ -1,8 +1,9 @@ import { css } from '@emotion/css'; import React from 'react'; -import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme } from '@grafana/data'; -import { stylesFactory, getTheme, Button, Icon, Input } from '@grafana/ui'; +import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme2 } from '@grafana/data'; +import { config } from '@grafana/runtime'; +import { stylesFactory, Button, Icon, Input } from '@grafana/ui'; type Props = FieldConfigEditorProps; interface State { @@ -53,7 +54,7 @@ export class StringArrayEditor extends React.PureComponent { render() { const { value, item } = this.props; const { showAdd } = this.state; - const styles = getStyles(getTheme()); + const styles = getStyles(config.theme2); const placeholder = item.settings?.placeholder || 'Add text'; return (
@@ -90,16 +91,16 @@ export class StringArrayEditor extends React.PureComponent { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { textInput: css` margin-bottom: 5px; &:hover { - border: 1px solid ${theme.colors.formInputBorderHover}; + border: 1px solid ${theme.components.input.borderHover}; } `, trashIcon: css` - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; cursor: pointer; &:hover { diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx index 85993bd6450..774f1bb4506 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx @@ -2,15 +2,15 @@ import { css, cx } from '@emotion/css'; import React, { useCallback } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; -import { GrafanaTheme } from '@grafana/data'; -import { Button, Field, Input, InputControl, Label, TextArea, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Button, Field, Input, InputControl, Label, TextArea, useStyles2 } from '@grafana/ui'; import { RuleFormValues } from '../../types/rule-form'; import { AnnotationKeyInput } from './AnnotationKeyInput'; const AnnotationsField = () => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { control, register, @@ -97,7 +97,7 @@ const AnnotationsField = () => { ); }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ annotationValueInput: css` width: 426px; `, @@ -114,7 +114,7 @@ const getStyles = (theme: GrafanaTheme) => ({ flex-direction: column; `, field: css` - margin-bottom: ${theme.spacing.xs}; + margin-bottom: ${theme.spacing(0.5)}; `, flexRow: css` display: flex; @@ -122,7 +122,7 @@ const getStyles = (theme: GrafanaTheme) => ({ justify-content: flex-start; `, flexRowItemMargin: css` - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, }); diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx index 406811583c7..fbe226a9c6c 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx @@ -2,8 +2,8 @@ import { css } from '@emotion/css'; import React from 'react'; import { useFormContext } from 'react-hook-form'; -import { GrafanaTheme } from '@grafana/data'; -import { Field, Input, InputControl, Select, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui'; import { RuleFormType, RuleFormValues } from '../../types/rule-form'; import { timeOptions } from '../../utils/time'; @@ -12,7 +12,7 @@ import { PreviewRule } from './PreviewRule'; import { RuleEditorSection } from './RuleEditorSection'; export const CloudEvaluationBehavior = () => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { register, control, @@ -57,7 +57,7 @@ export const CloudEvaluationBehavior = () => { ); }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ inlineField: css` margin-bottom: 0; `, @@ -68,6 +68,6 @@ const getStyles = (theme: GrafanaTheme) => ({ align-items: flex-start; `, timeUnit: css` - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, }); diff --git a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx index 7d4d96d4943..6d2bad89447 100644 --- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx @@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css'; import React, { FC } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; -import { GrafanaTheme } from '@grafana/data'; -import { Button, Field, Input, InlineLabel, Label, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Button, Field, Input, InlineLabel, Label, useStyles2 } from '@grafana/ui'; import { RuleFormValues } from '../../types/rule-form'; @@ -12,7 +12,7 @@ interface Props { } const LabelsField: FC = ({ className }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { register, control, @@ -94,10 +94,10 @@ const LabelsField: FC = ({ className }) => { ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { wrapper: css` - margin-bottom: ${theme.spacing.xl}; + margin-bottom: ${theme.spacing(4)}; `, flexColumn: css` display: flex; @@ -109,11 +109,11 @@ const getStyles = (theme: GrafanaTheme) => { justify-content: flex-start; & + button { - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; } `, deleteLabelButton: css` - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; align-self: flex-start; `, addLabelButton: css` @@ -127,13 +127,13 @@ const getStyles = (theme: GrafanaTheme) => { align-self: flex-start; width: 28px; justify-content: center; - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, labelInput: css` width: 175px; - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; & + & { - margin-left: ${theme.spacing.sm}; + margin-left: ${theme.spacing(1)}; } `, }; diff --git a/public/app/features/alerting/unified/components/rules/ActionButton.tsx b/public/app/features/alerting/unified/components/rules/ActionButton.tsx index d1650a92e25..fafa85c2ecf 100644 --- a/public/app/features/alerting/unified/components/rules/ActionButton.tsx +++ b/public/app/features/alerting/unified/components/rules/ActionButton.tsx @@ -1,17 +1,20 @@ import { css, cx } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { Button, ButtonProps } from '@grafana/ui/src/components/Button'; type Props = Omit; -export const ActionButton: FC = ({ className, ...restProps }) => ( -