IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Add support for additional colors in MetaText (#71299)

Browse Source 
add support for additional colors in MetaText
This commit is contained in:
Gilles De Mey 2023-07-11 11:11:25 +02:00 committed by GitHub
parent d0bbb69e14
commit 82f0ef6871
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/alerting/unified/components/MetaText.tsx
View File

@ -1,46 +1,40 @@
import { css } from '@emotion/css';
import classNames from 'classnames';
import React, { HTMLAttributes } from 'react';
import { css, cx } from '@emotion/css';
import React, { ComponentProps, HTMLAttributes } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { Icon, IconName, useStyles2 } from '@grafana/ui';
import { Span } from '@grafana/ui/src/unstable';
interface Props extends HTMLAttributes<HTMLDivElement> {
icon?: IconName;
color?: ComponentProps<typeof Span>['color'];
}
const MetaText = ({ children, icon, ...rest }: Props) => {
const MetaText = ({ children, icon, color = 'secondary', ...rest }: Props) => {
const styles = useStyles2(getStyles);
const interactive = typeof rest.onClick === 'function';
return (
<div
className={classNames({
[styles.metaText]: true,
className={cx({
[styles.interactive]: interactive,
})}
// allow passing ARIA and data- attributes
{...rest}
>
<Stack direction="row" alignItems="center" gap={0.5}>
{icon && <Icon name={icon} />}
{children}
</Stack>
<Span variant="bodySmall" color={color}>
<Stack direction="row" alignItems="center" gap={0.5}>
{icon && <Icon name={icon} />}
{children}
</Stack>
</Span>
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
metaText: css`
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
const getStyles = () => ({
interactive: css`
cursor: pointer;
&:hover {
color: ${theme.colors.text.primary};
}
`,
});