Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 1, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9fc687a
chore: Update docs for new --page-height var and small audit fixes
LFDanLu Oct 1, 2025
e41dcea
add row action example for RAC combobox docs
LFDanLu Oct 1, 2025
d25dac8
clarify wording
LFDanLu Oct 1, 2025
f44463e
clarify wording
LFDanLu Oct 1, 2025
d87f169
ugh yarn lock
LFDanLu Oct 1, 2025
14432a6
fix lint rule
LFDanLu Oct 1, 2025
1280820
fix docs type check
LFDanLu Oct 1, 2025
14c976f
update copy
LFDanLu Oct 1, 2025
a261f76
copy update and removing unstable from collection exports
LFDanLu Oct 1, 2025
caf9589
prevent breaking change, update copy for one last example
LFDanLu Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/dev/mcp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@adobe/spectrum-css-temp": "3.0.0-alpha.1",
"typescript": "^5.8.2"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ function ControlledComboBox() {

## 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.
Use the `onAction` prop on a `<ListBoxItem>` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value.

```tsx render
"use client";
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/s2/ComboBox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ function Example() {

### Actions

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

```tsx render
"use client";
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Autocomplete.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {StarterKits} from '@react-spectrum/docs/src/StarterKits';
category: Pickers
keywords: [autocomplete, search, menu, command palette, aria]
type: component
preRelease: beta
preRelease: rc
---

# Autocomplete
Expand Down
33 changes: 32 additions & 1 deletion packages/react-aria-components/docs/ComboBox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -589,9 +589,40 @@ function Example() {
}
```

## Item actions

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

```tsx example
function Example() {
let [inputValue, setInputValue] = React.useState('');

return (
<MyComboBox
label="Favorite Animal"
inputValue={inputValue}
onInputChange={setInputValue}>
{/*- begin highlight -*/}
{inputValue.length > 0 && (
<ListBoxItem onAction={() => alert('Creating ' + inputValue)}>
{`Create "${inputValue}"`}
</ListBoxItem>
)}
{/*- end highlight -*/}
<ListBoxItem>Aardvark</ListBoxItem>
<ListBoxItem>Cat</ListBoxItem>
<ListBoxItem>Dog</ListBoxItem>
<ListBoxItem>Kangaroo</ListBoxItem>
<ListBoxItem>Panda</ListBoxItem>
<ListBoxItem>Snake</ListBoxItem>
</MyComboBox>
);
}
```

## Links

By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `<ListBoxItem>` component. Interacting with link items navigates to the provided URL and does not update the selection or input value.
Items may be links to another page or website. This can be achieved by passing the `href` prop to the `<ListBoxItem>` component. Interacting with link items navigates to the provided URL and does not update the selection or input value.

```tsx example
<MyComboBox label="Tech company websites">
Expand Down
13 changes: 11 additions & 2 deletions packages/react-aria-components/docs/Modal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,12 +422,21 @@ A `Modal` can be targeted with the `.react-aria-Modal` CSS selector, or by overr

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 `--page-height` and `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, the latter of which you can use to set the height of the Modal to account for the virtual keyboard on mobile.

```css render=false
.react-aria-ModalOverlay {
position: absolute;
height: var(--page-height);
}

.react-aria-Modal {
/* Center modal without adding a extra wrapping div. */
position: fixed;
height: var(--visual-viewport-height);
max-height: var(--visual-viewport-height);
top: calc(var(--visual-viewport-height) / 2);
left: 50%;
translate: -50% -50%;
}
```

Expand Down
3 changes: 2 additions & 1 deletion packages/react-aria-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ export {Header, HeaderContext} from './Header';
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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :(

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

export {createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections';
export {Collection, createLeafComponent, createBranchComponent, CollectionBuilder} from '@react-aria/collections';
export {Keyboard, KeyboardContext} from './Keyboard';
export {Label, LabelContext} from './Label';
export {Link, LinkContext} from './Link';
Expand Down
2 changes: 1 addition & 1 deletion yarn.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function enforceConsistentDependenciesAcrossTheProject({Yarn}) {

workspace.set('dependencies.@swc/helpers', '^0.5.0');
workspace.set('dependencies.@adobe/spectrum-css-temp');
if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils')) {
if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils') && !workspace.ident.endsWith('/mcp')) {
workspace.set('devDependencies.@adobe/spectrum-css-temp', '3.0.0-alpha.1');
}
// these should not be in dependencies, but should be in dev or peer
Expand Down
1 change: 0 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7211,7 +7211,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "@react-spectrum/mcp@workspace:packages/dev/mcp"
dependencies:
"@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
"@modelcontextprotocol/sdk": "npm:^1.17.3"
"@swc/helpers": "npm:^0.5.0"
fast-glob: "npm:^3.3.3"
Expand Down