From 96403236cb7643d9f4bb74e057aec4f3a468987b Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Tue, 9 Aug 2022 14:58:32 +0100 Subject: [PATCH] Chore: Further reduce usage of v1 theme (#53423) --- .../TimeRangePicker/TimePickerTitle.tsx | 15 ++- .../TimeZonePicker/TimeZoneDescription.tsx | 13 +- .../TimeZonePicker/TimeZoneGroup.tsx | 17 ++- .../TimeZonePicker/TimeZoneOffset.tsx | 17 ++- .../TimeZonePicker/TimeZoneTitle.tsx | 13 +- .../src/components/Forms/InlineFieldRow.tsx | 14 +-- .../src/components/Forms/InlineLabel.tsx | 34 +++--- .../components/Forms/InlineSegmentGroup.tsx | 11 +- .../src/components/Forms/Legend.tsx | 17 ++- .../src/components/Graph/GraphContextMenu.tsx | 36 +++--- .../src/components/Icon/Icon.story.tsx | 8 +- .../grafana-ui/src/components/Icon/Icon.tsx | 14 +-- .../src/components/InfoBox/FeatureInfoBox.tsx | 12 +- .../src/components/Layout/Layout.tsx | 111 ++++++++++-------- .../LoadingPlaceholder/LoadingPlaceholder.tsx | 10 +- .../src/components/Logs/LogLabelStats.tsx | 20 ++-- .../src/components/Logs/LogLabelStatsRow.tsx | 16 +-- .../src/components/Logs/LogLabels.test.tsx | 12 +- .../src/components/Logs/LogLabels.tsx | 69 +++++------ .../src/components/Logs/LogRowContext.tsx | 23 ++-- .../Logs/LogRowMessageDetectedFields.tsx | 8 +- .../src/components/Logs/getLogRowStyles.ts | 10 +- .../src/components/PageLayout/PageToolbar.tsx | 7 +- .../components/PanelChrome/ErrorIndicator.tsx | 11 +- .../PanelChrome/LoadingIndicator.tsx | 4 +- .../PanelChrome/PanelChrome.story.tsx | 14 +-- .../src/components/QueryEditor/InputGroup.tsx | 11 +- .../src/components/QueryEditor/Stack.tsx | 11 +- .../src/components/Segment/styles.ts | 8 +- .../components/Select/SelectOptionGroup.tsx | 16 +-- 30 files changed, 291 insertions(+), 291 deletions(-) diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx index 20bf4d120f3..6013ee88bb0 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx @@ -1,25 +1,24 @@ import { css } from '@emotion/css'; import React, { memo, PropsWithChildren } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../../themes'; +import { useStyles2 } from '../../../themes'; -const getStyle = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { text: css` font-size: ${theme.typography.size.md}; - font-weight: ${theme.typography.weight.semibold}; - color: ${theme.colors.formLabel}; + font-weight: ${theme.typography.fontWeightMedium}; + color: ${theme.colors.text.primary}; margin: 0; display: flex; `, }; -}); +}; export const TimePickerTitle = memo>(({ children }) => { - const theme = useTheme(); - const styles = getStyle(theme); + const styles = useStyles2(getStyles); return

{children}

; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx index fbfb016ccdf..c9e4ff67451 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx @@ -1,17 +1,16 @@ import { css } from '@emotion/css'; import React, { PropsWithChildren, useMemo } from 'react'; -import { GrafanaTheme, TimeZoneInfo } from '@grafana/data'; +import { GrafanaTheme2, TimeZoneInfo } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../../themes'; +import { useStyles2 } from '../../../themes'; interface Props { info?: TimeZoneInfo; } export const TimeZoneDescription: React.FC> = ({ info }) => { - const theme = useTheme(); - const styles = getStyles(theme); + const styles = useStyles2(getStyles); const description = useDescription(info); if (!info) { @@ -42,14 +41,14 @@ const useDescription = (info?: TimeZoneInfo): string => { }, [info]); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { description: css` font-weight: normal; font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; white-space: normal; text-overflow: ellipsis; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx index faa416d6afa..0ca10f44f71 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/css'; import React, { PropsWithChildren } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../../themes'; +import { useStyles2 } from '../../../themes'; interface Props { label: string | undefined; @@ -12,9 +12,8 @@ interface Props { const stopPropagation = (event: React.MouseEvent) => event.stopPropagation(); export const TimeZoneGroup: React.FC> = (props) => { - const theme = useTheme(); const { children, label } = props; - const styles = getStyles(theme); + const styles = useStyles2(getStyles); if (!label) { return
{children}
; @@ -30,18 +29,18 @@ export const TimeZoneGroup: React.FC> = (props) => { ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { header: css` padding: 7px 10px; width: 100%; - border-top: 1px solid ${theme.colors.border1}; + border-top: 1px solid ${theme.colors.border.weak}; text-transform: capitalize; `, label: css` font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textWeak}; - font-weight: ${theme.typography.weight.semibold}; + color: ${theme.colors.text.secondary}; + font-weight: ${theme.typography.fontWeightMedium}; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx index 5904f99899c..a6e0722bfce 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx @@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css'; import { isString } from 'lodash'; import React, { PropsWithChildren } from 'react'; -import { GrafanaTheme, TimeZone, dateTimeFormat } from '@grafana/data'; +import { GrafanaTheme2, TimeZone, dateTimeFormat } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../../themes'; +import { useStyles2 } from '../../../themes'; interface Props { timestamp: number; @@ -13,9 +13,8 @@ interface Props { } export const TimeZoneOffset: React.FC> = (props) => { - const theme = useTheme(); const { timestamp, timeZone, className } = props; - const styles = getStyles(theme); + const styles = useStyles2(getStyles); if (!isString(timeZone)) { return null; @@ -40,22 +39,22 @@ export const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string = return `UTC${offset}`; }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { const textBase = css` font-weight: normal; font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; white-space: normal; `; return { offset: css` ${textBase}; - color: ${theme.colors.text}; - background: ${theme.colors.bg2}; + color: ${theme.colors.text.primary}; + background: ${theme.colors.background.secondary}; padding: 2px 5px; border-radius: 2px; margin-left: 4px; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx index 9194e45de76..754cf0ef4db 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx @@ -1,17 +1,16 @@ import { css } from '@emotion/css'; import React, { ReactNode } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../../themes'; +import { useStyles2 } from '../../../themes'; interface Props { title: string | ReactNode; } export const TimeZoneTitle: React.FC = ({ title }) => { - const theme = useTheme(); - const styles = getStyles(theme); + const styles = useStyles2(getStyles); if (!title) { return null; @@ -20,11 +19,11 @@ export const TimeZoneTitle: React.FC = ({ title }) => { return {title}; }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { title: css` - font-weight: ${theme.typography.weight.regular}; + font-weight: ${theme.typography.fontWeightRegular}; text-overflow: ellipsis; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx index f9af56470b2..2e28faef0dc 100644 --- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx @@ -1,16 +1,16 @@ import { css, cx } from '@emotion/css'; -import React, { FC, HTMLProps, ReactNode } from 'react'; +import React, { HTMLProps, ReactNode } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; export interface Props extends Omit, 'css'> { children: ReactNode | ReactNode[]; } -export const InlineFieldRow: FC = ({ children, className, ...htmlProps }) => { - const styles = useStyles(getStyles); +export const InlineFieldRow = ({ children, className, ...htmlProps }: Props) => { + const styles = useStyles2(getStyles); return (
{children} @@ -18,7 +18,7 @@ export const InlineFieldRow: FC = ({ children, className, ...htmlProps }) ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { container: css` label: InlineFieldRow; @@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme) => { flex-direction: row; flex-wrap: wrap; align-content: flex-start; - row-gap: ${theme.spacing.xs}; + row-gap: ${theme.spacing(0.5)}; `, }; }; diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx index 33ffc2b660f..2d75f23fb72 100644 --- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, useCallback } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme } from '../../themes'; +import { useStyles2 } from '../../themes'; import { Icon } from '../Icon/Icon'; import { PopoverContent, Tooltip } from '../Tooltip'; @@ -34,8 +34,10 @@ export const InlineLabel: FunctionComponent = ({ as: Component = 'label', ...rest }) => { - const theme = useTheme(); - const styles = getInlineLabelStyles(theme, transparent, width); + const styles = useStyles2( + useCallback((theme) => getInlineLabelStyles(theme, transparent, width), [transparent, width]) + ); + return ( {children} @@ -48,31 +50,31 @@ export const InlineLabel: FunctionComponent = ({ ); }; -export const getInlineLabelStyles = (theme: GrafanaTheme, transparent = false, width?: number | 'auto') => { +export const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false, width?: number | 'auto') => { return { label: css` display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; - padding: 0 ${theme.spacing.sm}; - font-weight: ${theme.typography.weight.semibold}; + padding: 0 ${theme.spacing(1)}; + font-weight: ${theme.typography.fontWeightMedium}; font-size: ${theme.typography.size.sm}; - background-color: ${transparent ? 'transparent' : theme.colors.bg2}; - height: ${theme.height.md}px; - line-height: ${theme.height.md}px; - margin-right: ${theme.spacing.xs}; - border-radius: ${theme.border.radius.md}; + background-color: ${transparent ? 'transparent' : theme.colors.background.secondary}; + height: ${theme.spacing(theme.components.height.md)}; + line-height: ${theme.spacing(theme.components.height.md)}; + margin-right: ${theme.spacing(0.5)}; + border-radius: ${theme.shape.borderRadius(2)}; border: none; width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'}; - color: ${theme.colors.textHeading}; + color: ${theme.colors.text.primary}; `, icon: css` - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; margin-left: 10px; :hover { - color: ${theme.colors.text}; + color: ${theme.colors.text.primary}; } `, }; diff --git a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx index aff6abc6a55..e1a6f17b1c0 100644 --- a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx @@ -1,9 +1,9 @@ import { cx, css } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme } from '../../themes'; +import { useStyles2 } from '../../themes'; export interface Props { grow?: boolean; @@ -12,8 +12,7 @@ export interface Props { /** @beta */ export const InlineSegmentGroup: FC = ({ children, className, grow, ...htmlProps }) => { - const theme = useTheme(); - const styles = getStyles(theme, grow); + const styles = useStyles2((theme) => getStyles(theme, grow)); return (
@@ -24,7 +23,7 @@ export const InlineSegmentGroup: FC = ({ children, className, grow, ...ht InlineSegmentGroup.displayName = 'InlineSegmentGroup'; -const getStyles = (theme: GrafanaTheme, grow?: boolean) => { +const getStyles = (theme: GrafanaTheme2, grow?: boolean) => { return { container: css` display: flex; @@ -33,7 +32,7 @@ const getStyles = (theme: GrafanaTheme, grow?: boolean) => { text-align: left; position: relative; flex: ${grow ? 1 : 0} 0 auto; - margin-bottom: ${theme.spacing.xs}; + margin-bottom: ${theme.spacing(0.5)}; `, }; }; diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx index 523792e0869..16e97fa613e 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.tsx +++ b/packages/grafana-ui/src/components/Forms/Legend.tsx @@ -1,28 +1,27 @@ import { css, cx } from '@emotion/css'; import React, { ReactNode } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme, stylesFactory } from '../../themes'; +import { useStyles2 } from '../../themes'; export interface LabelProps extends React.HTMLAttributes { children: string | ReactNode; description?: string; } -export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => { +export const getLegendStyles = (theme: GrafanaTheme2) => { return { legend: css` - font-size: ${theme.typography.heading.h3}; - font-weight: ${theme.typography.weight.regular}; - margin: 0 0 ${theme.spacing.md} 0; + font-size: ${theme.typography.h3.fontSize}; + font-weight: ${theme.typography.fontWeightRegular}; + margin: 0 0 ${theme.spacing(2)} 0; `, }; -}); +}; export const Legend: React.FC = ({ children, className, ...legendProps }) => { - const theme = useTheme(); - const styles = getLegendStyles(theme); + const styles = useStyles2(getLegendStyles); return ( diff --git a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx index 4ec9c631470..7bb65f25c96 100644 --- a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx @@ -8,9 +8,10 @@ import { dateTimeFormat, TimeZone, FormattedValue, + GrafanaTheme2, } from '@grafana/data'; -import { useTheme } from '../../themes'; +import { useStyles2 } from '../../themes'; import { ContextMenu, ContextMenuProps } from '../ContextMenu/ContextMenu'; import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay'; import { HorizontalGroup } from '../Layout/Layout'; @@ -113,31 +114,32 @@ export const GraphContextMenuHeader = ({ displayName: string; displayValue: FormattedValue; }) => { - const theme = useTheme(); + const styles = useStyles2(getStyles); return ( -
+
{timestamp}
- - {displayName} - + {displayName}
{displayValue && }
); }; + +function getStyles(theme: GrafanaTheme2) { + return { + wrapper: css` + padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; + font-size: ${theme.typography.size.sm}; + z-index: ${theme.zIndex.tooltip}; + `, + displayName: css` + white-space: nowrap; + padding-left: ${theme.spacing(0.5)}; + `, + }; +} diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index 53ee138b8b9..5e78233b69d 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx @@ -4,7 +4,7 @@ import React, { ChangeEvent, useState } from 'react'; import { Input, Field, Icon } from '@grafana/ui'; -import { useTheme } from '../../themes'; +import { useTheme2 } from '../../themes'; import { getAvailableIcons, IconName } from '../../types'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -25,8 +25,8 @@ const meta: ComponentMeta = { }; const IconWrapper = ({ name }: { name: IconName }) => { - const theme = useTheme(); - const borderColor = theme.colors.border2; + const theme = useTheme2(); + const borderColor = theme.colors.border.medium; return (
{ className={css` padding-top: 16px; word-break: break-all; - font-family: ${theme.typography.fontFamily.monospace}; + font-family: ${theme.typography.fontFamilyMonospace}; font-size: ${theme.typography.size.xs}; `} > diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index bd4a53accbc..ee7d6a9b3dc 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -2,10 +2,9 @@ import { css, cx } from '@emotion/css'; import React from 'react'; import SVG from 'react-inlinesvg'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme } from '../../themes/ThemeContext'; -import { stylesFactory } from '../../themes/stylesFactory'; +import { useStyles2 } from '../../themes/ThemeContext'; import { IconName, IconType, IconSize } from '../../types/icon'; import { cacheInitialized, initIconCache, iconRoot } from './iconBundle'; @@ -18,7 +17,7 @@ export interface IconProps extends React.HTMLAttributes { title?: string; } -const getIconStyles = stylesFactory((theme: GrafanaTheme) => { +const getIconStyles = (theme: GrafanaTheme2) => { return { // line-height: 0; is needed for correct icon alignment in Safari container: css` @@ -32,14 +31,14 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => { fill: currentColor; `, orange: css` - fill: ${theme.palette.orange}; + fill: ${theme.v1.palette.orange}; `, }; -}); +}; export const Icon = React.forwardRef( ({ size = 'md', type = 'default', name, className, style, title = '', ...divElementProps }, ref) => { - const theme = useTheme(); + const styles = useStyles2(getIconStyles); /* Temporary solution to display also font awesome icons */ if (name?.startsWith('fa fa-')) { @@ -54,7 +53,6 @@ export const Icon = React.forwardRef( initIconCache(); } - const styles = getIconStyles(theme); const svgSize = getSvgSize(size); const svgHgt = svgSize; const svgWid = name?.startsWith('gf-bar-align') ? 16 : name?.startsWith('gf-interp') ? 30 : svgSize; diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx index 56ddec29a53..845ed27687f 100644 --- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/css'; import React from 'react'; -import { FeatureState, GrafanaTheme } from '@grafana/data'; +import { FeatureState, GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { Badge, BadgeProps } from '../Badge/Badge'; import { InfoBox, InfoBoxProps } from './InfoBox'; @@ -16,7 +16,7 @@ export interface FeatureInfoBoxProps extends Omit(({ title, featureState, ...otherProps }, ref) => { - const styles = useStyles(getFeatureInfoBoxStyles); + const styles = useStyles2(getFeatureInfoBoxStyles); const titleEl = featureState ? ( <> @@ -34,13 +34,13 @@ export const FeatureInfoBox = React.memo( FeatureInfoBox.displayName = 'FeatureInfoBox'; -const getFeatureInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => { +const getFeatureInfoBoxStyles = (theme: GrafanaTheme2) => { return { badge: css` - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; `, }; -}); +}; interface FeatureBadgeProps { featureState: FeatureState; diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx index 6b2ea79264e..883d413b8cb 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; -import React, { HTMLProps } from 'react'; +import React, { HTMLProps, useCallback } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useTheme } from '../../themes'; +import { useStyles2 } from '../../themes'; enum Orientation { Horizontal, @@ -41,8 +41,13 @@ export const Layout: React.FC = ({ height = '100%', ...rest }) => { - const theme = useTheme(); - const styles = getStyles(theme, orientation, spacing, justify, align, wrap); + const styles = useStyles2( + useCallback( + (theme) => getStyles(theme, orientation, spacing, justify, align, wrap), + [align, justify, orientation, spacing, wrap] + ) + ); + return (
{React.Children.toArray(children) @@ -100,8 +105,8 @@ export const VerticalGroup: React.FC> ); export const Container: React.FC = ({ children, padding, margin, grow, shrink }) => { - const theme = useTheme(); - const styles = getContainerStyles(theme, padding, margin); + const styles = useStyles2(useCallback((theme) => getContainerStyles(theme, padding, margin), [padding, margin])); + return (
= ({ children, padding, margin, ); }; -const getStyles = stylesFactory( - (theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align, wrap) => { - const finalSpacing = spacing !== 'none' ? theme.spacing[spacing] : 0; - // compensate for last row margin when wrapped, horizontal layout - const marginCompensation = - (orientation === Orientation.Horizontal && !wrap) || orientation === Orientation.Vertical - ? 0 - : `-${finalSpacing}`; +const getStyles = ( + theme: GrafanaTheme2, + orientation: Orientation, + spacing: Spacing, + justify: Justify, + align: Align, + wrap: boolean +) => { + const finalSpacing = spacing !== 'none' ? theme.spacing(spacingToNumber[spacing]) : 0; - const label = orientation === Orientation.Vertical ? 'vertical-group' : 'horizontal-group'; + // compensate for last row margin when wrapped, horizontal layout + const marginCompensation = + (orientation === Orientation.Horizontal && !wrap) || orientation === Orientation.Vertical ? 0 : `-${finalSpacing}`; - return { - layout: css` - label: ${label}; - display: flex; - flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'}; - flex-wrap: ${wrap ? 'wrap' : 'nowrap'}; - justify-content: ${justify}; - align-items: ${align}; - height: 100%; - max-width: 100%; - // compensate for last row margin when wrapped, horizontal layout - margin-bottom: ${marginCompensation}; - `, - childWrapper: css` - label: layoutChildrenWrapper; - margin-bottom: ${orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing}; - margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0}; - display: flex; - align-items: ${align}; + const label = orientation === Orientation.Vertical ? 'vertical-group' : 'horizontal-group'; - &:last-child { - margin-bottom: ${orientation === Orientation.Vertical && 0}; - margin-right: ${orientation === Orientation.Horizontal && 0}; - } - `, - }; - } -); + return { + layout: css` + label: ${label}; + display: flex; + flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'}; + flex-wrap: ${wrap ? 'wrap' : 'nowrap'}; + justify-content: ${justify}; + align-items: ${align}; + height: 100%; + max-width: 100%; + // compensate for last row margin when wrapped, horizontal layout + margin-bottom: ${marginCompensation}; + `, + childWrapper: css` + label: layoutChildrenWrapper; + margin-bottom: ${orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing}; + margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0}; + display: flex; + align-items: ${align}; -const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => { - const paddingSize = (padding && padding !== 'none' && theme.spacing[padding]) || 0; - const marginSize = (margin && margin !== 'none' && theme.spacing[margin]) || 0; + &:last-child { + margin-bottom: ${orientation === Orientation.Vertical && 0}; + margin-right: ${orientation === Orientation.Horizontal && 0}; + } + `, + }; +}; + +const spacingToNumber: Record = { + none: 0, + xs: 0.5, + sm: 1, + md: 2, + lg: 3, +}; + +const getContainerStyles = (theme: GrafanaTheme2, padding?: Spacing, margin?: Spacing) => { + const paddingSize = (padding && padding !== 'none' && theme.spacing(spacingToNumber[padding])) || 0; + const marginSize = (margin && margin !== 'none' && theme.spacing(spacingToNumber[margin])) || 0; return { wrapper: css` label: container; @@ -171,4 +188,4 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing padding: ${paddingSize}; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx index 968c1c3039a..8450d68a767 100644 --- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx +++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import React, { HTMLAttributes, SFC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { Spinner } from '../Spinner/Spinner'; /** @@ -17,7 +17,7 @@ export interface LoadingPlaceholderProps extends HTMLAttributes * @public */ export const LoadingPlaceholder: SFC = ({ text, className, ...rest }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
{text} @@ -25,10 +25,10 @@ export const LoadingPlaceholder: SFC = ({ text, classNa ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { container: css` - margin-bottom: ${theme.spacing.xl}; + margin-bottom: ${theme.spacing(4)}; `, }; }; diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx index 609a8065bfd..165f76713af 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx @@ -1,36 +1,36 @@ import { css } from '@emotion/css'; import React, { PureComponent } from 'react'; -import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data'; +import { LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data'; import { stylesFactory } from '../../themes'; -import { withTheme } from '../../themes/index'; -import { Themeable } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; //Components import { LogLabelStatsRow } from './LogLabelStatsRow'; const STATS_ROW_LIMIT = 5; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { logsStats: css` label: logs-stats; background: inherit; - color: ${theme.colors.text}; + color: ${theme.colors.text.primary}; word-break: break-all; width: fit-content; max-width: 100%; `, logsStatsHeader: css` label: logs-stats__header; - border-bottom: 1px solid ${theme.colors.border2}; + border-bottom: 1px solid ${theme.colors.border.medium}; display: flex; `, logsStatsTitle: css` label: logs-stats__title; - font-weight: ${theme.typography.weight.semibold}; - padding-right: ${theme.spacing.d}; + font-weight: ${theme.typography.fontWeightMedium}; + padding-right: ${theme.spacing(2)}; display: inline-block; white-space: nowrap; text-overflow: ellipsis; @@ -47,7 +47,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { }; }); -interface Props extends Themeable { +interface Props extends Themeable2 { stats: LogLabelStatsModel[]; label: string; value: string; @@ -96,5 +96,5 @@ class UnThemedLogLabelStats extends PureComponent { } } -export const LogLabelStats = withTheme(UnThemedLogLabelStats); +export const LogLabelStats = withTheme2(UnThemedLogLabelStats); LogLabelStats.displayName = 'LogLabelStats'; diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx index e18637678de..53344c7979d 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx @@ -1,18 +1,18 @@ import { css, cx } from '@emotion/css'; import React, { FunctionComponent } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles } from '../../themes/ThemeContext'; +import { useStyles2 } from '../../themes/ThemeContext'; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ logsStatsRow: css` label: logs-stats-row; - margin: ${parseInt(theme.spacing.d, 10) / 1.75}px 0; + margin: ${parseInt(theme.spacing(2), 10) / 1.75}px 0; `, logsStatsRowActive: css` label: logs-stats-row--active; - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; position: relative; `, logsStatsRowLabel: css` @@ -41,13 +41,13 @@ const getStyles = (theme: GrafanaTheme) => ({ label: logs-stats-row__bar; height: 4px; overflow: hidden; - background: ${theme.colors.textFaint}; + background: ${theme.colors.text.disabled}; `, logsStatsRowInnerBar: css` label: logs-stats-row__innerbar; height: 4px; overflow: hidden; - background: ${theme.colors.bgBlue1}; + background: ${theme.colors.primary.main}; `, }); @@ -59,7 +59,7 @@ export interface Props { } export const LogLabelStatsRow: FunctionComponent = ({ active, count, proportion, value }) => { - const style = useStyles(getStyles); + const style = useStyles2(getStyles); const percent = `${Math.round(proportion * 100)}%`; const barStyle = { width: percent }; const className = active ? cx([style.logsStatsRow, style.logsStatsRowActive]) : cx([style.logsStatsRow]); diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx index e78be881867..e76459f0b65 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx @@ -1,28 +1,26 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { getTheme } from '../../themes'; - -import { UnThemedLogLabels as LogLabels } from './LogLabels'; +import { LogLabels } from './LogLabels'; describe('', () => { it('renders notice when no labels are found', () => { - render(); + render(); expect(screen.queryByText('(no unique labels)')).toBeInTheDocument(); }); it('renders labels', () => { - render(); + render(); expect(screen.queryByText('bar')).toBeInTheDocument(); expect(screen.queryByText('42')).toBeInTheDocument(); }); it('excludes labels with certain names or labels starting with underscore', () => { - render(); + render(); expect(screen.queryByText('bar')).toBeInTheDocument(); expect(screen.queryByText('42')).not.toBeInTheDocument(); expect(screen.queryByText('13')).not.toBeInTheDocument(); }); it('excludes labels with empty string values', () => { - render(); + render(); expect(screen.queryByText('bar')).toBeInTheDocument(); expect(screen.queryByText('baz')).not.toBeInTheDocument(); }); diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.tsx index aad16e60cbf..2440a85ec90 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabels.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabels.tsx @@ -1,49 +1,19 @@ import { css, cx } from '@emotion/css'; import React, { FunctionComponent } from 'react'; -import { GrafanaTheme, Labels } from '@grafana/data'; +import { GrafanaTheme2, Labels } from '@grafana/data'; -import { stylesFactory } from '../../themes'; -import { withTheme } from '../../themes/ThemeContext'; -import { Themeable } from '../../types/theme'; +import { useStyles2 } from '../../themes/ThemeContext'; // Levels are already encoded in color, filename is a Loki-ism const HIDDEN_LABELS = ['level', 'lvl', 'filename']; -const getStyles = stylesFactory((theme: GrafanaTheme) => { - return { - logsLabels: css` - display: flex; - flex-wrap: wrap; - font-size: ${theme.typography.size.xs}; - `, - logsLabel: css` - label: logs-label; - display: flex; - padding: 0 2px; - background-color: ${theme.colors.bg2}; - border-radius: ${theme.border.radius}; - margin: 1px 4px 0 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - `, - logsLabelValue: css` - label: logs-label__value; - display: inline-block; - max-width: 20em; - text-overflow: ellipsis; - overflow: hidden; - `, - }; -}); - -interface Props extends Themeable { +interface Props { labels: Labels; } -export const UnThemedLogLabels: FunctionComponent = ({ labels, theme }) => { - const styles = getStyles(theme); +export const LogLabels: FunctionComponent = ({ labels }) => { + const styles = useStyles2(getStyles); const displayLabels = Object.keys(labels).filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label)); if (displayLabels.length === 0) { @@ -74,5 +44,30 @@ export const UnThemedLogLabels: FunctionComponent = ({ labels, theme }) = ); }; -export const LogLabels = withTheme(UnThemedLogLabels); -LogLabels.displayName = 'LogLabels'; +const getStyles = (theme: GrafanaTheme2) => { + return { + logsLabels: css` + display: flex; + flex-wrap: wrap; + font-size: ${theme.typography.size.xs}; + `, + logsLabel: css` + label: logs-label; + display: flex; + padding: 0 2px; + background-color: ${theme.colors.background.secondary}; + border-radius: ${theme.shape.borderRadius(1)}; + margin: 1px 4px 0 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + `, + logsLabelValue: css` + label: logs-label__value; + display: inline-block; + max-width: 20em; + text-overflow: ellipsis; + overflow: hidden; + `, + }; +}; diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx index be7217cdeaf..94baecbd2d7 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import React, { useRef, useState, useLayoutEffect, useEffect } from 'react'; -import { GrafanaTheme, DataQueryError, LogRowModel, textUtil } from '@grafana/data'; +import { GrafanaTheme2, DataQueryError, LogRowModel, textUtil } from '@grafana/data'; -import { useStyles, useTheme } from '../../themes/ThemeContext'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Alert } from '../Alert/Alert'; import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; @@ -22,7 +22,7 @@ interface LogRowContextProps { onLoadMoreContext: () => void; } -const getLogRowContextStyles = (theme: GrafanaTheme, wrapLogMessage?: boolean) => { +const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean) => { /** * This is workaround for displaying uncropped context when we have unwrapping log messages. * We are using margins to correctly position context. Because non-wrapped logs have always 1 line of log @@ -53,10 +53,10 @@ const getLogRowContextStyles = (theme: GrafanaTheme, wrapLogMessage?: boolean) = height: 250px; z-index: ${theme.zIndex.dropdown}; overflow: hidden; - background: ${theme.colors.bg1}; - box-shadow: 0 0 10px ${theme.colors.dropdownShadow}; - border: 1px solid ${theme.colors.bg2}; - border-radius: ${theme.border.radius.md}; + background: ${theme.colors.background.primary}; + box-shadow: 0 0 10px ${theme.v1.palette.black}; + border: 1px solid ${theme.colors.background.secondary}; + border-radius: ${theme.shape.borderRadius(2)}; width: 100%; `, header: css` @@ -64,7 +64,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme, wrapLogMessage?: boolean) = padding: 0 10px; display: flex; align-items: center; - background: ${theme.colors.bg2}; + background: ${theme.colors.background.secondary}; `, logs: css` height: 220px; @@ -94,7 +94,7 @@ const LogRowContextGroupHeader: React.FunctionComponent { - const { header } = useStyles(getLogRowContextStyles); + const { header } = useStyles2(getLogRowContextStyles); return (
@@ -132,7 +132,7 @@ export const LogRowContextGroup: React.FunctionComponent { - const { commonStyles, logs } = useStyles(getLogRowContextStyles); + const { commonStyles, logs } = useStyles2(getLogRowContextStyles); const [scrollTop, setScrollTop] = useState(0); const listContainerRef = useRef() as React.RefObject; @@ -204,8 +204,7 @@ export const LogRowContext: React.FunctionComponent = ({ document.removeEventListener('keydown', handleEscKeyDown, false); }; }, [onOutsideClick]); - const theme = useTheme(); - const { afterContext, beforeContext } = getLogRowContextStyles(theme, wrapLogMessage); + const { afterContext, beforeContext } = useStyles2((theme) => getLogRowContextStyles(theme, wrapLogMessage)); return ( diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx index 51e00ebe3b6..c4b2363460e 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx @@ -3,12 +3,12 @@ import React, { PureComponent } from 'react'; import { LogRowModel, Field, LinkModel } from '@grafana/data'; -import { withTheme } from '../../themes/index'; -import { Themeable } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; import { getAllFields } from './logParser'; -export interface Props extends Themeable { +export interface Props extends Themeable2 { row: LogRowModel; showDetectedFields: string[]; wrapLogMessage: boolean; @@ -45,5 +45,5 @@ class UnThemedLogRowMessageDetectedFields extends PureComponent { } } -export const LogRowMessageDetectedFields = withTheme(UnThemedLogRowMessageDetectedFields); +export const LogRowMessageDetectedFields = withTheme2(UnThemedLogRowMessageDetectedFields); LogRowMessageDetectedFields.displayName = 'LogRowMessageDetectedFields'; diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index d335a575b66..6db3b13269d 100644 --- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts +++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import { GrafanaTheme2, LogLevel } from '@grafana/data'; -import { styleMixins, stylesFactory } from '../../themes'; +import { styleMixins } from '../../themes'; -export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: LogLevel) => { +export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => { let logColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.gray2; const hoverBgColor = styleMixins.hoverColor(theme.colors.background.secondary, theme); @@ -77,8 +77,8 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L > td { position: relative; padding-right: ${theme.spacing(1)}; - border-top: ${theme.v1.border.width.sm} solid transparent; - border-bottom: ${theme.v1.border.width.sm} solid transparent; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; height: 100%; } @@ -182,4 +182,4 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L } `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index 34298aebbd6..184efde10f1 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -5,7 +5,6 @@ import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { Link } from '..'; -import { styleMixins } from '../../themes'; import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { IconName } from '../../types'; @@ -173,7 +172,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, pageIcon: css` display: none; - @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} { + ${theme.breakpoints.up('md')} { display: flex; padding-right: ${theme.spacing(1)}; align-items: center; @@ -221,7 +220,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, parentLink: css` display: none; - @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} { + ${theme.breakpoints.up('md')} { display: unset; } `, @@ -230,7 +229,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, leftActionItem: css` display: none; - @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} { + ${theme.breakpoints.up('md')} { align-items: center; display: flex; padding-left: ${spacing(0.5)}; diff --git a/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx index b2ebb0860eb..bdf721f621f 100644 --- a/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx @@ -1,9 +1,8 @@ import { css, cx } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme } from '@grafana/data'; - -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; +import { commonColorsPalette } from '../../themes/default'; import { Icon } from '../Icon/Icon'; import { Tooltip } from '../Tooltip/Tooltip'; @@ -19,7 +18,7 @@ export type ErrorIndicatorProps = { * @internal */ export const ErrorIndicator: React.FC = ({ error, onClick }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); if (!error) { return null; @@ -37,13 +36,13 @@ export const ErrorIndicator: React.FC = ({ error, onClick } ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = () => { return { clickable: css` cursor: pointer; `, icon: css` - color: ${theme.palette.red88}; + color: ${commonColorsPalette.red88}; `, }; }; diff --git a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx index c5999d19f07..a47b08a4a9a 100644 --- a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { Icon } from '../Icon/Icon'; import { Tooltip } from '../Tooltip/Tooltip'; @@ -19,7 +19,7 @@ export type LoadingIndicatorProps = { * @internal */ export const LoadingIndicator: React.FC = ({ onCancel, loading }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); if (!loading) { return null; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx index 9794dd28022..de6a01014ef 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx @@ -3,8 +3,8 @@ import { merge } from 'lodash'; import React, { CSSProperties, useState } from 'react'; import { useInterval } from 'react-use'; -import { GrafanaTheme } from '@grafana/data'; -import { PanelChrome, useTheme, PanelChromeProps } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { PanelChrome, useTheme2, PanelChromeProps } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; @@ -18,7 +18,7 @@ const meta: ComponentMeta = { }, }; -function renderPanel(name: string, overrides: Partial, theme: GrafanaTheme) { +function renderPanel(name: string, overrides: Partial, theme: GrafanaTheme2) { const props: PanelChromeProps = { width: 400, height: 130, @@ -29,7 +29,7 @@ function renderPanel(name: string, overrides: Partial, theme: merge(props, overrides); const contentStyle: CSSProperties = { - background: theme.colors.bg2, + background: theme.colors.background.secondary, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -45,13 +45,13 @@ function renderPanel(name: string, overrides: Partial, theme: } export const Examples = () => { - const theme = useTheme(); + const theme = useTheme2(); const [loading, setLoading] = useState(true); useInterval(() => setLoading(true), 5000); return ( -
+
{renderPanel('Default panel', {}, theme)} @@ -66,7 +66,7 @@ export const Examples = () => { )} -
+
{renderPanel( diff --git a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx b/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx index 0ce250319c2..b90b5b4b0d1 100644 --- a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx +++ b/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx @@ -1,20 +1,17 @@ import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; - -import { stylesFactory, useTheme2 } from '../../themes'; +import { useStyles2 } from '../../themes'; interface InputGroupProps {} export const InputGroup: React.FC = ({ children }) => { - const theme = useTheme2(); - const styles = useStyles(theme); + const styles = useStyles2(getStyles); return
{children}
; }; -const useStyles = stylesFactory((theme: GrafanaTheme2) => ({ +const getStyles = () => ({ root: css({ display: 'flex', @@ -51,4 +48,4 @@ const useStyles = stylesFactory((theme: GrafanaTheme2) => ({ }, }, }), -})); +}); diff --git a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx b/packages/grafana-ui/src/components/QueryEditor/Stack.tsx index 80527115b4a..b5d50499c22 100644 --- a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx +++ b/packages/grafana-ui/src/components/QueryEditor/Stack.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/css'; -import React, { CSSProperties } from 'react'; +import React, { CSSProperties, useCallback } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useTheme2 } from '../../themes'; +import { useStyles2 } from '../../themes'; interface StackProps { direction?: CSSProperties['flexDirection']; @@ -13,13 +13,12 @@ interface StackProps { } export const Stack: React.FC = ({ children, ...props }) => { - const theme = useTheme2(); - const styles = useStyles(theme, props); + const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props])); return
{children}
; }; -const useStyles = stylesFactory((theme: GrafanaTheme2, props: StackProps) => ({ +const getStyles = (theme: GrafanaTheme2, props: StackProps) => ({ root: css({ display: 'flex', flexDirection: props.direction ?? 'row', @@ -27,4 +26,4 @@ const useStyles = stylesFactory((theme: GrafanaTheme2, props: StackProps) => ({ alignItems: props.alignItems, gap: theme.spacing(props.gap ?? 2), }), -})); +}); diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts index 336bce379f6..a3b2c6567a9 100644 --- a/packages/grafana-ui/src/components/Segment/styles.ts +++ b/packages/grafana-ui/src/components/Segment/styles.ts @@ -1,8 +1,10 @@ import { css } from '@emotion/css'; -import { GrafanaTheme2 } from '@grafana/data'; +import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; + +export const getSegmentStyles = (theme: GrafanaTheme | GrafanaTheme2) => { + const palette = 'v1' in theme ? theme.v1.palette : theme.palette; -export const getSegmentStyles = (theme: GrafanaTheme2) => { return { segment: css` cursor: pointer; @@ -10,7 +12,7 @@ export const getSegmentStyles = (theme: GrafanaTheme2) => { `, queryPlaceholder: css` - color: ${theme.v1.palette.gray2}; + color: ${palette.gray2}; `, disabled: css` diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx index 5d7ec5a2f24..5b91d3659c4 100644 --- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx @@ -2,13 +2,13 @@ import { css } from '@emotion/css'; import React, { PureComponent } from 'react'; import { GroupProps } from 'react-select'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, withTheme } from '../../themes'; -import { Themeable } from '../../types'; +import { stylesFactory, withTheme2 } from '../../themes'; +import { Themeable2 } from '../../types'; import { Icon } from '../Icon/Icon'; -interface ExtendedGroupProps extends Omit, 'theme'>, Themeable { +interface ExtendedGroupProps extends Omit, 'theme'>, Themeable2 { data: { label: string; expanded: boolean; @@ -20,7 +20,7 @@ interface State { expanded: boolean; } -const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => { +const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme2) => { return { header: css` display: flex; @@ -30,10 +30,10 @@ const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => { cursor: pointer; padding: 7px 10px; width: 100%; - border-bottom: 1px solid ${theme.colors.bg2}; + border-bottom: 1px solid ${theme.colors.background.secondary}; &:hover { - color: ${theme.colors.textStrong}; + color: ${theme.colors.text.maxContrast}; } `, label: css` @@ -91,4 +91,4 @@ class UnthemedSelectOptionGroup extends PureComponent } } -export const SelectOptionGroup = withTheme(UnthemedSelectOptionGroup); +export const SelectOptionGroup = withTheme2(UnthemedSelectOptionGroup);