Skip to content

fix: update expand hover behaviors #9906

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
snowystinger wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: update expand hover behaviors #9906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d18529
fix: update expand hover behaviors
snowystinger Apr 10, 2026
bd75e0f
revert story changes
snowystinger Apr 10, 2026
5683811
remove disabled expandable row from docs example
LFDanLu Apr 10, 2026
2d1ad34
move disabledBehavior example
LFDanLu Apr 11, 2026
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
4 changes: 3 additions & 1 deletion packages/@react-spectrum/s2/src/TableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1121,13 +1121,15 @@ interface ExpandableRowChevronProps {
isExpanded?: boolean,
isDisabled?: boolean,
isRTL?: boolean,
isHidden?: boolean
isHidden?: boolean,
isHovered?: boolean
}

const expandButton = style<ExpandableRowChevronProps>({
gridArea: 'expand-button',
color: {
default: 'inherit',
isHovered: baseColor('neutral-subdued').isHovered,
Copy link
Copy Markdown
Member

@LFDanLu LFDanLu Apr 10, 2026

Choose a reason for hiding this comment

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

the change in color when hovered feels almost indistinguishable to me in light mode haha. Definitely much more noticeable in dark mode. Same with Tree

Copy link
Copy Markdown
Member Author

@snowystinger snowystinger Apr 10, 2026

Choose a reason for hiding this comment

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

hmmm what else would we use? the text is neutral-subdued, so using the hover state for it is the logical choice

isDisabled: {
default: 'disabled',
forcedColors: 'GrayText'
Expand Down
4 changes: 3 additions & 1 deletion packages/@react-spectrum/s2/src/TreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,13 +521,15 @@ interface ExpandableRowChevronProps {
isDisabled?: boolean,
isRTL?: boolean,
scale: 'medium' | 'large',
isHidden?: boolean
isHidden?: boolean,
isHovered?: boolean
}

const expandButton = style<ExpandableRowChevronProps>({
gridArea: 'expand-button',
color: {
default: 'inherit',
isHovered: baseColor('neutral-subdued').isHovered,
isDisabled: {
default: 'disabled',
forcedColors: 'GrayText'
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/s2/stories/TableView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1783,7 +1783,7 @@ export const TableWithNestedRows: StoryObj<typeof TableView> = {
<Cell>5/22/1980</Cell>
</Row>
</Row>
<Row id="apps" isDisabled>
<Row id="apps">
<Cell>Applications</Cell>
<Cell>Folder</Cell>
<Cell>4/7/2025</Cell>
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/s2/stories/TreeView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const TreeExampleStatic = (args: TreeViewProps<any>): ReactElement => (
<div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
<TreeView
{...args}
disabledKeys={['projects']}
disabledKeys={['projects-1']}
aria-label="test static tree"
onExpandedChange={action('onExpandedChange')}
onSelectionChange={action('onSelectionChange')}>
Expand Down
7 changes: 3 additions & 4 deletions packages/dev/s2-docs/pages/s2/TableView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,13 @@ export const description = 'Displays data in rows and columns, with row selectio

<PageDescription>{docs.exports.TableView.description}</PageDescription>

```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet', 'disabledBehavior']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name', disabledBehavior: 'selection'}} type="s2"
```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name'}} type="s2"
"use client";
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2/TableView';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TableView
/* PROPS */
disabledKeys={['pacman', 'apps']}
styles={style({width: 'full'})}>
<TableHeader>
<Column id="name" isRowHeader>Name</Column>
Expand Down Expand Up @@ -644,7 +643,7 @@ export default function EditableTable(props) {

Use `selectionMode` to enable single or multiple selection, and `selectedKeys` (matching each row's `id`) to control the selected rows. Return an [ActionBar](ActionBar) from `renderActionBar` to handle bulk actions, and use `onAction` for row navigation. Disable rows with `isDisabled`. See the [selection guide](selection) for details.

```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide type="s2"
```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'disallowEmptySelection', 'disabledBehavior']} initialProps={{selectionMode: 'multiple', disabledBehavior: 'selection'}} wide type="s2"
"use client";
import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2/TableView';
import {ActionBar, ActionButton} from '@react-spectrum/s2/ActionBar';
Expand Down Expand Up @@ -975,4 +974,4 @@ function subscribe(fn) {

### EditableCell

<PropTable component={docs.exports.EditableCell} links={docs.links} showDescription />
<PropTable component={docs.exports.EditableCell} links={docs.links} showDescription />
30 changes: 0 additions & 30 deletions packages/react-aria-components/test/Tree.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,36 +751,6 @@ describe('Tree', () => {
expect(onSelectionChange).toHaveBeenCalledTimes(0);
});

it('multi select should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'multiple', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
let row = getAllByRole('row')[1];
await user.hover(row);
expect(row).toHaveAttribute('data-hovered', 'true');

await user.click(row);
expect(row).toHaveAttribute('aria-expanded', 'true');
});

it('single select should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'single', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
let row = getAllByRole('row')[1];
await user.hover(row);
expect(row).toHaveAttribute('data-hovered', 'true');

await user.click(row);
expect(row).toHaveAttribute('aria-expanded', 'true');
});

it('no selection should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'none', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
let row = getAllByRole('row')[1];
await user.hover(row);
expect(row).toHaveAttribute('data-hovered', 'true');

await user.click(row);
expect(row).toHaveAttribute('aria-expanded', 'true');
});

it('should prevent Esc from clearing selection if escapeKeyBehavior is "none"', async () => {
let {getAllByRole} = render(<StaticTree treeProps={{selectionMode: 'multiple', escapeKeyBehavior: 'none'}} />);

Expand Down
33 changes: 0 additions & 33 deletions packages/react-aria-components/test/Treeble.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,39 +536,6 @@ describe('Treeble', () => {
expect(onSelectionChange).toHaveBeenLastCalledWith(new Set(['games', 'mario', 'tetris']));
});

it('supports expansion on disabled items with no action in disabledBehavior="selection" multiple selection', async () => {
let tree = render(<Example disabledKeys={['apps']} selectionMode="multiple" disabledBehavior="selection" />);
let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});

await user.hover(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');

await user.click(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
});

it('supports expansion on disabled items with no action in disabledBehavior="selection" single selection', async () => {
let tree = render(<Example disabledKeys={['apps']} selectionMode="single" disabledBehavior="selection" />);
let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});

await user.hover(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');

await user.click(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
});

it('supports expansion on disabled items with no action in disabledBehavior="selection" no selection', async () => {
let tree = render(<Example disabledKeys={['apps']} selectionMode="none" disabledBehavior="selection" />);
let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});

await user.hover(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');

await user.click(tester.rows[1]);
expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
});

it('should support drag and drop', async () => {
let tree = render(<ReorderableTreeble />);
let tester = utils.createTester('Table', {root: tree.getByRole('treegrid')});
Expand Down
3 changes: 1 addition & 2 deletions packages/react-aria/src/grid/useGridRow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,7 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
if (
!hasLink &&
hasChildRows &&
((state.disabledKeys.has(node.key) || node.props?.isDisabled) ||
state.selectionManager.selectionMode === 'none')) {
state.selectionManager.selectionMode === 'none') {
onRowAction = () => tableState.toggleKey(node.key);
}
}
Expand Down
7 changes: 1 addition & 6 deletions packages/react-aria/src/gridlist/useGridListItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,12 +102,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
let children = state.collection.getChildren?.(node.key);
hasChildRows = hasChildRows || [...(children ?? [])].length > 1;

if (
onAction == null &&
!hasLink &&
hasChildRows &&
((state.disabledKeys.has(node.key) || node.props?.isDisabled) ||
state.selectionManager.selectionMode === 'none')) {
if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) {
onAction = () => state.toggleKey(node.key);
}

Expand Down
Loading