docs: Update docs for new --page-height var and ComboBox actions #8955

LFDanLu · 2025-10-01T17:13:18Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

RSP

LFDanLu · 2025-10-01T17:16:08Z

packages/react-aria-components/docs/Modal.mdx

 By default, `Modal` includes a builtin `ModalOverlay`, which renders a backdrop over the page when a modal is open. This can be targeted using the `.react-aria-ModalOverlay` CSS selector. To customize the `ModalOverlay` with a different class name or other attributes, render a `ModalOverlay` and place a `Modal` inside.

-The `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile.
+The `--visual-viewport-height` and `--page-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile.


How much do we want to explain here? I debated whether or not to mention iOS 26 specifically (and thus explain the difference between the two properties here).

I think it would be useful to at least the explain the differences since it might not be immediately obvious

kk clarified the wording in the sentence and added a comment to the css example, hopefully that keeps it concise enough but distinguishes the two properties

rspbot · 2025-10-01T18:50:09Z

Build successful! 🎉

rspbot · 2025-10-01T18:55:54Z

Build successful! 🎉

devongovett · 2025-10-01T18:57:32Z

packages/react-aria-components/docs/ComboBox.mdx

 }
 ```

+## Row actions


Suggested change

## Row actions

## Item actions

devongovett · 2025-10-01T18:57:46Z

packages/react-aria-components/docs/ComboBox.mdx

+## Row actions
+
+By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items can also trigger a custom action instead via providing a `onAction` prop to the ListBoxItem.
+As shown in the example below, a "Create" action is added for the current input value. Note that interacting with said item does not update selection or the input value.


Can we copy the text I wrote for the new docs? This is a bit more verbose.

rspbot · 2025-10-01T20:00:55Z

Build successful! 🎉

snowystinger · 2025-10-01T20:10:40Z

packages/react-aria-components/docs/ComboBox.mdx


+## Item actions
+
+Use the `onAction` prop on a `<ListBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.


when the item is selected

isn't this a little misnomer? if it has an action, it doesn't get selected?

"activated" maybe? "triggered"?

or just "pressed"?

pressed is fine. you can update the new docs too if you want. fyi the same thing is in S2 and RAC docs.

rspbot · 2025-10-01T22:25:22Z

Build successful! 🎉

snowystinger · 2025-10-01T22:57:56Z

packages/react-aria-components/src/index.ts

 export {Heading} from './Heading';
 export {Input, InputContext} from './Input';
 export {Section, CollectionRendererContext, DefaultCollectionRenderer} from './Collection';
-export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections';


glad we don't use the UNSTABLE anywhere in our own code, but this could be problematic for libraries that are built on top of us
in order for this to stay non-breaking for semver, we need to keep the UNSTABLE as well :(

if you put the unstables on a separate line, maybe we can put a @deprecated comment before just them

urgh, that sucks. Doesn't look like the deprecated comment actually comes through when importing so I've omitted it for now

this one is not a cross-package dependency so it's ok to remove. If other teams are using it then they should be pinning their version of RAC. The original problem was that we were not pinning between our own dependencies.

rspbot · 2025-10-01T23:16:07Z

Build successful! 🎉

rspbot · 2025-10-01T23:16:08Z

## API Changes

react-aria-components

/react-aria-components:UNSTABLE_createLeafComponent

-UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
-  CollectionNodeClass: {}<any> | string
-  render: (P, ForwardedRef<E>, any) => ReactElement | null
-  returnVal: undefined
-}

/react-aria-components:UNSTABLE_createBranchComponent

-UNSTABLE_createBranchComponent <E extends Element, P extends {
-    children?: any
-}, T extends {}> {
-  CollectionNodeClass: {}<any> | string
-  render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
-  useChildren: (P) => ReactNode
-  returnVal: undefined
-}

/react-aria-components:UNSTABLE_CollectionBuilder

-UNSTABLE_CollectionBuilder <C extends BaseCollection<{}>> {
-  children: (BaseCollection<{}>) => ReactNode
-  content: ReactNode
-  createCollection?: () => BaseCollection<{}>
-}

/react-aria-components:createLeafComponent

+createLeafComponent <E extends Element, P extends {}> {
+  CollectionNodeClass: {}<any> | string
+  render: (P, ForwardedRef<E>, any) => ReactElement | null
+  returnVal: undefined
+}

/react-aria-components:createBranchComponent

+createBranchComponent <E extends Element, P extends {
+    children?: any
+}, T extends {}> {
+  CollectionNodeClass: {}<any> | string
+  render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
+  useChildren: (P) => ReactNode
+  returnVal: undefined
+}

/react-aria-components:CollectionBuilder

+CollectionBuilder <C extends BaseCollection<{}>> {
+  children: (BaseCollection<{}>) => ReactNode
+  content: ReactNode
+  createCollection?: () => BaseCollection<{}>
+}

LFDanLu · 2025-10-01T23:39:55Z

ugh react 17 test randomly failed

chore: Update docs for new --page-height var and small audit fixes

9fc687a

LFDanLu commented Oct 1, 2025

View reviewed changes

add row action example for RAC combobox docs

e41dcea

LFDanLu changed the title ~~chore: Update docs for new --page-height var and small audit fixes~~ chore: Update docs for new --page-height var and ComboBox actions Oct 1, 2025

LFDanLu added 4 commits October 1, 2025 11:21

clarify wording

d25dac8

clarify wording

f44463e

ugh yarn lock

d87f169

fix lint rule

14432a6

LFDanLu added the release label Oct 1, 2025

fix docs type check

1280820

LFDanLu added the ready for review label Oct 1, 2025

devongovett reviewed Oct 1, 2025

View reviewed changes

update copy

14c976f

LFDanLu changed the title ~~chore: Update docs for new --page-height var and ComboBox actions~~ docs: Update docs for new --page-height var and ComboBox actions Oct 1, 2025

snowystinger reviewed Oct 1, 2025

View reviewed changes

copy update and removing unstable from collection exports

a261f76

yihuiliao previously approved these changes Oct 1, 2025

View reviewed changes

yihuiliao mentioned this pull request Oct 1, 2025

docs: october release notes #8957

Merged

5 tasks

snowystinger reviewed Oct 1, 2025

View reviewed changes

prevent breaking change, update copy for one last example

caf9589

LFDanLu dismissed yihuiliao’s stale review via caf9589 October 1, 2025 23:07

snowystinger approved these changes Oct 1, 2025

View reviewed changes

yihuiliao approved these changes Oct 1, 2025

View reviewed changes

LFDanLu added this pull request to the merge queue Oct 1, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 1, 2025

LFDanLu added this pull request to the merge queue Oct 1, 2025

Merged via the queue into main with commit 2ba829b Oct 1, 2025
32 checks passed

LFDanLu deleted the audit_fixes branch October 1, 2025 23:48


		## Item actions

		Use the `onAction` prop on a `<ListBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.

docs: Update docs for new --page-height var and ComboBox actions #8955

docs: Update docs for new --page-height var and ComboBox actions #8955

Uh oh!

Conversation

LFDanLu commented Oct 1, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

rspbot commented Oct 1, 2025

react-aria-components

/react-aria-components:UNSTABLE_createLeafComponent

/react-aria-components:UNSTABLE_createBranchComponent

/react-aria-components:UNSTABLE_CollectionBuilder

/react-aria-components:createLeafComponent

/react-aria-components:createBranchComponent

/react-aria-components:CollectionBuilder

Uh oh!

Uh oh!

LFDanLu commented Oct 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants