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..7483ae74df8 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'}]; # 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}