IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 12:44:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Correct color on TagItems (#19933)

Browse Source
This commit is contained in:
Peter Holmberg 2019-10-21 13:41:39 +02:00 committed by GitHub
parent 09cf9711a0
commit 055ca7bdf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/TagsInput/TagItem.tsx
View File

@ -1,7 +1,8 @@
import React, { FC } from 'react';
import { css, cx } from 'emotion';
import { getTagColorsFromName } from '../../utils';
import { stylesFactory } from '../../themes';
import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '../../types';
interface Props {
name: string;
@ -9,12 +10,13 @@ interface Props {
onRemove: (tag: string) => void;
}
export const TagItem: FC<Props> = ({ name, onRemove }) => {
const getStyles = stylesFactory(({ theme, name }: { theme: GrafanaTheme; name: string }) => {
const { color, borderColor } = getTagColorsFromName(name);
const getStyles = stylesFactory(() => ({
return {
itemStyle: css`
background-color: ${color};
color: ${theme.colors.white};
border: 1px solid ${borderColor};
border-radius: 3px;
padding: 3px 6px;
@ -37,12 +39,17 @@ export const TagItem: FC<Props> = ({ name, onRemove }) => {
cursor: pointer;
`,
]),
}));
};
});
export const TagItem: FC<Props> = ({ name, onRemove }) => {
const theme = useTheme();
const styles = getStyles({ theme, name });
return (
<div className={getStyles().itemStyle}>
<span className={getStyles().nameStyle}>{name}</span>
<i className={getStyles().removeStyle} onClick={() => onRemove(name)} />
<div className={styles.itemStyle}>
<span className={styles.nameStyle}>{name}</span>
<i className={styles.removeStyle} onClick={() => onRemove(name)} />
</div>
);
};