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

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