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