feat(S2): S2 ListView by snowystinger · Pull Request #8878 · adobe/react-spectrum

snowystinger · 2025-09-17T05:53:23Z

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:

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts

rspbot · 2025-09-17T06:05:21Z

Build successful! 🎉

rspbot · 2025-09-18T06:47:42Z

Build successful! 🎉

rspbot · 2025-09-18T07:41:04Z

Build successful! 🎉

rspbot · 2025-09-18T07:57:58Z

Build successful! 🎉

rspbot · 2025-09-19T05:42:18Z

Build successful! 🎉

rspbot · 2025-10-02T00:14:25Z

Build successful! 🎉

rspbot · 2025-10-02T23:04:26Z

Build successful! 🎉

rspbot · 2025-10-21T06:16:19Z

Build successful! 🎉

rspbot · 2025-10-21T06:20:54Z

Build successful! 🎉

rspbot · 2025-10-22T02:14:30Z

Build successful! 🎉

rspbot · 2025-10-22T04:04:09Z

Build successful! 🎉

rspbot · 2025-10-23T05:09:13Z

Build successful! 🎉

rspbot · 2025-10-23T20:14:52Z

Build successful! 🎉

rspbot · 2026-02-26T22:37:29Z

Build successful! 🎉

LFDanLu

things look good to me in the docs/storybook, holding off on approval until we decide on what to do about the new RAC render props for the gridlist item

packages/dev/s2-docs/pages/s2/ListView.mdx

packages/@react-spectrum/s2/style/spectrum-theme.ts

…idList.

rspbot · 2026-02-27T21:05:38Z

Build successful! 🎉

devongovett · 2026-02-27T23:10:54Z

packages/@react-spectrum/s2/src/ListView.tsx

