Skip to content

Commit 42e073e

Browse files
mydeamydea
authored
feat: Update Expandable style (#12457)
1 parent 66c81c0 commit 42e073e

File tree

7 files changed

+238
-126
lines changed

7 files changed

+238
-126
lines changed

‎docs/contributing/pages/components.mdx

+24
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,36 @@ Render an expandable section.
9494

9595
<Expandable title="This is a title">This is some content</Expandable>
9696

97+
<Expandable permalink title="With Permalink">This is some content</Expandable>
98+
99+
<Expandable title="Warning" level="warning">This is some warning content</Expandable>
100+
101+
<Expandable title="Success" level="success">This is some success content</Expandable>
102+
97103
```markdown {tabTitle:Example}
98104
<Expandable title="This is a title">
99105
This is some content
100106
</Expandable>
101107
```
102108

109+
```markdown {tabTitle:Permalink}
110+
<Expandable permalink title="With Permalink">
111+
This is some content
112+
</Expandable>
113+
```
114+
115+
```markdown {tabTitle:Warning}
116+
<Expandable level="warning" title="This is a title">
117+
This is some content
118+
</Expandable>
119+
```
120+
121+
```markdown {tabTitle:Success}
122+
<Expandable level="success" title="This is a title">
123+
This is some content
124+
</Expandable>
125+
```
126+
103127
Attributes:
104128

105129
- `title` (string)

‎docs/platforms/javascript/common/troubleshooting/index.mdx

+6-9
Original file line numberDiff line numberDiff line change
@@ -137,14 +137,11 @@ You can work around our CDN bundles being blocked by [using our NPM packages](#u
137137

138138
<PlatformSection supported={["javascript.nextjs"]}>
139139

140-
<Note>
141-
The Sentry Next.js SDK has a separate option to make setting up tunnels very
142-
straight-forward, allowing you to skip the setup below. See
143-
<PlatformLink to="/manual-setup/#configure-tunneling-to-avoid-ad-blockers">
144-
Configure Tunneling to avoid Ad-Blockers
145-
</PlatformLink>
146-
to learn how to set up tunneling on Next.js.
147-
</Note>
140+
The Sentry Next.js SDK has a separate option to make setting up tunnels very
141+
straight-forward, allowing you to skip the setup below. See <PlatformLink to="/manual-setup/#configure-tunneling-to-avoid-ad-blockers">
142+
Configure Tunneling to avoid Ad-Blockers</PlatformLink> to learn how to set up tunneling on Next.js.
143+
144+
If you do not want to configure `tunnelRoute`, you can follow the guide below.
148145

149146
</PlatformSection>
150147

@@ -543,7 +540,7 @@ shamefully-hoist=true
543540
<PlatformSection supported={['javascript.nextjs']}>
544541
<Expandable permalink title="Out of Memory (OOM) errors during build">
545542
The problem here is related to memory consumption during the build process, especially when generating source maps. Here are some potential solutions and workarounds:
546-
543+
547544
- Update your `@sentry/nextjs` package to the latest version.
548545
- Increase Node.js memory limit: You can try increasing the memory limit for Node.js during the build process. Add this to your build command: `NODE_OPTIONS="--max-old-space-size=8192" next build`. This flag will increase the memory available to the node process to 8 GB. We have found that Next.js consumes around 4 GB in most cases. Decrease the size depending on your memory availability.
549546
- Disable source maps entirely: As a last resort, you can disable source map generation completely:

‎src/components/alert/index.tsx renamed to ‎src/components/alert.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import {
55
InfoCircledIcon,
66
} from '@radix-ui/react-icons';
77

8-
// explicitly not usig CSS modules here
9-
// because there's some prerendered content that depends on these exact class names
10-
import './styles.scss';
8+
import {Callout} from './callout';
119

1210
type AlertProps = {
1311
children?: ReactNode;
@@ -29,13 +27,9 @@ export function Alert({title, children, level = 'info'}: AlertProps) {
2927
}
3028

3129
return (
32-
<div className={`alert ${'alert-' + level}`} role="alert">
33-
<Icon className="alert-icon" />
34-
<div className="alert-content">
35-
{title && <h5 className="alert-header">{title}</h5>}
36-
<div className="alert-body content-flush-bottom">{children}</div>
37-
</div>
38-
</div>
30+
<Callout role="alert" level={level} Icon={Icon} title={title}>
31+
{children}
32+
</Callout>
3933
);
4034
}
4135

‎src/components/alert/styles.scss

-57
This file was deleted.

‎src/components/callout/index.tsx

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import {
2+
ForwardRefExoticComponent,
3+
MouseEventHandler,
4+
ReactNode,
5+
useCallback,
6+
} from 'react';
7+
8+
// explicitly not usig CSS modules here
9+
// because there's some prerendered content that depends on these exact class names
10+
import './styles.scss';
11+
12+
type CalloutProps = {
13+
Icon: ForwardRefExoticComponent<any>;
14+
children?: ReactNode;
15+
/** If defined, the title of the callout will receive this ID and render a link to this ID. */
16+
id?: string;
17+
level?: 'info' | 'warning' | 'success';
18+
role?: string;
19+
title?: string;
20+
titleOnClick?: MouseEventHandler;
21+
};
22+
23+
function Header({
24+
title,
25+
id,
26+
onClick,
27+
}: {
28+
title: string;
29+
id?: string;
30+
onClick?: MouseEventHandler;
31+
}) {
32+
// We want to avoid actually triggering the link
33+
const preventDefaultOnClick = useCallback(
34+
(event: React.MouseEvent) => {
35+
if (!onClick) {
36+
return;
37+
}
38+
39+
event.preventDefault();
40+
onClick(event);
41+
},
42+
[onClick]
43+
);
44+
45+
if (!id) {
46+
return (
47+
<h5
48+
className="callout-header"
49+
onClick={onClick}
50+
role={onClick ? 'button' : undefined}
51+
>
52+
{title}
53+
</h5>
54+
);
55+
}
56+
57+
return (
58+
<h5 className="callout-header" id={id}>
59+
<a href={'#' + id} onClick={preventDefaultOnClick}>
60+
{title}
61+
</a>
62+
</h5>
63+
);
64+
}
65+
66+
export function Callout({
67+
title,
68+
children,
69+
level = 'info',
70+
Icon,
71+
role,
72+
id,
73+
titleOnClick,
74+
}: CalloutProps) {
75+
return (
76+
<div className={`callout ${'callout-' + level}`} role={role}>
77+
<Icon
78+
className="callout-icon"
79+
onClick={titleOnClick}
80+
role={titleOnClick ? 'button' : undefined}
81+
/>
82+
<div className="callout-content">
83+
{title && <Header title={title} id={id} onClick={titleOnClick} />}
84+
<div className="callout-body content-flush-bottom">{children}</div>
85+
</div>
86+
</div>
87+
);
88+
}

‎src/components/callout/styles.scss

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.callout {
2+
margin-bottom: 1rem;
3+
padding: 0.5rem 1rem;
4+
border-radius: 6px;
5+
display: flex;
6+
flex-direction: row;
7+
gap: 0.7rem;
8+
line-height: 1.75rem;
9+
border: 1px solid var(--callout-highlight-color);
10+
11+
p {
12+
margin-bottom: 1rem;
13+
margin-top: 0;
14+
}
15+
16+
strong {
17+
font-weight: 500;
18+
}
19+
20+
ul,
21+
ol {
22+
padding-inline-start: 2rem;
23+
margin-top: 0;
24+
margin-bottom: 1rem;
25+
}
26+
27+
li {
28+
padding-inline-start: 0;
29+
margin: 0;
30+
}
31+
32+
.callout-header {
33+
font-weight: 500;
34+
color: inherit;
35+
36+
& a {
37+
color: inherit;
38+
}
39+
40+
&[role="button"] {
41+
cursor: pointer;
42+
}
43+
}
44+
}
45+
46+
.callout-icon {
47+
flex: 1em 0 0;
48+
height: 1.75rem;
49+
color: var(--callout-highlight-color);
50+
51+
&[role="button"] {
52+
cursor: pointer;
53+
}
54+
}
55+
56+
.callout-content {
57+
min-width: 0;
58+
}
59+
60+
.callout-info {
61+
--callout-highlight-color: var(--accent-11);
62+
background: var(--accent-2);
63+
}
64+
65+
.callout-success {
66+
--callout-highlight-color: var(--successGreen);
67+
background: var(--successGreen);
68+
background: color-mix(in srgb, var(--successGreen), transparent 85%);
69+
}
70+
71+
.callout-warning {
72+
--callout-highlight-color: var(--amber-10);
73+
background: var(--amber-2);
74+
}

0 commit comments

Comments
 (0)