From 6073f1c76631d969e452fb5f346034ba2a3da97d Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 19 Feb 2026 15:47:44 -0600
Subject: [PATCH] docs: improve custom render value S2 Picker example (#9682)

* docs: improve custom Render Value Picker example

* fix empty tree story

* fix order of TreeExampleStatic spread

* revert EmptyTree back to original
---
 .../@react-spectrum/tree/stories/TreeView.stories.tsx |  2 +-
 packages/dev/s2-docs/pages/s2/Picker.mdx              | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
index b678f3fc406..e81a319b30c 100644
--- a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
@@ -317,6 +317,7 @@ const DynamicTreeItem = (props) => {
 };
 
 export const TreeExampleDynamic: StoryObj<typeof TreeView> = {
+  ...TreeExampleStatic,
   render: (args: SpectrumTreeViewProps<unknown>) => (
     <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
       <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
@@ -331,7 +332,6 @@ export const TreeExampleDynamic: StoryObj<typeof TreeView> = {
       </TreeView>
     </div>
   ),
-  ...TreeExampleStatic,
   parameters: undefined
 };
 
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index 012c6e136e1..ab7574f3a65 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -249,15 +249,16 @@ Use the `renderValue` prop to provide a custom element to display selected items
 
 ```tsx render
 "use client";
-import {Avatar, Picker, PickerItem, Text} from '@react-spectrum/s2';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Avatar, AvatarGroup, Picker, PickerItem, Text} from '@react-spectrum/s2';
 
+///- begin collapse -///
 let users = [
   {id: 'abraham-baker', avatar: 'https://www.untitledui.com/images/avatars/abraham-baker', name: 'Abraham Baker', email: 'abraham@example.com'},
   {id: 'adriana-sullivan', avatar: 'https://www.untitledui.com/images/avatars/adriana-sullivan', name: 'Adriana Sullivan', email: 'adriana@example.com'},
   {id: 'jonathan-kelly', avatar: 'https://www.untitledui.com/images/avatars/jonathan-kelly', name: 'Jonathan Kelly', email: 'jonathan@example.com'},
   {id: 'zara-bush', avatar: 'https://www.untitledui.com/images/avatars/zara-bush', name: 'Zara Bush', email: 'zara@example.com'}
 ];
+///- end collapse -///
 
 function Example() {
   return (
@@ -268,11 +269,11 @@ function Example() {
         selectionMode={"multiple"}
         ///- begin highlight -///
         renderValue={(selectedItems) => (
-          <div className={style({ display: 'flex', gap: 4, height: '80%' })}>
+          <AvatarGroup aria-label="Selected users">
             {selectedItems.map(item => (
-              <Avatar slot={null} key={item.id} src={item.avatar} alt={item.name} />
+              <Avatar key={item.id} src={item.avatar} alt={item.name} />
             ))}
-          </div>
+          </AvatarGroup>
         )}
         ///- end highlight -///
       >