chore: new docs releases subpage navigate up

Author: snowystinger

packages/dev/s2-docs/package.json

@@ -38,6 +38,7 @@
  "@react-spectrum/utils": "^3.12.6",
  "@react-types/shared": "^3.30.0",
  "@react-types/textfield": "^3.12.3",
+ "@spectrum-icons/workflow": "^4.2.25",
  "emojibase-data": "^16.0.3",
  "fast-glob": "^3.3.3",
  "globals-docs": "^2.4.1",

packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx

@@ -15,6 +15,7 @@ import {Time} from '../../../src/ReleasesList';
 import {ReleasedVersions} from '../../../src/ReleasesList';
 
 export const section = '';
+export const isSubpage = true;
 export const tags = ['release', 'React Aria'];
 export const date = 'October 2, 2025';
 export const title = 'v1.13.0';

packages/dev/s2-docs/src/GoUpOneLink.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import {ButtonRenderProps, Link, Provider} from 'react-aria-components';
+import {baseColor, focusRing, fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' };
+import ChevronLeftIcon from '@react-spectrum/s2/icons/ChevronLeft';
+import { IconContext } from '@react-spectrum/s2';
+import { centerBaseline } from '../../../@react-spectrum/s2/src/CenterBaseline';
+import React from 'react';
+import { control } from '../../../@react-spectrum/s2/src/style-utils' with { type: 'macro' };
+
+
+const controlStyle = control({shape: 'default', icon: true});
+export const btnStyles = style<ButtonRenderProps>({
+ ...focusRing(),
+ ...controlStyle,
+ position: 'relative',
+ justifyContent: 'center',
+ flexShrink: 0,
+ fontWeight: 'medium',
+ userSelect: 'none',
+ transition: 'default',
+ forcedColorAdjust: 'none',
+ backgroundColor: {
+ default: 'transparent',
+ forcedColors: {
+ default: 'ButtonFace'
+ }
+ },
+ color: {
+ default: baseColor('neutral'),
+ isDisabled: 'disabled',
+ forcedColors: {
+ default: 'ButtonText',
+ isDisabled: {
+ default: 'GrayText'
+ }
+ }
+ },
+ '--iconPrimary': {
+ type: 'fill',
+ value: 'currentColor'
+ },
+ outlineColor: {
+ default: 'focus-ring',
+ forcedColors: 'Highlight'
+ },
+ borderStyle: 'none',
+ disableTapHighlight: true,
+ '--iconWidth': {
+ type: 'width',
+ value: fontRelative(20)
+ }
+});
+
+export function GoUpOneLink() {
+ return (
+ <Link href="/">
+ <Provider
+ values={[
+ [IconContext, {
+ render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+ styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+ }]
+ ]}>
+ <ChevronLeftIcon />
+ </Provider>
+ </Link>
+ );
+}

packages/dev/s2-docs/src/Layout.tsx

@@ -16,6 +16,7 @@ import {CodePlatterProvider} from './CodePlatter';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
 import {getTextWidth} from './textWidth';
+import {GoUpOneLink} from './GoUpOneLink';
 import {H2, H3, H4} from './Headings';
 import Header from './Header';
 import {Link} from './Link';
@@ -63,6 +64,16 @@ const components = {
  ExampleList
 };
 
+const subPageComponents = {
+ ...components,
+ h1: ({children, ...props}) => (
+ <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+ <GoUpOneLink />
+ <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>
+ </div>
+ )
+};
+
 function anchorId(children) {
  return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
 }
@@ -128,6 +139,7 @@ let articleStyles = style({
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
  let {pages, currentPage, children} = props;
  let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
+ let isSubpage = currentPage.exports?.isSubpage;
  let library = getLibraryLabel(getLibraryFromPage(currentPage));
  let keywords = [...new Set((currentPage.exports?.keywords ?? []).concat([library]).filter(k => !!k))];
  let ogImage = getOgImageUrl(currentPage);
@@ -243,7 +255,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
  <article
  className={articleStyles({isWithToC: hasToC})}>
  {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
- {React.cloneElement(children, {components, pages})}
+ {React.cloneElement(children, {components: isSubpage ? subPageComponents : components, pages})}
  </article>
  </CodePlatterProvider>
  {hasToC && <aside