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

FilterPill: updates component with the new theme model (#33624)

Browse Source 
* FilterPill: updates component with the new theme model

* fixes small spacing nit
This commit is contained in:
Uchechukwu Obasi 2021-05-03 11:55:36 +01:00 committed by GitHub
parent 4506af3be7
commit 1be7d1a733
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme2 } from '../../themes';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { IconButton } from '../IconButton/IconButton'; import { IconButton } from '../IconButton/IconButton';
import { IconName } from '../../types'; import { IconName } from '../../types';
@ -13,7 +13,7 @@ export interface FilterPillProps {
} }
export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => { export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => {
const theme = useTheme(); const theme = useTheme2();
const styles = getFilterPillStyles(theme, selected); const styles = getFilterPillStyles(theme, selected);
return ( return (
<div className={styles.wrapper} onClick={onClick}> <div className={styles.wrapper} onClick={onClick}>
@ -31,26 +31,26 @@ export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick
); );
}; };
const getFilterPillStyles = stylesFactory((theme: GrafanaTheme, isSelected: boolean) => { const getFilterPillStyles = stylesFactory((theme: GrafanaTheme2, isSelected: boolean) => {
const labelColor = isSelected ? theme.colors.text : theme.colors.textWeak; const labelColor = isSelected ? theme.colors.text.primary : theme.colors.text.secondary;
return { return {
wrapper: css` wrapper: css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm}; padding: ${theme.spacing(0.25)} ${theme.spacing(1)};
background: ${theme.colors.bg2}; background: ${theme.colors.background.secondary};
border-radius: ${theme.border.radius.sm}; border-radius: ${theme.shape.borderRadius()};
padding: 0 ${theme.spacing.md} 0 ${theme.spacing.xs}; padding: ${theme.spacing(0, 2, 0, 0.5)};
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
color: ${theme.colors.text}; color: ${theme.colors.text.primary};
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
`, `,
icon: css` icon: css`
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing(1)};
margin-left: ${theme.spacing.xs}; margin-left: ${theme.spacing(0.5)};
color: ${labelColor}; color: ${labelColor};
`, `,
label: css` label: css`