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 more usage of v1 themes to v2 (#57680)

Browse Source 
* Chore: Migrate more usage of v1 themes to v2

* Implement suggested changes
This commit is contained in:
kay delaney 2022-11-02 10:25:08 +00:00 committed by GitHub
parent dd5e3a0818
commit 30dc0f56a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 266 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/Table/FilterPopup.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useMemo, useState } from 'react';
import { Field, GrafanaTheme, SelectableValue } from '@grafana/data';
import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, ClickOutsideWrapper, HorizontalGroup, IconButton, Label, VerticalGroup } from '..';
import { stylesFactory, useStyles, useTheme2 } from '../../themes';
import { useStyles2, useTheme2 } from '../../themes';
import { FilterList } from './FilterList';
import { TableStyles } from './styles';
@ -46,7 +46,7 @@ export const FilterPopup: FC<Props> = ({ column: { preFilteredRows, filterValue,
);
const clearFilterVisible = useMemo(() => filterValue !== undefined, [filterValue]);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<ClickOutsideWrapper onClick={onCancel} useCapture={true}>
@ -90,30 +90,30 @@ export const FilterPopup: FC<Props> = ({ column: { preFilteredRows, filterValue,
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
filterContainer: css`
label: filterContainer;
width: 100%;
min-width: 250px;
height: 100%;
max-height: 400px;
background-color: ${theme.colors.bg1};
border: ${theme.border.width.sm} solid ${theme.colors.border2};
padding: ${theme.spacing.md};
margin: ${theme.spacing.sm} 0;
box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow};
border-radius: ${theme.spacing.xs};
background-color: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium};
padding: ${theme.spacing(2)};
margin: ${theme.spacing(1)} 0;
box-shadow: 0px 0px 20px ${theme.v1.palette.black};
border-radius: ${theme.spacing(0.5)};
`,
listDivider: css`
label: listDivider;
width: 100%;
border-top: ${theme.border.width.sm} solid ${theme.colors.border2};
padding: ${theme.spacing.xs} ${theme.spacing.md};
border-top: 1px solid ${theme.colors.border.medium};
padding: ${theme.spacing(0.5, 2)};
`,
label: css`
margin-bottom: 0;
`,
}));
});
const stopPropagation = (event: React.MouseEvent) => {
event.stopPropagation();

16
packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
View File

@ -2,14 +2,14 @@ import { css } from '@emotion/css';
import { debounce } from 'lodash';
import React, { PureComponent } from 'react';
import { GrafanaTheme, DataFrame, CSVConfig, readCSV } from '@grafana/data';
import { DataFrame, CSVConfig, readCSV, GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, withTheme } from '../../themes';
import { Themeable } from '../../types/theme';
import { stylesFactory, withTheme2 } from '../../themes';
import { Themeable2 } from '../../types/theme';
import { Icon } from '../Icon/Icon';
import { TextArea } from '../TextArea/TextArea';
interface Props extends Themeable {
interface Props extends Themeable2 {
config?: CSVConfig;
text: string;
width: string | number;
@ -94,10 +94,10 @@ export class UnThemedTableInputCSV extends PureComponent<Props, State> {
}
}
export const TableInputCSV = withTheme(UnThemedTableInputCSV);
export const TableInputCSV = withTheme2(UnThemedTableInputCSV);
TableInputCSV.displayName = 'TableInputCSV';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
tableInputCsv: css`
position: relative;
@ -111,8 +111,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
bottom: 15px;
right: 15px;
border: 1px solid #222;
background: ${theme.palette.online};
padding: 1px ${theme.spacing.xs};
background: ${theme.colors.success.main};
padding: 1px ${theme.spacing(0.5)};
font-size: 80%;
`,
};

16
packages/grafana-ui/src/components/Tags/Tag.tsx
View File

@ -1,9 +1,9 @@
import { cx, css } from '@emotion/css';
import React, { forwardRef, HTMLAttributes } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme } from '../../themes';
import { useTheme2 } from '../../themes';
import { IconName } from '../../types/icon';
import { getTagColor, getTagColorsFromName } from '../../utils';
import { Icon } from '../Icon/Icon';
@ -23,7 +23,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
}
export const Tag = forwardRef<HTMLElement, Props>(({ name, onClick, icon, className, colorIndex, ...rest }, ref) => {
const theme = useTheme();
const theme = useTheme2();
const styles = getTagStyles(theme, name, colorIndex);
const onTagClick = (event: React.MouseEvent<HTMLElement>) => {
@ -50,7 +50,7 @@ export const Tag = forwardRef<HTMLElement, Props>(({ name, onClick, icon, classN
Tag.displayName = 'Tag';
const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) => {
const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) => {
let colors;
if (colorIndex === undefined) {
colors = getTagColorsFromName(name);
@ -61,16 +61,16 @@ const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) =>
wrapper: css`
appearance: none;
border-style: none;
font-weight: ${theme.typography.weight.semibold};
font-weight: ${theme.typography.fontWeightMedium};
font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.xs};
line-height: ${theme.typography.bodySmall.lineHeight};
vertical-align: baseline;
background-color: ${colors.color};
color: ${theme.palette.gray98};
color: ${theme.v1.palette.gray98};
white-space: nowrap;
text-shadow: none;
padding: 3px 6px;
border-radius: ${theme.border.radius.md};
border-radius: ${theme.shape.borderRadius(2)};
`,
hover: css`
&:hover {

19
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
View File

@ -1,28 +1,27 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme, renderMarkdown } from '@grafana/data';
import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
import { useTheme } from '../../themes/ThemeContext';
import { useTheme2 } from '../../themes/ThemeContext';
import { CompletionItem } from '../../types';
const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
const getStyles = (theme: GrafanaTheme2, height: number, visible: boolean) => {
return {
typeaheadItem: css`
label: type-ahead-item;
z-index: 11;
padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
border: ${theme.colors.border2};
padding: ${theme.spacing(1, 1, 1, 2)};
border: ${theme.colors.border.medium};
overflow-y: scroll;
overflow-x: hidden;
outline: none;
background: ${theme.colors.bg2};
background: ${theme.colors.background.secondary};
color: ${theme.colors.text};
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
box-shadow: 0 0 20px ${theme.v1.colors.dropdownShadow};
visibility: ${visible === true ? 'visible' : 'hidden'};
width: 250px;
min-height: ${height + parseInt(theme.spacing.xxs, 10)}px;
min-height: ${height + parseInt(theme.spacing(0.25), 10)}px;
position: relative;
word-break: break-word;
`,
@ -38,7 +37,7 @@ export const TypeaheadInfo = ({ item, height }: Props) => {
const visible = item && !!item.documentation;
const label = item ? item.label : '';
const documentation = renderMarkdown(item?.documentation);
const theme = useTheme();
const theme = useTheme2();
const styles = getStyles(theme, height, visible);
return (

28
packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
View File

@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
import React from 'react';
import Highlighter from 'react-highlight-words';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles } from '../../themes/ThemeContext';
import { useStyles2 } from '../../themes/ThemeContext';
import { CompletionItem, CompletionItemKind } from '../../types/completion';
import { PartialHighlighter } from './PartialHighlighter';
@ -20,13 +20,13 @@ interface Props {
onMouseLeave?: () => void;
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
typeaheadItem: css`
label: type-ahead-item;
height: auto;
font-family: ${theme.typography.fontFamily.monospace};
padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
font-size: ${theme.typography.size.sm};
font-family: ${theme.typography.fontFamilyMonospace};
padding: ${theme.spacing(1, 1, 1, 2)};
font-size: ${theme.typography.bodySmall.fontSize};
text-overflow: ellipsis;
overflow: hidden;
z-index: 11;
@ -39,28 +39,28 @@ const getStyles = (theme: GrafanaTheme) => ({
typeaheadItemSelected: css`
label: type-ahead-item-selected;
background-color: ${theme.colors.bg2};
background-color: ${theme.colors.background.secondary};
`,
typeaheadItemMatch: css`
label: type-ahead-item-match;
color: ${theme.palette.yellow};
border-bottom: 1px solid ${theme.palette.yellow};
color: ${theme.v1.palette.yellow};
border-bottom: 1px solid ${theme.v1.palette.yellow};
padding: inherit;
background: inherit;
`,
typeaheadItemGroupTitle: css`
label: type-ahead-item-group-title;
color: ${theme.colors.textWeak};
font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.md};
padding: ${theme.spacing.sm};
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
line-height: ${theme.typography.body.lineHeight};
padding: ${theme.spacing(1)};
`,
});
export const TypeaheadItem = (props: Props) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;
const className = isSelected ? cx([styles.typeaheadItem, styles.typeaheadItemSelected]) : cx([styles.typeaheadItem]);

16
packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
View File

@ -1,9 +1,9 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { InlineList } from '../List/InlineList';
import { List } from '../List/List';
@ -25,7 +25,7 @@ export const VizLegendList = <T extends unknown>({
className,
readonly,
}: Props<T>) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
if (!itemRenderer) {
/* eslint-disable-next-line react/display-name */
@ -84,11 +84,11 @@ export const VizLegendList = <T extends unknown>({
VizLegendList.displayName = 'VizLegendList';
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
const itemStyles = css`
padding-right: 10px;
display: flex;
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
white-space: nowrap;
`;
@ -97,18 +97,18 @@ const getStyles = (theme: GrafanaTheme) => {
itemRight: cx(
itemStyles,
css`
margin-bottom: ${theme.spacing.xs};
margin-bottom: ${theme.spacing(0.5)};
`
),
rightWrapper: css`
padding-left: ${theme.spacing.sm};
padding-left: ${theme.spacing(0.5)};
`,
bottomWrapper: css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding-left: ${theme.spacing.md};
padding-left: ${theme.spacing(0.5)};
`,
section: css`
display: flex;

12
packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { VizLegendSeriesIcon } from './VizLegendSeriesIcon';
import { VizLegendStatsList } from './VizLegendStatsList';
@ -30,7 +30,7 @@ export const VizLegendListItem = <T = unknown,>({
className,
readonly,
}: Props<T>) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const onMouseEnter = useCallback(
(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@ -81,7 +81,7 @@ export const VizLegendListItem = <T = unknown,>({
VizLegendListItem.displayName = 'VizLegendListItem';
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
label: css`
label: LegendLabel;
white-space: nowrap;
@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
itemDisabled: css`
label: LegendLabelDisabled;
color: ${theme.colors.linkDisabled};
color: ${theme.colors.text.disabled};
`,
itemWrapper: css`
label: LegendItemWrapper;
@ -105,6 +105,6 @@ const getStyles = (theme: GrafanaTheme) => ({
text-align: right;
`,
yAxisLabel: css`
color: ${theme.palette.gray2};
color: ${theme.v1.palette.gray2};
`,
});

12
packages/jaeger-ui-components/src/settings/SpanBarSettings.tsx
View File

@ -4,11 +4,11 @@ import React from 'react';
import {
DataSourceJsonData,
DataSourcePluginOptionsEditorProps,
GrafanaTheme,
GrafanaTheme2,
toOption,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { InlineField, InlineFieldRow, Input, Select, useStyles } from '@grafana/ui';
import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
export interface SpanBarOptions {
type?: string;
@ -26,7 +26,7 @@ export const TAG = 'Tag';
interface Props extends DataSourcePluginOptionsEditorProps<SpanBarOptionsData> {}
export default function SpanBarSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const selectOptions = [NONE, DURATION, TAG].map(toOption);
return (
@ -76,11 +76,11 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
label: infoText;
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
row: css`

16
public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
View File

@ -1,26 +1,26 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
import { Form, Field, Input, Button, Legend, Container, useStyles, HorizontalGroup, LinkButton } from '@grafana/ui';
import { Form, Field, Input, Button, Legend, Container, useStyles2, HorizontalGroup, LinkButton } from '@grafana/ui';
import config from 'app/core/config';
interface EmailDTO {
userOrEmail: string;
}
const paragraphStyles = (theme: GrafanaTheme) => css`
color: ${theme.colors.formDescription};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.regular};
margin-top: ${theme.spacing.sm};
const paragraphStyles = (theme: GrafanaTheme2) => css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightRegular};
margin-top: ${theme.spacing(1)};
display: block;
`;
export const ForgottenPassword = () => {
const [emailSent, setEmailSent] = useState(false);
const styles = useStyles(paragraphStyles);
const styles = useStyles2(paragraphStyles);
const loginHref = `${config.appSubUrl}/login`;
const sendEmail = async (formModel: EmailDTO) => {

35
public/app/core/components/Layers/LayerDragDropList.tsx
View File

@ -2,9 +2,8 @@ import { css, cx } from '@emotion/css';
import React from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { GrafanaTheme } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Icon, IconButton, stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, IconButton, useStyles2 } from '@grafana/ui';
import { LayerName } from './LayerName';
import { LayerElement } from './types';
@ -38,7 +37,7 @@ export const LayerDragDropList = <T extends LayerElement>({
onNameChange,
verifyLayerNameUniqueness,
}: LayerDragDropListProps<T>) => {
const style = styles(config.theme);
const style = useStyles2(getStyles);
const getRowStyle = (isSelected: boolean) => {
return isSelected ? `${style.row} ${style.sel}` : style.row;
@ -127,43 +126,43 @@ LayerDragDropList.defaultProps = {
isGroup: () => false,
};
const styles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
row: css`
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
background: ${theme.colors.bg2};
min-height: ${theme.spacing.formInputHeight}px;
padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.borderRadius(1)};
background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)};
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3px;
cursor: pointer;
border: 1px solid ${theme.colors.formInputBorder};
border: 1px solid ${theme.components.input.borderColor};
&:hover {
border: 1px solid ${theme.colors.formInputBorderHover};
border: 1px solid ${theme.components.input.borderHover};
}
`,
sel: css`
border: 1px solid ${theme.colors.formInputBorderActive};
border: 1px solid ${theme.colors.primary.border};
&:hover {
border: 1px solid ${theme.colors.formInputBorderActive};
border: 1px solid ${theme.colors.primary.border};
}
`,
dragIcon: css`
cursor: drag;
`,
actionIcon: css`
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
&:hover {
color: ${theme.colors.text};
}
`,
typeWrapper: css`
color: ${theme.colors.textBlue};
color: ${theme.colors.primary.text};
margin-right: 5px;
`,
textWrapper: css`
@ -171,6 +170,6 @@ const styles = stylesFactory((theme: GrafanaTheme) => ({
align-items: center;
flex-grow: 1;
overflow: hidden;
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
}));
});

28
public/app/core/components/Layers/LayerName.tsx
View File

@ -1,8 +1,8 @@
import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui';
export interface LayerNameProps {
name: string;
@ -11,7 +11,7 @@ export interface LayerNameProps {
}
export const LayerName = ({ name, onChange, verifyLayerNameUniqueness }: LayerNameProps) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const [isEditing, setIsEditing] = useState<boolean>(false);
const [validationError, setValidationError] = useState<string | null>(null);
@ -102,31 +102,31 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness }: LayerNa
);
};
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)};
`,
layerNameWrapper: 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,
@ -137,15 +137,15 @@ const getStyles = (theme: GrafanaTheme) => {
}
`,
layerName: 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)};
`,
layerEditIcon: cx(
css`
margin-left: ${theme.spacing.md};
margin-left: ${theme.spacing(2)};
visibility: hidden;
`,
'query-name-edit-icon'

14
public/app/core/components/Login/LoginServiceButtons.tsx
View File

@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
import { pickBy } from 'lodash';
import React from 'react';
import { GrafanaTheme, GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data';
import { Icon, IconName, LinkButton, useStyles, useTheme2, VerticalGroup } from '@grafana/ui';
import { GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data';
import { Icon, IconName, LinkButton, useStyles2, useTheme2, VerticalGroup } from '@grafana/ui';
import config from 'app/core/config';
export interface LoginService {
@ -75,7 +75,7 @@ const loginServices: () => LoginServices = () => {
};
};
const getServiceStyles = (theme: GrafanaTheme) => {
const getServiceStyles = (theme: GrafanaTheme2) => {
return {
button: css`
color: #d8d9da;
@ -83,7 +83,7 @@ const getServiceStyles = (theme: GrafanaTheme) => {
`,
buttonIcon: css`
position: absolute;
left: ${theme.spacing.sm};
left: ${theme.spacing(1)};
top: 50%;
transform: translateY(-50%);
`,
@ -91,7 +91,7 @@ const getServiceStyles = (theme: GrafanaTheme) => {
base: css`
color: ${theme.colors.text};
display: flex;
margin-bottom: ${theme.spacing.sm};
margin-bottom: ${theme.spacing(1)};
justify-content: space-between;
text-align: center;
width: 100%;
@ -106,7 +106,7 @@ const getServiceStyles = (theme: GrafanaTheme) => {
};
const LoginDivider = () => {
const styles = useStyles(getServiceStyles);
const styles = useStyles2(getServiceStyles);
return (
<>
<div className={styles.divider.base}>
@ -144,7 +144,7 @@ export const LoginServiceButtons = () => {
const enabledServices = pickBy(loginServices(), (service) => service.enabled);
const hasServices = Object.keys(enabledServices).length > 0;
const theme = useTheme2();
const styles = useStyles(getServiceStyles);
const styles = useStyles2(getServiceStyles);
if (hasServices) {
return (

9
public/app/core/components/NodeGraphSettings.tsx
View File

@ -4,10 +4,9 @@ import React from 'react';
import {
DataSourceJsonData,
DataSourcePluginOptionsEditorProps,
GrafanaTheme,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { InlineField, InlineFieldRow, InlineSwitch, useStyles } from '@grafana/ui';
import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
export interface NodeGraphOptions {
enabled?: boolean;
@ -20,8 +19,6 @@ export interface NodeGraphData extends DataSourceJsonData {
interface Props extends DataSourcePluginOptionsEditorProps<NodeGraphData> {}
export function NodeGraphSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
return (
<div className={styles.container}>
<h3 className="page-heading">Node Graph</h3>
@ -47,7 +44,7 @@ export function NodeGraphSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const styles = {
container: css`
label: container;
width: 100%;
@ -56,4 +53,4 @@ const getStyles = (theme: GrafanaTheme) => ({
label: row;
align-items: baseline;
`,
});
};

8
public/app/core/components/PermissionList/AddPermission.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React, { Component } from 'react';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Form, HorizontalGroup, Select, stylesFactory } from '@grafana/ui';
import { TeamPicker } from 'app/core/components/Select/TeamPicker';
import { UserPicker } from 'app/core/components/Select/UserPicker';
@ -92,7 +92,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
const newItem = this.state;
const pickerClassName = 'min-width-20';
const isValid = this.isValid();
const styles = getStyles(config.theme);
const styles = getStyles(config.theme2);
return (
<div className="cta-form">
@ -138,9 +138,9 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
label: css`
color: ${theme.colors.textBlue};
color: ${theme.colors.primary.text};
font-weight: bold;
`,
}));

17
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -3,9 +3,9 @@ import React, { useCallback, useState } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { useUpdateEffect } from 'react-use';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { ReactUtils, stylesFactory, useTheme } from '@grafana/ui';
import { ReactUtils, useStyles2 } from '@grafana/ui';
import { QueryOperationRowHeader } from './QueryOperationRowHeader';
@ -45,8 +45,7 @@ export function QueryOperationRow({
id,
}: QueryOperationRowProps) {
const [isContentVisible, setIsContentVisible] = useState(isOpen !== undefined ? isOpen : true);
const theme = useTheme();
const styles = getQueryOperationRowStyles(theme);
const styles = useStyles2(getQueryOperationRowStyles);
const onRowToggle = useCallback(() => {
setIsContentVisible(!isContentVisible);
}, [isContentVisible, setIsContentVisible]);
@ -143,16 +142,16 @@ export function QueryOperationRow({
);
}
const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
const getQueryOperationRowStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
content: css`
margin-top: ${theme.spacing.inlineFormMargin};
margin-left: ${theme.spacing.lg};
margin-top: ${theme.spacing(0.5)};
margin-left: ${theme.spacing(3)};
`,
};
});
};
QueryOperationRow.displayName = 'QueryOperationRow';

17
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@ -2,8 +2,7 @@ import { css, cx } from '@emotion/css';
import React, { createRef, MutableRefObject, PureComponent, ReactNode } from 'react';
import SplitPane from 'react-split-pane';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { config } from 'app/core/config';
enum Pane {
@ -68,7 +67,7 @@ export class SplitPaneWrapper extends PureComponent<Props> {
renderHorizontalSplit() {
const { leftPaneComponents, uiState } = this.props;
const styles = getStyles(config.theme);
const styles = getStyles(config.theme2);
const topPaneSize = uiState.topPaneSize >= 1 ? uiState.topPaneSize : uiState.topPaneSize * window.innerHeight;
/*
@ -100,7 +99,7 @@ export class SplitPaneWrapper extends PureComponent<Props> {
render() {
const { rightPaneVisible, rightPaneComponents, uiState } = this.props;
// Limit options pane width to 90% of screen.
const styles = getStyles(config.theme);
const styles = getStyles(config.theme2);
// Need to handle when width is relative. ie a percentage of the viewport
const rightPaneSize =
@ -127,9 +126,9 @@ export class SplitPaneWrapper extends PureComponent<Props> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const handleColor = theme.palette.blue95;
const paneSpacing = theme.spacing.md;
const getStyles = (theme: GrafanaTheme2) => {
const handleColor = theme.v1.palette.blue95;
const paneSpacing = theme.spacing(2);
const resizer = css`
position: relative;
@ -141,7 +140,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
}
&::after {
background: ${theme.colors.panelBorder};
background: ${theme.components.panel.borderColor};
content: '';
position: absolute;
left: 50%;
@ -209,4 +208,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`
),
};
});
};

15
public/app/core/components/TagFilter/TagOption.tsx
View File

@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
import React, { FC } from 'react';
import { OptionProps } from 'react-select';
import { GrafanaTheme } from '@grafana/data';
import { useTheme, stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { TagBadge } from './TagBadge';
@ -13,8 +13,7 @@ interface ExtendedOptionProps extends OptionProps<any, any> {
}
export const TagOption: FC<ExtendedOptionProps> = ({ data, className, label, isFocused, innerProps }) => {
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
return (
<div className={cx(styles.option, isFocused && styles.optionFocused)} aria-label="Tag option" {...innerProps}>
@ -25,7 +24,7 @@ export const TagOption: FC<ExtendedOptionProps> = ({ data, className, label, isF
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
option: css`
padding: 8px;
@ -33,11 +32,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: pointer;
border-left: 2px solid transparent;
&:hover {
background: ${theme.colors.dropdownOptionHoverBg};
background: ${theme.colors.background.secondary};
}
`,
optionFocused: css`
background: ${theme.colors.dropdownOptionHoverBg};
background: ${theme.colors.background.secondary};
border-style: solid;
border-top: 0;
border-right: 0;
@ -45,4 +44,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
border-left-width: 2px;
`,
};
});
};

12
public/app/core/components/TraceToLogs/KeyValueInput.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme, KeyValue } from '@grafana/data';
import { SegmentInput, useStyles, InlineLabel, Icon } from '@grafana/ui';
import { GrafanaTheme2, KeyValue } from '@grafana/data';
import { SegmentInput, useStyles2, InlineLabel, Icon } from '@grafana/ui';
const EQ_WIDTH = 3; // = 24px in inline label
@ -21,7 +21,7 @@ const KeyValueInput = ({
keyPlaceholder = 'Key',
valuePlaceholder = 'Value (optional)',
}: Props) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={styles.wrapper}>
@ -97,11 +97,11 @@ const KeyValueInput = ({
export default KeyValueInput;
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing.xs} 0;
gap: ${theme.spacing(0.5)} 0;
`,
pair: css`
display: flex;
@ -109,6 +109,6 @@ const getStyles = (theme: GrafanaTheme) => ({
align-items: center;
`,
operator: css`
color: ${theme.palette.orange};
color: ${theme.v1.palette.orange};
`,
});

12
public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
View File

@ -5,12 +5,12 @@ import {
DataSourceJsonData,
DataSourceInstanceSettings,
DataSourcePluginOptionsEditorProps,
GrafanaTheme,
GrafanaTheme2,
KeyValue,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { InlineField, InlineFieldRow, Input, TagsInput, useStyles, InlineSwitch } from '@grafana/ui';
import { InlineField, InlineFieldRow, Input, TagsInput, useStyles2, InlineSwitch } from '@grafana/ui';
import KeyValueInput from './KeyValueInput';
@ -33,7 +33,7 @@ export interface TraceToLogsData extends DataSourceJsonData {
interface Props extends DataSourcePluginOptionsEditorProps<TraceToLogsData> {}
export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={css({ width: '100%' })}>
@ -216,9 +216,9 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
});

12
public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
View File

@ -4,12 +4,12 @@ import React from 'react';
import {
DataSourceJsonData,
DataSourcePluginOptionsEditorProps,
GrafanaTheme,
GrafanaTheme2,
KeyValue,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { Button, InlineField, InlineFieldRow, Input, useStyles } from '@grafana/ui';
import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui';
import KeyValueInput from '../TraceToLogs/KeyValueInput';
@ -33,7 +33,7 @@ export interface TraceToMetricsData extends DataSourceJsonData {
interface Props extends DataSourcePluginOptionsEditorProps<TraceToMetricsData> {}
export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={css({ width: '100%' })}>
@ -211,10 +211,10 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
row: css`
label: row;

15
public/app/features/admin/LicenseChrome.tsx
View File

@ -1,19 +1,19 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
const backgroundUrl = theme.isDark ? 'public/img/licensing/header_dark.svg' : 'public/img/licensing/header_light.svg';
const footerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray6;
const footerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6;
return {
container: css`
padding: 36px 79px;
background: ${theme.colors.panelBg};
background: ${theme.components.panel.background};
`,
footer: css`
text-align: center;
@ -27,7 +27,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
background: url('${backgroundUrl}') right;
`,
};
});
};
interface Props {
header: string;
@ -37,8 +37,7 @@ interface Props {
}
export function LicenseChrome({ header, editionNotice, subheader, children }: Props) {
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
return (
<>

28
public/app/features/admin/UserOrgs.tsx
View File

@ -1,7 +1,7 @@
import { css, cx } from '@emotion/css';
import React, { PureComponent, ReactElement } from 'react';
import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import {
Button,
ConfirmButton,
@ -10,11 +10,10 @@ import {
Icon,
Modal,
stylesFactory,
Themeable,
Themeable2,
Tooltip,
useStyles2,
useTheme,
withTheme,
withTheme2,
} from '@grafana/ui';
import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
import { fetchRoleOptions, updateUserRoles } from 'app/core/components/RolePicker/api';
@ -102,12 +101,12 @@ export class UserOrgs extends PureComponent<Props, State> {
}
}
const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => {
const getOrgRowStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
removeButton: css`
margin-right: 0.6rem;
text-decoration: underline;
color: ${theme.palette.blue95};
color: ${theme.v1.palette.blue95};
`,
label: css`
font-weight: 500;
@ -119,19 +118,19 @@ const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => {
margin-left: 5px;
`,
tooltipItemLink: css`
color: ${theme.palette.blue95};
color: ${theme.v1.palette.blue95};
`,
rolePickerWrapper: css`
display: flex;
`,
rolePicker: css`
flex: auto;
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
};
});
interface OrgRowProps extends Themeable {
interface OrgRowProps extends Themeable2 {
user?: UserDTO;
org: UserOrg;
isExternalUser?: boolean;
@ -256,7 +255,7 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps> {
}
}
const OrgRow = withTheme(UnThemedOrgRow);
const OrgRow = withTheme2(UnThemedOrgRow);
const getAddToOrgModalStyles = stylesFactory(() => ({
modal: css`
@ -463,8 +462,7 @@ export function ChangeOrgButton({
}
const ExternalUserTooltip = () => {
const theme = useTheme();
const styles = getTooltipStyles(theme);
const styles = useStyles2(getTooltipStyles);
return (
<div className={styles.disabledTooltip}>
@ -493,11 +491,11 @@ const ExternalUserTooltip = () => {
);
};
const getTooltipStyles = stylesFactory((theme: GrafanaTheme) => ({
const getTooltipStyles = (theme: GrafanaTheme2) => ({
disabledTooltip: css`
display: flex;
`,
tooltipItemLink: css`
color: ${theme.palette.blue95};
color: ${theme.v1.palette.blue95};
`,
}));
});

23
public/app/features/admin/UserProfile.tsx
View File

@ -1,9 +1,7 @@
import { css, cx } from '@emotion/css';
import React, { FC, PureComponent, useRef, useState } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus, stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config';
import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus } from '@grafana/ui';
import { contextSrv } from 'app/core/core';
import { AccessControlAction, UserDTO } from 'app/types';
@ -73,7 +71,6 @@ export function UserProfile({
const authSource = user.authLabels?.length && user.authLabels[0];
const lockMessage = authSource ? `Synced via ${authSource}` : '';
const styles = getStyles(config.theme);
const editLocked = user.isExternal || !contextSrv.hasPermissionInMetadata(AccessControlAction.UsersWrite, user);
const passwordChangeLocked =
@ -163,16 +160,14 @@ export function UserProfile({
);
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
buttonRow: css`
margin-top: 0.8rem;
> * {
margin-right: 16px;
}
`,
};
});
const styles = {
buttonRow: css`
margin-top: 0.8rem;
> * {
margin-right: 16px;
}
`,
};
interface UserProfileRowProps {
label: string;

14
public/app/features/alerting/components/NotificationChannelForm.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC, useEffect } from 'react';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { Button, FormAPI, HorizontalGroup, stylesFactory, useTheme, Spinner } from '@grafana/ui';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, FormAPI, HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui';
import config from 'app/core/config';
import { NotificationChannelType, NotificationChannelDTO, NotificationChannelSecureFields } from '../../../types';
@ -39,7 +39,7 @@ export const NotificationChannelForm: FC<Props> = ({
resetSecureField,
secureFields,
}) => {
const styles = getStyles(useTheme());
const styles = useStyles2(getStyles);
useEffect(() => {
/*
@ -117,15 +117,15 @@ export const NotificationChannelForm: FC<Props> = ({
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
formContainer: css``,
formItem: css`
flex-grow: 1;
padding-top: ${theme.spacing.md};
padding-top: ${theme.spacing(2)};
`,
formButtons: css`
padding-top: ${theme.spacing.xl};
padding-top: ${theme.spacing(4)};
`,
};
});
};

50
public/app/features/alerting/unified/components/AlertLabel.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { IconButton, useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { IconButton, useStyles2 } from '@grafana/ui';
interface Props {
labelKey: string;
@ -11,23 +11,29 @@ interface Props {
onRemoveLabel?: () => void;
}
export const AlertLabel: FC<Props> = ({ labelKey, value, operator = '=', onRemoveLabel }) => (
<div className={useStyles(getStyles)}>
{labelKey}
{operator}
{value}
{!!onRemoveLabel && <IconButton name="times" size="xs" onClick={onRemoveLabel} />}
</div>
);
export const AlertLabel = ({ labelKey, value, operator = '=', onRemoveLabel }: Props) => {
const styles = useStyles2(getStyles);
export const getStyles = (theme: GrafanaTheme) => css`
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
border: solid 1px ${theme.colors.border2};
font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg2};
font-weight: ${theme.typography.weight.bold};
color: ${theme.colors.formLabel};
display: inline-block;
line-height: 1.2;
`;
return (
<div className={styles.wrapper}>
{labelKey}
{operator}
{value}
{!!onRemoveLabel && <IconButton name="times" size="xs" onClick={onRemoveLabel} />}
</div>
);
};
export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.borderRadius(1)};
border: solid 1px ${theme.colors.border.medium};
font-size: ${theme.typography.bodySmall.fontSize};
background-color: ${theme.colors.background.secondary};
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.text.primary};
display: inline-block;
line-height: 1.2;
`,
});

10
public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Tooltip, useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Tooltip, useStyles2 } from '@grafana/ui';
import { Annotation, annotationLabels } from '../utils/constants';
@ -34,7 +34,7 @@ export const AnnotationDetailsField: FC<Props> = ({ annotationKey, value }) => {
};
const AnnotationValue: FC<Props> = ({ annotationKey, value }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const needsWell = wellableAnnotationKeys.includes(annotationKey);
const needsLink = value && value.startsWith('http');
@ -56,12 +56,12 @@ const AnnotationValue: FC<Props> = ({ annotationKey, value }) => {
return <>{tokenizeValue}</>;
};
export const getStyles = (theme: GrafanaTheme) => ({
export const getStyles = (theme: GrafanaTheme2) => ({
well: css`
word-break: break-word;
`,
link: css`
word-break: break-all;
color: ${theme.colors.textBlue};
color: ${theme.colors.primary.text};
`,
});

14
public/app/features/alerting/unified/components/EmptyArea.tsx
View File

@ -1,21 +1,21 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return <div className={styles.container}>{children}</div>;
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
background-color: ${theme.colors.bg2};
color: ${theme.colors.textSemiWeak};
padding: ${theme.spacing.xl};
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(4)};
text-align: center;
`,
};

18
public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { ButtonHTMLAttributes, FC } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Button, ButtonVariant, IconName, LinkButton, useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, ButtonVariant, IconName, LinkButton, useStyles2 } from '@grafana/ui';
import { EmptyArea } from './EmptyArea';
@ -28,7 +28,7 @@ export const EmptyAreaWithCTA: FC<EmptyAreaWithCTAProps> = ({
href,
showButton = true,
}) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const commonProps = {
className: styles.button,
@ -56,19 +56,19 @@ export const EmptyAreaWithCTA: FC<EmptyAreaWithCTAProps> = ({
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
background-color: ${theme.colors.bg2};
color: ${theme.colors.textSemiWeak};
padding: ${theme.spacing.xl};
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(4)};
text-align: center;
`,
text: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
button: css`
margin: ${theme.spacing.md} 0 ${theme.spacing.sm};
margin: ${theme.spacing(2, 0, 1)};
`,
};
};

11
public/app/features/alerting/unified/components/Expression.tsx
View File

@ -3,8 +3,8 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs';
import React, { FC, useMemo } from 'react';
import { Editor } from 'slate-react';
import { GrafanaTheme } from '@grafana/data';
import { makeValue, SlatePrism, useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { makeValue, SlatePrism, useStyles2 } from '@grafana/ui';
import LogqlSyntax from 'app/plugins/datasource/loki/syntax';
import PromqlSyntax from 'app/plugins/datasource/prometheus/promql';
import { RulesSource } from 'app/types/unified-alerting';
@ -39,7 +39,8 @@ export const HighlightedQuery: FC<{ language: 'promql' | 'logql'; expr: string }
};
export const Expression: FC<Props> = ({ expression: query, rulesSource }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<Well className={cx(styles.well, 'slate-query-field')}>
{isCloudRulesSource(rulesSource) ? (
@ -51,8 +52,8 @@ export const Expression: FC<Props> = ({ expression: query, rulesSource }) => {
);
};
export const getStyles = (theme: GrafanaTheme) => ({
export const getStyles = (theme: GrafanaTheme2) => ({
well: css`
font-family: ${theme.typography.fontFamily.monospace};
font-family: ${theme.typography.fontFamilyMonospace};
`,
});

18
public/app/features/alerting/unified/components/Well.tsx
View File

@ -1,21 +1,21 @@
import { cx, css } 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';
type Props = React.HTMLAttributes<HTMLDivElement>;
export const Well: FC<Props> = ({ children, className }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return <div className={cx(styles.wrapper, className)}>{children}</div>;
};
export const getStyles = (theme: GrafanaTheme) => ({
export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
background-color: ${theme.colors.panelBg};
border: solid 1px ${theme.colors.formInputBorder};
border-radius: ${theme.border.radius.sm};
padding: ${theme.spacing.xs} ${theme.spacing.sm};
font-family: ${theme.typography.fontFamily.monospace};
background-color: ${theme.components.panel.background};
border: solid 1px ${theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius(1)};
padding: ${theme.spacing(0.5, 1)};
font-family: ${theme.typography.fontFamilyMonospace};
`,
});