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
30 changed files with 266 additions and 275 deletions
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};
`,
});