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

Author: reidbarber

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
 };
 

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 -///
       >