From 8b9e27c4ba3e51341fee0e5af3298010baefde1f Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Thu, 10 Mar 2022 13:52:34 +0000
Subject: [PATCH] Card: make elements in metadata clickable (#46336)

* Card: make elements in metadata clickable

* add docs
---
 .../grafana-ui/src/components/Card/Card.mdx   | 41 ++++++++++++++++++-
 .../grafana-ui/src/components/Card/Card.tsx   |  1 +
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.mdx b/packages/grafana-ui/src/components/Card/Card.mdx
index a5efbed8383..63ab7ac1d05 100644
--- a/packages/grafana-ui/src/components/Card/Card.mdx
+++ b/packages/grafana-ui/src/components/Card/Card.mdx
@@ -126,7 +126,7 @@ Tags can be rendered inside the Card, by being wrapped in `Card.Tags` component.
 
 ### As a link
 
-Card can be used as a clickable link item by specifying `href` prop. In this case the Card's content will be rendered inside `a`.
+Card can be used as a clickable link item by specifying `href` prop.
 
 ```jsx
 <Card href="https://grafana.com">
@@ -142,6 +142,45 @@ Card can be used as a clickable link item by specifying `href` prop. In this cas
   </Card>
 </Preview>
 
+### As a button
+
+Card can be used as a clickable buttons item by specifying `onClick` prop.
+
+```jsx
+<Card onClick={() => alert('Hello, Grafana!')}>
+  <Card.Heading>Hello, Grafana</Card.Heading>
+  <Card.Description>Clicking this card will create an alert</Card.Description>
+</Card>
+```
+
+<Preview>
+  <Card onClick={() => alert('Hello, Grafana!')}>
+    <Card.Heading>Hello, Grafana</Card.Heading>
+    <Card.Description>Clicking this card will create an alert</Card.Description>
+  </Card>
+</Preview>
+
+> **Note**: When used in conjunction with [Metadata elements](#multiple-metadata-elements), clicking on any element
+> inside `<Card.Meta>` will prevent the card action to be executed (either `href` to be followed or `onClick` to be called).
+>
+> Example:
+
+```jsx
+<Card onClick={() => alert('Hello, Grafana!')}>
+  <Card.Heading>Hello, Grafana</Card.Heading>
+  <Card.Meta>Clicking on this text (Meta) WILL NOT trigger the alert!</Card.Meta>
+  <Card.Description>Clicking on this text (Description) WILL trigger the alert!</Card.Description>
+</Card>
+```
+
+<Preview>
+  <Card onClick={() => alert('Hello, Grafana!')}>
+    <Card.Heading>Hello, Grafana</Card.Heading>
+    <Card.Meta>Clicking on this text (Meta) WILL NOT trigger the alert!</Card.Meta>
+    <Card.Description>Clicking on this text (Description) WILL trigger the alert!</Card.Description>
+  </Card>
+</Preview>
+
 ### Inside a list item
 
 To render cards in a list, it is possible to nest them inside `li` items.
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 2ba11fc31f5..34524c1e7de 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -261,6 +261,7 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
     margin: theme.spacing(0.5, 0, 0),
     lineHeight: theme.typography.bodySmall.lineHeight,
     overflowWrap: 'anywhere',
+    zIndex: 0,
   }),
   separator: css({
     margin: `0 ${theme.spacing(1)}`,