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

DataLinksSuggestion: updates component with the new theme model (#33390)

Browse Source 
* updates component with the new theme model

* uses correct new theme property

* removes constant variables and inlined their usage
This commit is contained in:
Uchechukwu Obasi 2021-04-28 11:17:10 +01:00 committed by GitHub
parent c41b08bd59
commit 0d1cdbe227
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -1,10 +1,10 @@
import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
import { VariableSuggestion, GrafanaThemeV2 } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { groupBy, capitalize } from 'lodash';
import React, { useRef, useMemo } from 'react';
import useClickAway from 'react-use/lib/useClickAway';
import { List } from '../index';
import { styleMixins, useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
interface DataLinkSuggestionsProps {
suggestions: VariableSuggestion[];
@ -13,47 +13,40 @@ interface DataLinkSuggestionsProps {
onClose?: () => void;
}
const getStyles = (theme: GrafanaTheme) => {
const wrapperBg = theme.colors.bg1;
const wrapperShadow = theme.colors.dropdownShadow;
const itemColor = theme.colors.text;
const itemBgHover = styleMixins.hoverColor(theme.colors.bg1, theme);
const itemBgActive = theme.colors.bg2;
const separatorColor = theme.colors.border2;
const getStyles = (theme: GrafanaThemeV2) => {
return {
list: css`
border-bottom: 1px solid ${separatorColor};
border-bottom: 1px solid ${theme.colors.border.weak};
&:last-child {
border: none;
}
`,
wrapper: css`
background: ${wrapperBg};
background: ${theme.colors.background.primary};
z-index: 1;
width: 250px;
box-shadow: 0 5px 10px 0 ${wrapperShadow};
box-shadow: 0 5px 10px 0 ${theme.shadows.z1};
`,
item: css`
background: none;
padding: 2px 8px;
color: ${itemColor};
color: ${theme.colors.text.primary};
cursor: pointer;
&:hover {
background: ${itemBgHover};
background: ${theme.colors.action.hover};
}
`,
label: css`
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
`,
activeItem: css`
background: ${itemBgActive};
background: ${theme.colors.background.secondary};
&:hover {
background: ${itemBgActive};
background: ${theme.colors.background.secondary};
}
`,
itemValue: css`
font-family: ${theme.typography.fontFamily.monospace};
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.size.sm};
`,
};
@ -72,7 +65,7 @@ export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ sugges
return groupBy(suggestions, (s) => s.origin);
}, [suggestions]);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div ref={ref} className={styles.wrapper}>
@ -111,7 +104,7 @@ interface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {
const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.memo(
({ activeIndex, activeIndexOffset, label, onClose, onSuggestionSelect, suggestions }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<>