From 268d5c90e12bb723fad1ae4471696dd84f456b9a Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Tue, 18 Nov 2025 13:59:36 +1100 Subject: [PATCH 1/3] chore: add links to old docs for hooks we haven't migrated yet --- .../s2-docs/pages/react-aria/Breadcrumbs.mdx | 1 + .../dev/s2-docs/pages/react-aria/Button.mdx | 1 + .../dev/s2-docs/pages/react-aria/Calendar.mdx | 7 ++-- .../dev/s2-docs/pages/react-aria/Checkbox.mdx | 3 +- .../pages/react-aria/CheckboxGroup.mdx | 1 + .../s2-docs/pages/react-aria/ColorArea.mdx | 1 + .../s2-docs/pages/react-aria/ColorField.mdx | 3 +- .../s2-docs/pages/react-aria/ColorPicker.mdx | 3 +- .../s2-docs/pages/react-aria/ColorSlider.mdx | 1 + .../s2-docs/pages/react-aria/ColorSwatch.mdx | 1 + .../s2-docs/pages/react-aria/ColorWheel.mdx | 1 + .../dev/s2-docs/pages/react-aria/ComboBox.mdx | 1 + .../s2-docs/pages/react-aria/DateField.mdx | 3 +- .../s2-docs/pages/react-aria/DatePicker.mdx | 3 +- .../pages/react-aria/DateRangePicker.mdx | 3 +- .../s2-docs/pages/react-aria/Disclosure.mdx | 1 + .../pages/react-aria/DisclosureGroup.mdx | 1 + .../dev/s2-docs/pages/react-aria/DropZone.mdx | 3 +- .../dev/s2-docs/pages/react-aria/GridList.mdx | 1 + .../dev/s2-docs/pages/react-aria/Link.mdx | 1 + .../dev/s2-docs/pages/react-aria/ListBox.mdx | 1 + .../dev/s2-docs/pages/react-aria/Menu.mdx | 1 + .../dev/s2-docs/pages/react-aria/Meter.mdx | 1 + .../dev/s2-docs/pages/react-aria/Modal.mdx | 1 + .../s2-docs/pages/react-aria/NumberField.mdx | 1 + .../dev/s2-docs/pages/react-aria/Popover.mdx | 1 + .../s2-docs/pages/react-aria/ProgressBar.mdx | 1 + .../s2-docs/pages/react-aria/RadioGroup.mdx | 1 + .../pages/react-aria/RangeCalendar.mdx | 7 ++-- .../s2-docs/pages/react-aria/SearchField.mdx | 3 +- .../dev/s2-docs/pages/react-aria/Select.mdx | 3 +- .../dev/s2-docs/pages/react-aria/Slider.mdx | 1 + .../dev/s2-docs/pages/react-aria/Switch.mdx | 3 +- .../dev/s2-docs/pages/react-aria/Table.mdx | 3 +- .../dev/s2-docs/pages/react-aria/Tabs.mdx | 3 +- .../dev/s2-docs/pages/react-aria/TagGroup.mdx | 1 + .../s2-docs/pages/react-aria/TextField.mdx | 3 +- .../s2-docs/pages/react-aria/TimeField.mdx | 3 +- .../s2-docs/pages/react-aria/ToggleButton.mdx | 1 + .../pages/react-aria/ToggleButtonGroup.mdx | 1 + .../dev/s2-docs/pages/react-aria/Toolbar.mdx | 1 + .../dev/s2-docs/pages/react-aria/Tooltip.mdx | 1 + packages/dev/s2-docs/src/Layout.tsx | 7 ++-- packages/dev/s2-docs/src/OptimisticToc.tsx | 36 ++++++++++++++++--- packages/dev/s2-docs/src/ScrollableToc.tsx | 7 ++-- 45 files changed, 102 insertions(+), 30 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index db4c779ced7..28d18faa40e 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -7,6 +7,7 @@ import Anatomy from '@react-aria/breadcrumbs/docs/anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['navigation']; +export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html'}]; # Breadcrumbs diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index cae4699180f..adfb0be0c48 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -12,6 +12,7 @@ import '../../tailwind/tailwind.css'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; export const tags = ['btn']; +export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}]; # Button diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index 37de09881a0..8ff28724973 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg'; export const tags = ['date']; +export const relatedPages = [{'title': 'useCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useCalendar.html'}]; # Calendar @@ -45,7 +46,7 @@ import {useState} from 'react'; function Example() { let [date, setDate] = useState(parseDate('2020-02-03')); let formatter = useDateFormatter({ dateStyle: 'full' }); - + return ( <> (
- {i === 0 && + {i === 0 && } {monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))} - {i === props.visibleDuration.months - 1 && + {i === props.visibleDuration.months - 1 && diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx index 42195a062d2..b6b324bd59b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx @@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg'; export const tags = ['input']; +export const relatedPages = [{'title': 'useCheckbox', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckbox.html'}]; # Checkbox @@ -46,7 +47,7 @@ function Example(props) { return ( <> - - ( ['text/plain', 'image/jpeg', 'image/png', 'image.gif'].some(t => types.has(t)) - ? 'copy' + ? 'copy' : 'cancel' )} onDrop={async (event) => { diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 5f86d9bf1dd..b6b262272e9 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/GridListAnatomy.svg'; export const tags = ['list view']; +export const relatedPages = [{'title': 'useGridList', 'url': 'https://react-spectrum.adobe.com/react-aria/useGridList.html'}]; # GridList diff --git a/packages/dev/s2-docs/pages/react-aria/Link.mdx b/packages/dev/s2-docs/pages/react-aria/Link.mdx index e0e725efa10..2e9c5308a2c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Link.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Link.mdx @@ -8,6 +8,7 @@ import tailwindDocs from 'docs:tailwind-starter/Link'; import '../../tailwind/tailwind.css'; export const tags = ['anchor', 'hyperlink', 'href']; +export const relatedPages = [{'title': 'useLink', 'url': 'https://react-spectrum.adobe.com/react-aria/useLink.html'}]; # Link diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index 93fbcd78ccf..19a488f91be 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -9,6 +9,7 @@ import Anatomy from 'react-aria-components/docs/ListBoxAnatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['options']; +export const relatedPages = [{'title': 'useListBox', 'url': 'https://react-spectrum.adobe.com/react-aria/useListBox.html'}]; # ListBox diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index d20963fb7a2..9208e444b51 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -7,6 +7,7 @@ import Anatomy from 'react-aria-components/docs/MenuAnatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['dropdown']; +export const relatedPages = [{'title': 'useMenu', 'url': 'https://react-spectrum.adobe.com/react-aria/useMenu.html'}]; # Menu diff --git a/packages/dev/s2-docs/pages/react-aria/Meter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter.mdx index b63416e706e..249980dbe37 100644 --- a/packages/dev/s2-docs/pages/react-aria/Meter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Meter.mdx @@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/meter/docs/anatomy.svg'; export const tags = ['gauge', 'progress', 'level']; +export const relatedPages = [{'title': 'useMeter', 'url': 'https://react-spectrum.adobe.com/react-aria/useMeter.html'}]; # Meter diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index 4d661b6f9c7..14e1876af64 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -8,6 +8,7 @@ import Anatomy from '@react-aria/overlays/docs/modal-anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['dialog', 'popup', 'overlay']; +export const relatedPages = [{'title': 'useModalOverlay', 'url': 'https://react-spectrum.adobe.com/react-aria/useModalOverlay.html'}]; # Modal diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx index 33e2dba7671..3331df35bcf 100644 --- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx @@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/numberfield/docs/anatomy.svg'; export const tags = ['input']; +export const relatedPages = [{'title': 'useNumberField', 'url': 'https://react-spectrum.adobe.com/react-aria/useNumberField.html'}]; # NumberField diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index fba0b924482..17bc2912a0a 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -8,6 +8,7 @@ import Anatomy from '@react-aria/overlays/docs/popover-anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['popup', 'overlay']; +export const relatedPages = [{'title': 'usePopover', 'url': 'https://react-spectrum.adobe.com/react-aria/usePopover.html'}]; # Popover diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx index 5acb1cbbfe0..f6f8756b30d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx @@ -11,6 +11,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/progress/docs/anatomy.svg'; export const tags = ['loading', 'progress']; +export const relatedPages = [{'title': 'useProgressBar', 'url': 'https://react-spectrum.adobe.com/react-aria/useProgressBar.html'}]; # ProgressBar diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index c412c6dd29a..08fe09aab32 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/radio/docs/anatomy.svg'; export const tags = ['input']; +export const relatedPages = [{'title': 'useRadioGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'}, {'title': 'useRadio', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadio.html'}]; # RadioGroup diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index b189c1b42d1..c9407ede315 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/calendar/docs/rangecalendar-anatomy.svg'; export const tags = ['calendar']; +export const relatedPages = [{'title': 'useRangeCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html'}]; # RangeCalendar @@ -48,7 +49,7 @@ function Example() { end: parseDate('2025-02-12') }); let formatter = useDateFormatter({ dateStyle: 'long' }); - + return ( <> (
- {i === 0 && + {i === 0 && } {monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))} - {i === props.visibleDuration.months - 1 && + {i === props.visibleDuration.months - 1 && diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx index b04f33820e0..325f2a2383a 100644 --- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx @@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/searchfield/docs/anatomy.svg'; export const tags = ['input']; +export const relatedPages = [{'title': 'useSearchField', 'url': 'https://react-spectrum.adobe.com/react-aria/useSearchField.html'}]; # SearchField @@ -45,7 +46,7 @@ import {useState} from 'react'; function Example() { let [search, setSearch] = useState(''); let [submittedSearch, setSubmittedSearch] = useState(''); - + return (
- -
- lg: 'none' } })}> -