+    isFirstItem: 'default'
+  },
+  borderBottomStartRadius: {
+    isLastItem: 'default'


Is this really supposed to be rounded? It looks a bit weird IMO. Also the border width seems thicker for some reason

this should only be set if the last item is flush with the bottom of the container or the container scrolls

devongovett · 2026-02-27T23:12:17Z

packages/react-aria-components/src/GridList.tsx


-export interface GridListItemRenderProps extends ItemRenderProps {}
+export interface GridListItemRenderProps extends ItemRenderProps {
+  item: Node<unknown>,


I'd like to just add the id and not the full node, to match Table.

Also can you add JSDoc comments to these?

rspbot · 2026-02-27T23:32:02Z

Build successful! 🎉

rspbot · 2026-02-28T00:17:31Z

Build successful! 🎉

rspbot · 2026-02-28T00:32:31Z

Build successful! 🎉

rspbot · 2026-02-28T00:32:33Z

## API Changes

react-aria-components

/react-aria-components:GridListItemRenderProps

 GridListItemRenderProps {
   allowsDragging?: boolean
+  id?: Key
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isPressed: boolean
   isSelected: boolean
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
+  state: ListState<unknown>
 }

@react-spectrum/s2

/@react-spectrum/s2:ListView

+ListView <T extends {}> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children: ReactNode | ({}) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior = "all"
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  disallowTypeAhead?: boolean = false
+  escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  hideLinkOutIcon?: boolean
+  id?: string
+  isQuiet?: boolean
+  items?: Iterable<T>
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => void
+  onSelectionChange?: (Selection) => void
+  overflowMode?: 'wrap' | 'truncate' = 'truncate'
+  renderActionBar?: ('all' | Set<Key>) => ReactElement
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
+  shouldSelectOnPressUp?: boolean
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ListViewContext

+ListViewContext {
+  UNTYPED
+}

/@react-spectrum/s2:ListViewItem

+ListViewItem {
+  children: ReactNode
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+}

/@react-spectrum/s2:ListViewProps

+ListViewProps <T> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children: ReactNode | (T) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior = "all"
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  disallowTypeAhead?: boolean = false
+  escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  hideLinkOutIcon?: boolean
+  id?: string
+  isQuiet?: boolean
+  items?: Iterable<T>
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => void
+  onSelectionChange?: (Selection) => void
+  overflowMode?: 'wrap' | 'truncate' = 'truncate'
+  renderActionBar?: ('all' | Set<Key>) => ReactElement
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
+  shouldSelectOnPressUp?: boolean
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ListViewItemProps

+ListViewItemProps {
+  children: ReactNode
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+}

LFDanLu · 2026-02-28T00:54:34Z

https://www.chromatic.com/test?appId=5f0dd5ad2b5fc10022a2e320&id=69a23bcc996709ab539d4db6, looks like there is something up with storybook for some stories, digging. Don't think it is from changes in this PR

LFDanLu · 2026-02-28T01:24:43Z

think it should be fixed with #9712, I'll approve this for now

…aseline-tracker * origin/main: feat(S2): S2 ListView (adobe#8878) refactor: Centralize expandedKeys logic in TreeCollection (adobe#9711) chore: Warn if user has interactive elements in their custom Picker value (adobe#9710) feat: S2 unavailable menu item (adobe#9657) fix: Ensure that opening a submenu via enter/space moves focus to first item in submenu (adobe#9691) fix: prevent docs crash by making template elements always append children into .content (adobe#9703) docs(RAC): Add TreeSection docs (adobe#9699) docs(S2): add Typography search view (adobe#9524) docs(S2): fix clipping in Picker custom value AvatarGroup example (adobe#9702) fix: patch additional methods so React doesnt break with template elements (adobe#9385) tentative fix (adobe#9635) docs(S2): fix icon import clipboard content to add underscore for icons starting with number (adobe#9698) feat(S2): add ActionBar support to TreeView (adobe#9695) fix: combobox interactoutside (adobe#9646) fix: skip native Date fast path when local timezone is overridden via setLocalTimeZone (adobe#9678) chore: update storybook to 9 (adobe#8634) docs: improve custom render value S2 Picker example (adobe#9682) # Conflicts: # yarn.lock

snowystinger added 4 commits July 3, 2025 18:43

feat: s2 ListView

ecf9415

Merge branch 'main' into s2-listview

a5b53c0

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts

Explore highlight selection

379dac3

fix docs type check

5ee48f9

Add highlight selection option b to table

1dc83e0

Add highlight selection option b to ListView

1d8e8a1

change selection behaviour of table for highlight mode

e62eb1d

add option D as highlightMode

020541a

change font weight to bold for highlight selection

22545f2

update background color

49beedf

snowystinger added 2 commits October 21, 2025 17:07

Start new highlight selection prototypes, ListView and part of TreeView

c07d593

fix lint

e5fc83d

update styles for listview and treeview

f75c75a

tableview

3fb6b67

design updates

637f244

snowystinger added 2 commits October 24, 2025 06:54

fix colors and add disabled items

ccc682e

fix lint

d0ae356

cleanup story

2905360

LFDanLu reviewed Feb 27, 2026

View reviewed changes

packages/dev/s2-docs/pages/s2/ListView.mdx Show resolved Hide resolved

devongovett reviewed Feb 27, 2026

View reviewed changes

packages/@react-spectrum/s2/style/spectrum-theme.ts Outdated Show resolved Hide resolved

reidbarber added 5 commits February 27, 2026 09:41

use icons in all items in navigation docs

0c573fd

remove unused shorthands from macro theme

9be94c1

refactor to move isPrevSelected, isNextSelected, etc. logic out of Gr…

5fa3cd0

…idList.

fix last item bottom border styles

2c80d38

Merge remote-tracking branch 'origin/main' into s2-listview

ce0de66

devongovett reviewed Feb 27, 2026

View reviewed changes

reidbarber added 2 commits February 27, 2026 17:23

pass id instead of item through render props (matches Table)

2ccd11c

fix border styles

57e8f86

Merge remote-tracking branch 'origin/main' into s2-listview

5bb18c9

add explicit bottom border width

769836b

devongovett approved these changes Feb 28, 2026

View reviewed changes

reidbarber enabled auto-merge February 28, 2026 00:40

LFDanLu approved these changes Feb 28, 2026

View reviewed changes

reidbarber added this pull request to the merge queue Feb 28, 2026

Merged via the queue into main with commit a9fccbd Feb 28, 2026
30 of 31 checks passed

reidbarber deleted the s2-listview branch February 28, 2026 01:33

Conversation

snowystinger commented Sep 17, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Sep 17, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 19, 2025

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

rspbot commented Oct 21, 2025

Uh oh!

rspbot commented Oct 21, 2025

Uh oh!

rspbot commented Oct 22, 2025

Uh oh!

rspbot commented Oct 22, 2025

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Feb 26, 2026

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rspbot commented Feb 27, 2026

Uh oh!

devongovett Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

snowystinger Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

rspbot commented Feb 27, 2026

Uh oh!

rspbot commented Feb 28, 2026

Uh oh!

rspbot commented Feb 28, 2026

Uh oh!

rspbot commented Feb 28, 2026

react-aria-components

/react-aria-components:GridListItemRenderProps

@react-spectrum/s2

/@react-spectrum/s2:ListView

/@react-spectrum/s2:ListViewContext

/@react-spectrum/s2:ListViewItem

/@react-spectrum/s2:ListViewProps

/@react-spectrum/s2:ListViewItemProps

Uh oh!

LFDanLu commented Feb 28, 2026

Uh oh!

LFDanLu commented Feb 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants