chore: S2 storybook standardisation updates, treeview generics fix #8397

snowystinger · 2025-06-16T00:56:06Z

Closes

Same test instructions as #8375

Types should match https://app.unpkg.com/@react-spectrum/s2@0.9.2/files/dist/types.d.ts

Note, I was more thorough on our S2 stories than I was with v3 because it's our documentation and it was easier to align them since they were already fairly close. I'd recommend writing all future stories in this style.
I found a handful of type errors in our stories as a result. I've corrected those. No changes to the source types :)

I think we may still be missing a generic on TreeView? @LFDanLu please have a look at the changes I made in the stories around TreeExampleDynamic.

ran chromatic https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=969 only changes are expected because I fixed some types

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

rspbot · 2025-06-16T01:10:45Z

Build successful! 🎉

rspbot · 2025-06-16T01:58:57Z

Build successful! 🎉

LFDanLu · 2025-06-17T23:28:44Z

@snowystinger I'm not sure what specifically about the TreeExampleDynamic changes is problematic here?

snowystinger · 2025-06-17T23:31:04Z

@snowystinger I'm not sure what specifically about the TreeExampleDynamic changes is problematic here?

        <Collection items={childItems}>
          {(item: TreeViewItemType) => (

it's not inferring the type, i have to say what it is despite passing it to the TreeView

rspbot · 2025-06-18T00:28:30Z

Build successful! 🎉

rspbot · 2025-06-18T00:30:24Z

Build successful! 🎉

rspbot · 2025-06-18T00:36:40Z

Build successful! 🎉

rspbot · 2025-06-18T00:41:18Z

Build successful! 🎉

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

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

# Conflicts: # packages/@react-spectrum/s2/src/Tabs.tsx

# Conflicts: # packages/@react-spectrum/s2/src/Slider.tsx

rspbot · 2025-06-23T21:20:23Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx # packages/@react-spectrum/s2/chromatic/Menu.stories.tsx

rspbot · 2025-06-26T22:37:35Z

Build successful! 🎉

rspbot · 2025-06-26T22:42:57Z

Build successful! 🎉

rspbot · 2025-06-26T22:44:14Z

Build successful! 🎉

LFDanLu

Did a spot check of most of the stories, did you happen to run chromatic again on the latest changes just in case?

LFDanLu · 2025-06-27T00:16:53Z

packages/@react-spectrum/s2/stories/CardView.stories.tsx

@@ -112,7 +114,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
  );
 }

-export const Example = (args: CardViewProps<any>) => {
+const ExampleRender = (args: CardViewProps<any>) => {


Noticed that the ActionBar Card story is broken, maybe this needs to be imported instead?

Thanks, fixed. That is awful that the inferred types don't catch that one

rspbot · 2025-06-27T01:44:19Z

Build successful! 🎉

snowystinger · 2025-06-27T01:46:10Z

@LFDanLu Chromatic is green https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=979

# Conflicts: # packages/@react-spectrum/s2/stories/TableView.stories.tsx

rspbot · 2025-06-30T00:02:32Z

Build successful! 🎉

rspbot · 2025-06-30T00:02:33Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:TreeView

-TreeView {
+TreeView <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:TreeViewProps

-TreeViewProps {
+TreeViewProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

snowystinger added 3 commits June 16, 2025 10:48

chore: TS explicit module S2

52058a4

fix any types in story

7583104

accidentally checked in tsconfig

10cc73d

tidy up

3dd27bf

snowystinger added the ready for review label Jun 17, 2025

snowystinger added 3 commits June 18, 2025 10:19

fix types for s2 TreeView

7e1d71c

make two implementations align

57631c8

fix types again

6faf7f9

add pure

e3c35d2

LFDanLu previously approved these changes Jun 20, 2025

View reviewed changes

reidbarber previously approved these changes Jun 23, 2025

View reviewed changes

devongovett reviewed Jun 23, 2025

View reviewed changes

packages/@react-spectrum/s2/src/Accordion.tsx Outdated Show resolved Hide resolved

devongovett reviewed Jun 23, 2025

View reviewed changes

packages/@react-spectrum/s2/src/AvatarGroup.tsx Outdated Show resolved Hide resolved

Merge branch 'main' into ts-explicit-modules-s2

5f67967

# Conflicts: # packages/@react-spectrum/s2/src/Tabs.tsx

snowystinger dismissed stale reviews from reidbarber and LFDanLu via 5f67967 June 23, 2025 20:53

snowystinger added 2 commits June 24, 2025 07:08

Merge branch 'main' into ts-explicit-modules-s2

61bddfd

# Conflicts: # packages/@react-spectrum/s2/src/Slider.tsx

fix lint

9f6d862

snowystinger added 3 commits June 27, 2025 08:28

Merge branch 'main' into ts-explicit-modules-s2

797a933

# Conflicts: # packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx # packages/@react-spectrum/s2/chromatic/Menu.stories.tsx

undo changes to source

0008a16

undo tsconfig change

a80e751

snowystinger changed the title ~~chore: TS explicit module S2~~ chore: S2 storybook standardisation updates, treeview generics fix Jun 26, 2025

LFDanLu reviewed Jun 27, 2025

View reviewed changes

fix story

091c802

LFDanLu previously approved these changes Jun 27, 2025

View reviewed changes

Merge branch 'main' into ts-explicit-modules-s2

7f13144

# Conflicts: # packages/@react-spectrum/s2/stories/TableView.stories.tsx

snowystinger dismissed LFDanLu’s stale review via 7f13144 June 29, 2025 23:52

chore: S2 storybook standardisation updates, treeview generics fix #8397

Are you sure you want to change the base?

chore: S2 storybook standardisation updates, treeview generics fix #8397

Uh oh!

Conversation

snowystinger commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jun 16, 2025

Uh oh!

rspbot commented Jun 16, 2025

Uh oh!

LFDanLu commented Jun 17, 2025

Uh oh!

snowystinger commented Jun 17, 2025

Uh oh!

rspbot commented Jun 18, 2025

Uh oh!

rspbot commented Jun 18, 2025

Uh oh!

rspbot commented Jun 18, 2025

Uh oh!

rspbot commented Jun 18, 2025

Uh oh!

Uh oh!

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

rspbot commented Jun 26, 2025

Uh oh!

rspbot commented Jun 26, 2025

Uh oh!

rspbot commented Jun 26, 2025

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 27, 2025

Uh oh!

snowystinger commented Jun 27, 2025

Uh oh!

rspbot commented Jun 30, 2025

Uh oh!

rspbot commented Jun 30, 2025

@react-spectrum/s2

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:TreeViewProps

Uh oh!

Uh oh!

snowystinger commented Jun 16, 2025 •

edited

Loading