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 1 commit
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
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