Skip to content

docs(RAC): Add TreeSection docs #9699

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

Open
reidbarber wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(RAC): Add TreeSection docs #9699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 50 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/Tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import vanillaDocs from 'docs:vanilla-starter/Tree';
import '../../tailwind/tailwind.css';
import Anatomy from 'react-aria-components/docs/TreeAnatomy.svg';
import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
import {VersionBadge} from '../../src/VersionBadge';

export const tags = ['data', 'tree', 'nested', 'hierarchy'];
export const relatedPages = [
Expand Down Expand Up @@ -237,6 +238,41 @@ import {Tree} from 'vanilla-starter/Tree';
</Tree>
```

### Sections <VersionBadge version="alpha" />

Use the `<TreeSection>` component to group options. A `<TreeHeader>` element may also be included to label the section. Sections without a header must have an `aria-label`.

```tsx render
"use client";
import {Tree, TreeItem} from 'vanilla-starter/Tree';
import {TreeSection, TreeHeader} from 'react-aria-components';

<Tree aria-label="Files">
<TreeSection>
<TreeHeader>Photos</TreeHeader>
<TreeItem id="my-photos" title="My Photos">
<TreeItem id="photo-1" title="Photo 1" />
<TreeItem id="photo-2" title="Photo 2" />
</TreeItem>
<TreeItem id="shared-photos" title="Shared Photos">
<TreeItem id="shared-photo-1" title="Shared Photo 1" />
<TreeItem id="shared-photo-2" title="Shared Photo 2" />
</TreeItem>
</TreeSection>
<TreeSection>
<TreeHeader>Documents</TreeHeader>
<TreeItem id="my-documents" title="My Documents">
<TreeItem id="document-1" title="Document 1" />
<TreeItem id="document-2" title="Document 2" />
</TreeItem>
<TreeItem id="shared-documents" title="Shared Documents">
<TreeItem id="shared-document-1" title="Shared Document 1" />
<TreeItem id="shared-document-2" title="Shared Document 2" />
</TreeItem>
</TreeSection>
</Tree>
```

## Selection and actions

Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=Tree) for more details.
Expand Down Expand Up @@ -367,7 +403,7 @@ function Example() {

<Anatomy role="img" aria-label="Anatomy diagram of a Tree, consisting of multiple items. Each item in the tree contains a selection checkbox, an expand toggle button, and the name of the item." />

```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', Button: 'Button', Checkbox: 'Checkbox', TreeLoadMoreItem: '#treeloadmoreitem', SelectionIndicator: 'selection#animated-selectionindicator'}}
```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', TreeSection: '#treesection', TreeHeader: '#treeheader', Button: 'Button', Checkbox: 'Checkbox', TreeLoadMoreItem: '#treeloadmoreitem', SelectionIndicator: 'selection#animated-selectionindicator'}}
<Tree>
<TreeItem>
<TreeItemContent>
Expand All @@ -378,8 +414,12 @@ function Example() {
<TreeItem>
{/* ... */}
</TreeItem>
<TreeLoadMoreItem />
</TreeItem>
<TreeSection>
<TreeHeader />
<TreeItem>{/* ... */}</TreeItem>
</TreeSection>
<TreeLoadMoreItem />
</Tree>
```

Expand All @@ -401,6 +441,14 @@ function Example() {

<PropTable component={docs.exports.TreeItemContent} links={docs.links} showDescription hideRenderProps />

### TreeSection

<PropTable component={docs.exports.TreeSection} links={docs.links} showDescription />

### TreeHeader

`<TreeHeader>` labels the section within a Tree. It accepts all DOM attributes.

### TreeLoadMoreItem

<PropTable
Expand Down
11 changes: 11 additions & 0 deletions starters/docs/src/Tree.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,17 @@
--drag-button-width: 0px;
--checkbox-width: 0px;

.react-aria-TreeSection:not(:first-child) {
margin-top: var(--spacing-4);
}

.react-aria-TreeHeader {
font-size: var(--font-size-lg);
font-weight: 500;
padding: var(--spacing-1) var(--spacing-2);
color: var(--text-color);
}

Copy link
Member

@devongovett devongovett Feb 26, 2026

Choose a reason for hiding this comment

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

Can we add wrapper components for these to Tree.tsx? That way all the imports come from ./Tree instead of some coming from react-aria-components, and people can more easily modify them in the starters.

&[data-focus-visible] {
outline: 2px solid var(--focus-ring-color);
outline-offset: -1px;
Expand Down