Skip to content

Commit 4949c57

Browse files
atomiksatomiks
authored
[docs] Use real links in Drawer and Dialog docs examples (#4326)
1 parent e486c5c commit 4949c57

File tree

5 files changed

+148
-18
lines changed

5 files changed

+148
-18
lines changed

‎docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,3 +252,21 @@
252252
line-height: 1.5rem;
253253
color: var(--color-gray-600);
254254
}
255+
256+
.FooterLink {
257+
color: var(--color-gray-900);
258+
text-decoration-thickness: 1px;
259+
text-underline-offset: 0.16em;
260+
261+
@media (hover: hover) {
262+
&:hover {
263+
text-decoration: none;
264+
}
265+
}
266+
267+
&:focus-visible {
268+
outline: 2px solid var(--color-blue);
269+
outline-offset: 2px;
270+
border-radius: 0.125rem;
271+
}
272+
}

‎docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,19 @@ export default function OutsideScrollDialog() {
3636
</section>
3737
))}
3838
</div>
39+
40+
<p className={styles.FooterNote}>
41+
Related docs:{' '}
42+
{RELATED_LINKS.map((item, index) => (
43+
<React.Fragment key={item.href}>
44+
{index > 0 ? ', ' : null}
45+
<a className={styles.FooterLink} href={item.href}>
46+
{item.label}
47+
</a>
48+
</React.Fragment>
49+
))}
50+
.
51+
</p>
3952
</Dialog.Popup>
4053
</ScrollArea.Content>
4154
</ScrollArea.Viewport>
@@ -155,3 +168,9 @@ const CONTENT_SECTIONS = [
155168
body: 'After a successful action, close the dialog and show confirmation in context (toast, inline message, or updated UI) so people can see the result of what they just did.',
156169
},
157170
];
171+
172+
const RELATED_LINKS = [
173+
{ href: '/react/components/scroll-area', label: 'Scroll Area' },
174+
{ href: '/react/components/drawer', label: 'Drawer' },
175+
{ href: '/react/components/popover', label: 'Popover' },
176+
] as const;

‎docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,22 @@ export default function OutsideScrollDialog() {
5353
</section>
5454
))}
5555
</div>
56+
57+
<p className="m-0 mb-6 text-[0.95rem] leading-6 text-gray-600">
58+
Related docs:{' '}
59+
{RELATED_LINKS.map((item, index) => (
60+
<React.Fragment key={item.href}>
61+
{index > 0 ? ', ' : null}
62+
<a
63+
className="text-gray-900 underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:rounded-[0.125rem] focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
64+
href={item.href}
65+
>
66+
{item.label}
67+
</a>
68+
</React.Fragment>
69+
))}
70+
.
71+
</p>
5672
</Dialog.Popup>
5773
</ScrollArea.Content>
5874
</ScrollArea.Viewport>
@@ -172,3 +188,9 @@ const CONTENT_SECTIONS = [
172188
body: 'After a successful action, close the dialog and show confirmation in context (toast, inline message, or updated UI) so people can see the result of what they just did.',
173189
},
174190
];
191+
192+
const RELATED_LINKS = [
193+
{ href: '/react/components/scroll-area', label: 'Scroll Area' },
194+
{ href: '/react/components/drawer', label: 'Drawer' },
195+
{ href: '/react/components/popover', label: 'Popover' },
196+
] as const;

‎docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,50 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
55
import styles from './index.module.css';
66

77
const ITEMS = [
8-
{ href: '#', label: 'Overview' },
9-
{ href: '#', label: 'Components' },
10-
{ href: '#', label: 'Utilities' },
11-
{ href: '#', label: 'Releases' },
8+
{ href: '/react/overview', label: 'Overview' },
9+
{ href: '/react/components', label: 'Components' },
10+
{ href: '/react/utils', label: 'Utilities' },
11+
{ href: '/react/overview/releases', label: 'Releases' },
1212
] as const;
1313

14-
const LONG_LIST = Array.from({ length: 50 }, (_, i) => ({
15-
href: '#',
16-
label: `Item ${i + 1}`,
17-
}));
14+
const LONG_LIST = [
15+
{ href: '/react/components/accordion', label: 'Accordion' },
16+
{ href: '/react/components/alert-dialog', label: 'Alert Dialog' },
17+
{ href: '/react/components/autocomplete', label: 'Autocomplete' },
18+
{ href: '/react/components/avatar', label: 'Avatar' },
19+
{ href: '/react/components/button', label: 'Button' },
20+
{ href: '/react/components/checkbox', label: 'Checkbox' },
21+
{ href: '/react/components/checkbox-group', label: 'Checkbox Group' },
22+
{ href: '/react/components/collapsible', label: 'Collapsible' },
23+
{ href: '/react/components/combobox', label: 'Combobox' },
24+
{ href: '/react/components/context-menu', label: 'Context Menu' },
25+
{ href: '/react/components/dialog', label: 'Dialog' },
26+
{ href: '/react/components/drawer', label: 'Drawer' },
27+
{ href: '/react/components/field', label: 'Field' },
28+
{ href: '/react/components/fieldset', label: 'Fieldset' },
29+
{ href: '/react/components/form', label: 'Form' },
30+
{ href: '/react/components/input', label: 'Input' },
31+
{ href: '/react/components/menu', label: 'Menu' },
32+
{ href: '/react/components/menubar', label: 'Menubar' },
33+
{ href: '/react/components/meter', label: 'Meter' },
34+
{ href: '/react/components/navigation-menu', label: 'Navigation Menu' },
35+
{ href: '/react/components/number-field', label: 'Number Field' },
36+
{ href: '/react/components/popover', label: 'Popover' },
37+
{ href: '/react/components/preview-card', label: 'Preview Card' },
38+
{ href: '/react/components/progress', label: 'Progress' },
39+
{ href: '/react/components/radio', label: 'Radio' },
40+
{ href: '/react/components/scroll-area', label: 'Scroll Area' },
41+
{ href: '/react/components/select', label: 'Select' },
42+
{ href: '/react/components/separator', label: 'Separator' },
43+
{ href: '/react/components/slider', label: 'Slider' },
44+
{ href: '/react/components/switch', label: 'Switch' },
45+
{ href: '/react/components/tabs', label: 'Tabs' },
46+
{ href: '/react/components/toast', label: 'Toast' },
47+
{ href: '/react/components/toggle', label: 'Toggle' },
48+
{ href: '/react/components/toggle-group', label: 'Toggle Group' },
49+
{ href: '/react/components/toolbar', label: 'Toolbar' },
50+
{ href: '/react/components/tooltip', label: 'Tooltip' },
51+
] as const;
1852

