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

Alert: Remove z-index on Alert component so that it does not overlay ontop of other content (#28834)

Browse Source
This commit is contained in:
Torkel Ödegaard 2020-11-04 20:27:43 +01:00 committed by GitHub
parent 65554269ed
commit 9dd37f1e1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -52,26 +52,24 @@ export const Alert: FC<Props> = ({
const styles = getStyles(theme, severity, !!buttonContent);
return (
<div className={styles.container}>
<div className={styles.alert} aria-label={selectors.components.Alert.alert(severity)}>
<div className={styles.icon}>
<Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
</div>
<div className={styles.body}>
<div className={styles.title}>{title}</div>
{children && <div>{children}</div>}
</div>
{/* If onRemove is specified, giving preference to onRemove */}
{onRemove ? (
<button type="button" className={styles.close} onClick={onRemove}>
{buttonContent || <Icon name="times" size="lg" />}
</button>
) : onButtonClick ? (
<button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
{buttonText}
</button>
) : null}
<div className={styles.alert} aria-label={selectors.components.Alert.alert(severity)}>
<div className={styles.icon}>
<Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
</div>
<div className={styles.body}>
<div className={styles.title}>{title}</div>
{children && <div>{children}</div>}
</div>
{/* If onRemove is specified, giving preference to onRemove */}
{onRemove ? (
<button type="button" className={styles.close} onClick={onRemove}>
{buttonContent || <Icon name="times" size="lg" />}
</button>
) : onButtonClick ? (
<button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
{buttonText}
</button>
) : null}
</div>
);
};
@ -84,9 +82,6 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean
`;
return {
container: css`
z-index: ${theme.zIndex.tooltip};
`,
alert: css`
padding: 15px 20px;
margin-bottom: ${theme.spacing.xs};