IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrate usage of v1 theme to v2 (#58154)

Browse Source
This commit is contained in:
kay delaney
2022-11-03 18:15:55 +00:00
committed by GitHub
parent c1b10e4f0c
commit a8c181bf6a
42 changed files with 390 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
public/app/features/query/components/QueryEditorRowHeader.tsx
View File

@@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { ReactNode, useState } from 'react';
import { DataQuery, DataSourceInstanceSettings, GrafanaTheme } from '@grafana/data';
import { DataQuery, DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { DataSourcePicker } from '@grafana/runtime';
import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui';
import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui';
export interface Props<TQuery extends DataQuery = DataQuery> {
query: TQuery;
@@ -22,7 +22,7 @@ export interface Props<TQuery extends DataQuery = DataQuery> {
export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQuery>) => {
const { query, queries, onClick, onChange, collapsedText, renderExtras, disabled } = props;
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const [isEditing, setIsEditing] = useState<boolean>(false);
const [validationError, setValidationError] = useState<string | null>(null);
@@ -146,31 +146,31 @@ const renderDataSource = <TQuery extends DataQuery>(
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css`
label: Wrapper;
display: flex;
align-items: center;
margin-left: ${theme.spacing.xs};
margin-left: ${theme.spacing(0.5)};
`,
queryNameWrapper: css`
display: flex;
cursor: pointer;
border: 1px solid transparent;
border-radius: ${theme.border.radius.md};
border-radius: ${theme.shape.borderRadius(2)};
align-items: center;
padding: 0 0 0 ${theme.spacing.xs};
padding: 0 0 0 ${theme.spacing(0.5)};
margin: 0;
background: transparent;
&:hover {
background: ${theme.colors.bg3};
border: 1px dashed ${theme.colors.border3};
background: ${theme.colors.action.hover};
border: 1px dashed ${theme.colors.border.strong};
}
&:focus {
border: 2px solid ${theme.colors.formInputBorderActive};
border: 2px solid ${theme.colors.primary.border};
}
&:hover,
@@ -181,15 +181,15 @@ const getStyles = (theme: GrafanaTheme) => {
}
`,
queryName: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.textBlue};
font-weight: ${theme.typography.fontWeightMedium};
color: ${theme.colors.primary.text};
cursor: pointer;
overflow: hidden;
margin-left: ${theme.spacing.xs};
margin-left: ${theme.spacing(0.5)};
`,
queryEditIcon: cx(
css`
margin-left: ${theme.spacing.md};
margin-left: ${theme.spacing(2)};
visibility: hidden;
`,
'query-name-edit-icon'
@@ -199,10 +199,10 @@ const getStyles = (theme: GrafanaTheme) => {
margin: -4px 0;
`,
collapsedText: css`
font-weight: ${theme.typography.weight.regular};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textWeak};
padding-left: ${theme.spacing.sm};
font-weight: ${theme.typography.fontWeightRegular};
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
padding-left: ${theme.spacing(1)};
align-items: center;
overflow: hidden;
font-style: italic;
@@ -210,9 +210,9 @@ const getStyles = (theme: GrafanaTheme) => {
text-overflow: ellipsis;
`,
contextInfo: css`
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
font-style: italic;
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
padding-left: 10px;
`,
itemWrapper: css`