fix: release docs (#9139)

snowystinger · web-flow · commit 80045dc693bd · 2025-11-04T22:12:06.000Z
* fix: release docs

* show releases in the search and sort them to the end and by date

* fix links and horizontal scrollbar in examples

* generalize the up one level

* fix colors

* fix lint

* make it look like a multiline spectrum breadcrumb

* remove console.log
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'December 20, 2023';
 export const title = 'v1.0.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'February 13, 2024';
 export const title = 'v1.1.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'June 5, 2025';
 export const title = 'v1.10.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2025';
 export const title = 'v1.11.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'August 25, 2025';
 export const title = 'v1.12.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
@@ -14,7 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import {ReleasedVersions} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'October 2, 2025';
 export const title = 'v1.13.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 1, 2024';
 export const title = 'v1.2.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2024';
 export const title = 'v1.3.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'September 30, 2024';
 export const title = 'v1.4.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'November 20, 2024';
 export const title = 'v1.5.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'January 15, 2025';
 export const title = 'v1.6.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
@@ -14,7 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import datepickerImage from 'url:../assets/datepicker-rtl.png';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'March 5, 2025';
 export const title = 'v1.7.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'April 11, 2025';
 export const title = 'v1.8.0';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 19, 2025';
 export const title = 'v1.9.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 17, 2024';
 export const title = 'v0.1.0';
@@ -26,15 +26,15 @@ export const isSubpage = true;
 Version 0.1.0 introduces the first version of Spectrum 2, including new Badge, ComboBox, Meter, and Picker components.
 
 ## New components
-* [Badge](?path=/docs/badge--docs)
-* [ComboBox](?path=/docs/combobox--docs)
-* [Meter](?path=/docs/meter--docs)
-* [Picker](?path=/docs/picker--docs)
+* [Badge](../Badge.html)
+* [ComboBox](../ComboBox.html)
+* [Meter](../Meter.html)
+* [Picker](../Picker.html)
 
 ## Updates
-* [TagGroup](?path=/docs/taggroup--docs) now supports avatars, images, error message and description help text, and improved hover/focus styling
+* [TagGroup](../TagGroup.html) now supports avatars, images, error message and description help text, and improved hover/focus styling
 * Updated React Aria Components to v1.2.0
-* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](?path=/docs/intro--docs#unsafe-style-overrides) for more details.
+* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](../styling.html##unsafe-style-overrides) for more details.
 * The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.
 
-See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
+See the updated [API changelog](../migrating.html) for a full list of changes since RSP v3.
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'July 23, 2025';
 export const title = 'v0.10.0';
@@ -29,7 +29,7 @@ Version 0.10.0 introduces a new font for Spectrum 2: Adobe Clean Spectrum VF, al
 
 This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.
 
-If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [Intro](../index.html#setting-up-your-app) for details.
+If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [Getting Started](../getting-started.html#optimizing-full-page-apps) guide for details.
 
 ## New Components
 * [Calendar](../Calendar.html)
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 26, 2025';
 export const title = 'v0.11.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 3, 2025';
 export const title = 'v0.12.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'Jun 15, 2024';
 export const title = 'v0.2.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 20, 2024';
 export const title = 'v0.3.0';
@@ -27,15 +27,15 @@ Version 0.3.0 introduces NumberField, AlertDialog, and Tabs components, along wi
 
 ## New components
 * [NumberField](../NumberField.html)
-* [AlertDialog](../AlertDialog.html)
-* [Linear and gradient illustrations](../illustrations.html)
+* [AlertDialog](../Dialog.html#alertdialog)
+* [Linear and gradient illustrations](../Illustrations.html)
 * [AvatarGroup](../AvatarGroup.html)
 * [Tabs](../Tabs.html)
 
 ## Updates
 * Add collapse and action support to TagGroup
 * Add support for new Adobe Clean variable font
-* Updated [workflow icons](../workflow-icons.html) – **PLEASE NOTE**: some icons changed names in this release.
+* Updated [workflow icons](../Icons.html) – **PLEASE NOTE**: some icons changed names in this release.
 * Add CLI and Parcel plugins to build custom icons and illustrations
 * Add translations for all components
 * Add slot contexts to all S2 components
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 1, 2024';
 export const title = 'v0.4.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'November 22, 2024';
 export const title = 'v0.5.0';
@@ -28,8 +28,8 @@ Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four
 In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:
 
 * [Dialog](../Dialog.html) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
-* [FullscreenDialog](../FullscreenDialog.html) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
-* [CustomDialog](../Dialog.html#custom-dialog) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
+* [FullscreenDialog](../Dialog.html#fullscreendialog) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
+* [CustomDialog](../Dialog.html#customdialog) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
 * [Popover](../Popover.html) – Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.
 
 In addition, several DialogTrigger props have moved to the above children:
@@ -40,16 +40,16 @@ In addition, several DialogTrigger props have moved to the above children:
 * `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
 
 We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
-[colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
-these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](?path=/docs/style-macro--docs#sizing)
-for more information. Finally, documentation on [optimizing CSS bundling](?path=/docs/style-macro--docs#css-optimization) have also been
+[colors](../styling.html#colors) and [typography](../styling.html#typography) have been added to help clarify
+these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](../styling.html#sizing)
+for more information. Finally, documentation on [optimizing CSS bundling](../styling.html#css-optimization) have also been
 added to help you generate a properly optimized output when using the bundler of your choice.
 
 ## New components
 * [ActionButtonGroup](../ActionButtonGroup.html)
-* [CloseButton](../Dialog.html#custom-dialog)
-* [CustomDialog](../Dialog.html#custom-dialog)
-* [FullscreenDialog](../FullscreenDialog.html)
+* [CloseButton](../Dialog.html#customdialog)
+* [CustomDialog](../Dialog.html#customdialog)
+* [FullscreenDialog](../Dialog.html#fullscreendialog)
 * [Popover](../Popover.html)
 * [ToggleButtonGroup](../ToggleButtonGroup.html)
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'January 16, 2025';
 export const title = 'v0.6.0';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'March 7, 2025';
 export const title = 'v0.7.0';
@@ -45,6 +45,6 @@ Version 0.7.0 introduces the TreeView component and includes important CSS updat
 
 In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.
 
-To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See the [Intro](../index.html#css-resets) for more information.
+To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See the [Getting Started](../styling.html#css-resets) guide for more information.
 
 **If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'April 12, 2025';
 export const title = 'v0.8.0';
@@ -26,7 +26,7 @@ export const isSubpage = true;
 Version 0.8.0 introduces NotificationBadge and Toast (alpha) components, along with updates to Disclosure design sizing. This release also includes various component improvements and new exports.
 
 ## New Components
-* [NotificationBadge](../ActionButton.html#notification-badges)
+* [NotificationBadge](../ActionButton.html)
 * [Toast](../Toast.html) (alpha)
 
 ## Updates
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 20, 2025';
 export const title = 'v0.9.0';
@@ -37,7 +37,7 @@ Version 0.9.0 adds virtualization and async loading support to ComboBox and Pick
 
 Style macros passed to `UNSAFE_className` will now result in a TypeScript error. This is not allowed because `UNSAFE_className` is appended to the component's own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.
 
-We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](../index.html#styling) can be passed to the `styles` prop of an S2 component.
+We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](../styling.html#style-macro) to create custom components. [Safe style properties](../styling.html#values) can be passed to the `styles` prop of an S2 component.
 
 
 ## Style macro updates
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'June 6, 2025';
 export const title = 'v0.9.1';
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
diff --git a/packages/dev/s2-docs/src/GoUpOneLink.tsx b/packages/dev/s2-docs/src/GoUpOneLink.tsx
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
