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

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