mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
DataLinksSuggestion: updates component with the new theme model (#33390)
* updates component with the new theme model * uses correct new theme property * removes constant variables and inlined their usage
This commit is contained in:
parent
c41b08bd59
commit
0d1cdbe227
@ -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 (
|
||||
<>
|
||||
|
Loading…
Reference in New Issue
Block a user