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

Wrap individual meta items in zIndex: 0 (#47935)

Browse Source
This commit is contained in:
Ashley Harrison 2022-04-20 12:47:50 +01:00 committed by GitHub
parent 5c4459a723
commit e8fc6637ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -232,12 +232,17 @@ const Meta = memo(({ children, className, separator = '|' }: ChildProps & { sepa
const styles = useStyles2(getMetaStyles);
let meta = children;
const filtered = React.Children.toArray(children).filter(Boolean);
if (!filtered.length) {
return null;
}
meta = filtered.map((element, i) => (
<div key={`element_${i}`} className={styles.metadataItem}>
{element}
</div>
));
// Join meta data elements by separator
if (Array.isArray(children) && separator) {
const filtered = React.Children.toArray(children).filter(Boolean);
if (!filtered.length) {
return null;
}
if (filtered.length > 1 && separator) {
meta = filtered.reduce((prev, curr, i) => [
prev,
<span key={`separator_${i}`} className={styles.separator}>
@ -261,6 +266,9 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
margin: theme.spacing(0.5, 0, 0),
lineHeight: theme.typography.bodySmall.lineHeight,
overflowWrap: 'anywhere',
}),
metadataItem: css({
// Needed to allow for clickable children in metadata
zIndex: 0,
}),
separator: css({