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

Card: make elements in metadata clickable (#46336)

Browse Source 
* Card: make elements in metadata clickable

* add docs
This commit is contained in:
Giordano Ricci 2022-03-10 13:52:34 +00:00 committed by GitHub
parent 52decfaebc
commit 8b9e27c4ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/grafana-ui/src/components/Card/Card.mdx
View File

@ -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.

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

@ -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)}`,