1953
export default function ExampleDrawerMobileNav() {
2054
return (
@@ -61,7 +95,7 @@ export default function ExampleDrawerMobileNav() {
6195
))}
6296
</ul>
6397

64-
<ul className={styles.LongList} aria-label="Long list">
98+
<ul className={styles.LongList} aria-label="Component links">
6599
{LONG_LIST.map((item) => (
66100
<li key={item.label} className={styles.Item}>
67101
<a className={styles.Link} href={item.href}>

‎docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,50 @@ import { Drawer } from '@base-ui/react/drawer';
44
import { ScrollArea } from '@base-ui/react/scroll-area';
55

66
const ITEMS = [
7-
{ href: '#', label: 'Overview' },
8-
{ href: '#', label: 'Components' },
9-
{ href: '#', label: 'Utilities' },
10-
{ href: '#', label: 'Releases' },
7+
{ href: '/react/overview', label: 'Overview' },
8+
{ href: '/react/components', label: 'Components' },
9+
{ href: '/react/utils', label: 'Utilities' },
10+
{ href: '/react/overview/releases', label: 'Releases' },
1111
] as const;
1212

13-
const LONG_LIST = Array.from({ length: 50 }, (_, i) => ({
14-
href: '#',
15-
label: `Item ${i + 1}`,
16-
}));
13+
const LONG_LIST = [
14+
{ href: '/react/components/accordion', label: 'Accordion' },
15+
{ href: '/react/components/alert-dialog', label: 'Alert Dialog' },
16+
{ href: '/react/components/autocomplete', label: 'Autocomplete' },
17+
{ href: '/react/components/avatar', label: 'Avatar' },
18+
{ href: '/react/components/button', label: 'Button' },
19+
{ href: '/react/components/checkbox', label: 'Checkbox' },
20+
{ href: '/react/components/checkbox-group', label: 'Checkbox Group' },
21+
{ href: '/react/components/collapsible', label: 'Collapsible' },
22+
{ href: '/react/components/combobox', label: 'Combobox' },
23+
{ href: '/react/components/context-menu', label: 'Context Menu' },
24+
{ href: '/react/components/dialog', label: 'Dialog' },
25+
{ href: '/react/components/drawer', label: 'Drawer' },
26+
{ href: '/react/components/field', label: 'Field' },
27+
{ href: '/react/components/fieldset', label: 'Fieldset' },
28+
{ href: '/react/components/form', label: 'Form' },
29+
{ href: '/react/components/input', label: 'Input' },
30+
{ href: '/react/components/menu', label: 'Menu' },
31+
{ href: '/react/components/menubar', label: 'Menubar' },
32+
{ href: '/react/components/meter', label: 'Meter' },
33+
{ href: '/react/components/navigation-menu', label: 'Navigation Menu' },
34+
{ href: '/react/components/number-field', label: 'Number Field' },
35+
{ href: '/react/components/popover', label: 'Popover' },
36+
{ href: '/react/components/preview-card', label: 'Preview Card' },
37+
{ href: '/react/components/progress', label: 'Progress' },
38+
{ href: '/react/components/radio', label: 'Radio' },
39+
{ href: '/react/components/scroll-area', label: 'Scroll Area' },
40+
{ href: '/react/components/select', label: 'Select' },
41+
{ href: '/react/components/separator', label: 'Separator' },
42+
{ href: '/react/components/slider', label: 'Slider' },
43+
{ href: '/react/components/switch', label: 'Switch' },
44+
{ href: '/react/components/tabs', label: 'Tabs' },
45+
{ href: '/react/components/toast', label: 'Toast' },
46+
{ href: '/react/components/toggle', label: 'Toggle' },
47+
{ href: '/react/components/toggle-group', label: 'Toggle Group' },
48+
{ href: '/react/components/toolbar', label: 'Toolbar' },
49+
{ href: '/react/components/tooltip', label: 'Tooltip' },
50+
] as const;
1751

1852
export default function ExampleDrawerMobileNav() {
1953
return (
@@ -76,7 +110,10 @@ export default function ExampleDrawerMobileNav() {
76110
))}
77111
</ul>
78112

79-
<ul aria-label="Long list" className="mt-6 grid list-none gap-1 p-0 m-0">
113+
<ul
114+
aria-label="Component links"
115+
className="mt-6 grid list-none gap-1 p-0 m-0"
116+
>
80117
{LONG_LIST.map((item) => (
81118
<li key={item.label} className="flex">
82119
<a

0 commit comments

Comments
 (0)