Related pages

-
    + +
      {pages.map((page, i) => (

    • @@ -374,6 +374,7 @@ function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>

); } + export function Time({date}: {date: string}) { let dateObj = new Date(date); return ( diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx index 340c18845bd..812611a1f95 100644 --- a/packages/dev/s2-docs/src/OptimisticToc.tsx +++ b/packages/dev/s2-docs/src/OptimisticToc.tsx @@ -46,12 +46,15 @@ function renderMobileToc(toc: TocNode[], seen = new Map()) { export function OptimisticToc({currentPage, pages}: {currentPage: Page, pages: Page[]}) { let pendingPage = usePendingPage(pages); let displayPage = pendingPage ?? currentPage; - + return ( <>
On this page
+ {currentPage.exports?.relatedPages && ( + + )}
@@ -61,17 +64,42 @@ export function OptimisticToc({currentPage, pages}: {currentPage: Page, pages: P ); } +function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) { + return ( +
+
Related pages
+ + + {pages.map((page, i) => ( + + {page.title} + + ))} + + +
+ ); +} + export function OptimisticMobileToc({currentPage, pages}: {currentPage: Page, pages: Page[]}) { let pendingPage = usePendingPage(pages); let displayPage = pendingPage ?? currentPage; - + if ((displayPage.tableOfContents?.[0]?.children?.length ?? 0) <= 1) { return null; } - + + let withRelatedPages = displayPage.exports?.relatedPages ? [ + ...(displayPage.tableOfContents ?? []), + { + level: 2, + title: 'Related pages', + children: [] + }] : displayPage.tableOfContents!; + return ( - {renderMobileToc(displayPage.tableOfContents ?? [])} + {renderMobileToc(withRelatedPages)} ); } diff --git a/packages/dev/s2-docs/src/ScrollableToc.tsx b/packages/dev/s2-docs/src/ScrollableToc.tsx index 514c0d0a278..0f447b5bd6f 100644 --- a/packages/dev/s2-docs/src/ScrollableToc.tsx +++ b/packages/dev/s2-docs/src/ScrollableToc.tsx @@ -13,7 +13,7 @@ export function ScrollableToc({children}) { let scrollHeight = element.scrollHeight; let clientHeight = element.clientHeight; let distanceFromBottom = scrollHeight - scrollTop - clientHeight; - + setTopMaskSize(Math.min(scrollTop, 32)); setBottomMaskSize(Math.min(distanceFromBottom, 32)); }; @@ -51,8 +51,9 @@ export function ScrollableToc({children}) { }} className={style({ overflowY: 'auto', - flex: 1, - minHeight: 0 + flexShrink: 1, + minHeight: 0, + maxHeight: '100%' })}> {children}
From aa2cb11940adc3e42618020942417f90d00414b9 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 18 Nov 2025 11:44:26 -0800 Subject: [PATCH 2/3] fix lint --- packages/dev/s2-docs/src/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx index daf99c365c5..f4221173737 100644 --- a/packages/dev/s2-docs/src/Layout.tsx +++ b/packages/dev/s2-docs/src/Layout.tsx @@ -1,5 +1,5 @@ import {ExampleList} from './ExampleList'; -import {Nav, OnPageNav, SideNav, SideNavItem, SideNavLink} from '../src/Nav'; +import {Nav} from '../src/Nav'; import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc'; import type {Page, PageProps} from '@parcel/rsc'; import React, {ReactElement} from 'react'; From 13492b487dd207264954fb827d843d539c56cd77 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 18 Nov 2025 11:52:39 -0800 Subject: [PATCH 3/3] removing links to non-existant pages --- packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/Tooltip.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index 08fe09aab32..7483ae74df8 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -7,7 +7,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/radio/docs/anatomy.svg'; export const tags = ['input']; -export const relatedPages = [{'title': 'useRadioGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'}, {'title': 'useRadio', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadio.html'}]; +export const relatedPages = [{'title': 'useRadioGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'}]; # RadioGroup diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index 4147195db34..da719e7d468 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -8,7 +8,7 @@ import Anatomy from '@react-aria/tooltip/docs/anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['hint', 'popup', 'info']; -export const relatedPages = [{'title': 'useTooltipTrigger', 'url': 'https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html'}, {'title': 'useTooltip', 'url': 'https://react-spectrum.adobe.com/react-aria/useTooltip.html'}]; +export const relatedPages = [{'title': 'useTooltipTrigger', 'url': 'https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html'}]; # Tooltip