Skip to content

Commit d440e79

Browse files
JonasBaclaudenatemoo-re
authored
ref(core): convert AlertLink to mdx (#95194)
Refactor to use the new mdx format --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
1 parent d8c0900 commit d440e79

File tree

2 files changed

+182
-122
lines changed

2 files changed

+182
-122
lines changed

‎static/app/components/core/alert/alertLink.stories.tsx

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎static/app/components/core/alert/alertlink.mdx

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: AlertLink
3+
description: AlertLink creates a clickable alert that can navigate to internal pages, external URLs, or trigger custom actions.
4+
source: 'sentry/components/core/alert/alertLink'
5+
resources:
6+
figma: https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/ChonkUI--App-Components--WIP-?node-id=3040-309&p=f&t=CK6htZbJiMwIuIPr-0
7+
js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/alert/alertLink.tsx
8+
a11y:
9+
WCAG 2.1.1: https://www.w3.org/TR/WCAG22/#keyboard
10+
WCAG 2.4.7: https://www.w3.org/TR/WCAG22/#focus-visible
11+
WAI-ARIA Link Practices: https://www.w3.org/WAI/ARIA/apg/patterns/link/
12+
next:
13+
link: '?name=app%2Fcomponents%2Fcore%2Fbutton%2Findex.mdx'
14+
label: Button
15+
prev:
16+
link: '?name=app%2Fcomponents%2Fcore%2Falert%2Findex.stories.tsx'
17+
label: Alert
18+
---
19+
20+
import {AlertLink} from 'sentry/components/core/alert/alertLink';
21+
import {IconMail} from 'sentry/icons';
22+
import * as Storybook from 'sentry/stories';
23+
24+
import types from '!!type-loader!sentry/components/core/alert/alertLink';
25+
26+
export {types};
27+
28+
To create a basic alert link, wrap content in an `<AlertLink>` and provide navigation props.
29+
30+
```jsx
31+
<AlertLink to="/settings">Go to Settings</AlertLink>
32+
```
33+
34+
### Alert Types
35+
36+
AlertLink supports all alert types: `info` (default), `success`, `warning`, `error`, and `muted`.
37+
38+
<Storybook.Demo>
39+
<AlertLink.Container>
40+
<AlertLink type="info" to="/settings">
41+
Info alert link
42+
</AlertLink>
43+
<AlertLink type="success" to="/settings">
44+
Success alert link
45+
</AlertLink>
46+
<AlertLink type="warning" to="/settings">
47+
Warning alert link
48+
</AlertLink>
49+
<AlertLink type="error" to="/settings">
50+
Error alert link
51+
</AlertLink>
52+
<AlertLink type="muted" to="/settings">
53+
Muted alert link
54+
</AlertLink>
55+
</AlertLink.Container>
56+
</Storybook.Demo>
57+
```jsx
58+
<AlertLink type="info" to="/settings">
59+
Info alert link
60+
</AlertLink>
61+
<AlertLink type="success" to="/settings">
62+
Success alert link
63+
</AlertLink>
64+
<AlertLink type="warning" to="/settings">
65+
Warning alert link
66+
</AlertLink>
67+
<AlertLink type="error" to="/settings">
68+
Error alert link
69+
</AlertLink>
70+
<AlertLink type="muted" to="/settings">
71+
Muted alert link
72+
</AlertLink>
73+
```
74+
75+
### Link Types
76+
77+
AlertLink supports three types of navigation: internal routing, external URLs, and custom click handlers.
78+
79+
#### Internal Links
80+
81+
Use the `to` prop for internal navigation within the application.
82+
83+
<Storybook.Demo>
84+
<AlertLink to="/settings">Go to Settings</AlertLink>
85+
</Storybook.Demo>
86+
```jsx
87+
<AlertLink to="/settings">Go to Settings</AlertLink>
88+
```
89+
90+
#### External Links
91+
92+
Use the `href` prop for external URLs. The `openInNewTab` prop controls whether the link opens in a new tab.
93+
94+
<Storybook.Demo>
95+
<AlertLink href="https://docs.sentry.io" openInNewTab>
96+
Read the Documentation
97+
</AlertLink>
98+
</Storybook.Demo>
99+
```jsx
100+
<AlertLink href="https://docs.sentry.io" openInNewTab>
101+
Read the Documentation
102+
</AlertLink>
103+
```
104+
105+
#### Custom Click Handlers
106+
107+
Use the `onClick` prop for custom actions that don't involve navigation.
108+
109+
<Storybook.Demo>
110+
{/* eslint-disable-next-line no-alert */}
111+
<AlertLink onClick={() => alert('Custom action triggered!')}>
112+
Trigger Custom Action
113+
</AlertLink>
114+
</Storybook.Demo>
115+
```jsx
116+
<AlertLink onClick={() => alert('Custom action triggered!')}>
117+
Trigger Custom Action
118+
</AlertLink>
119+
```
120+
121+
### Trailing Items
122+
123+
By default, AlertLink includes a right-pointing chevron icon. You can customize this with the `trailingItems` prop.
124+
125+
<Storybook.Demo>
126+
<AlertLink.Container>
127+
<AlertLink to="/settings">Default trailing chevron</AlertLink>
128+
<AlertLink to="/settings" trailingItems={<IconMail />}>
129+
Custom trailing icon
130+
</AlertLink>
131+
<AlertLink to="/settings" trailingItems={null}>
132+
No trailing items
133+
</AlertLink>
134+
</AlertLink.Container>
135+
</Storybook.Demo>
136+
```jsx
137+
<AlertLink to="/settings">Default trailing chevron</AlertLink>
138+
<AlertLink to="/settings" trailingItems={<IconMail />}>
139+
Custom trailing icon
140+
</AlertLink>
141+
<AlertLink to="/settings" trailingItems={null}>
142+
No trailing items
143+
</AlertLink>
144+
```
145+
146+
### Container
147+
148+
When displaying multiple AlertLinks, use `AlertLink.Container` to manage consistent spacing.
149+
150+
<Storybook.Demo>
151+
<AlertLink.Container>
152+
<AlertLink type="info" to="/settings">
153+
First alert link
154+
</AlertLink>
155+
<AlertLink type="warning" href="https://docs.sentry.io" openInNewTab>
156+
Second alert link
157+
</AlertLink>
158+
{/* eslint-disable-next-line no-alert */}
159+
<AlertLink type="success" onClick={() => alert('Third action!')}>
160+
Third alert link
161+
</AlertLink>
162+
</AlertLink.Container>
163+
</Storybook.Demo>
164+
```jsx
165+
<AlertLink.Container>
166+
<AlertLink type="info" to="/settings">
167+
First alert link
168+
</AlertLink>
169+
<AlertLink type="warning" href="https://docs.sentry.io" openInNewTab>
170+
Second alert link
171+
</AlertLink>
172+
<AlertLink type="success" onClick={() => alert('Third action!')}>
173+
Third alert link
174+
</AlertLink>
175+
</AlertLink.Container>
176+
```
177+
178+
### Accessibility
179+
180+
To meet WCAG 2.2 AA compliance, `<AlertLink>` automatically meets the [WCAG 2.1.1](https://www.w3.org/TR/WCAG22/#keyboard) and [WCAG 2.4.7](https://www.w3.org/TR/WCAG22/#focus-visible) success criteria.
181+
182+
Developers should ensure that their implementations follow the [WAI-ARIA Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/) and provide clear, descriptive link text that indicates the purpose and destination of the link.

0 commit comments

Comments
 (0)