fix: Picker default text display (#8959)

* fix: Picker SelectedValue default slot display

* add an identifier so we can display the default text slot

Author: snowystinger

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

@@ -532,7 +532,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         })}>
         {(renderProps) => (
           <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label]) {display: none;}')}>
+            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
               {({selectedItems, defaultChildren}) => {
                 return (
                   <Provider
@@ -556,16 +556,24 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                       [TextContext, {
                         slots: {
                           description: {},
-                          [DEFAULT_SLOT]: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })},
-                          label: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })}
+                          [DEFAULT_SLOT]: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore
+                            'data-slot': 'label'
+                          },
+                          label: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore not technically necessary, but good for consistency
+                            'data-slot': 'label'
+                          }
                         }
                       }],
                       [InsideSelectValueContext, true]

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

@@ -153,17 +153,17 @@ export const WithAvatars: Story = {
     <Picker {...args}>
       <PickerItem textValue="User One">
         <Avatar slot="avatar" src={SRC_URL_1} />
-        <Text slot="label">User One</Text>
+        <Text>User One</Text>
         <Text slot="description">[email protected]</Text>
       </PickerItem>
       <PickerItem textValue="User Two">
         <Avatar slot="avatar" src={SRC_URL_2} />
-        <Text slot="label">User Two</Text>
+        <Text>User Two</Text>
         <Text slot="description">[email protected]<br />123-456-7890</Text>
       </PickerItem>
       <PickerItem textValue="User Three">
         <Avatar slot="avatar" src={SRC_URL_2} />
-        <Text slot="label">User Three</Text>
+        <Text>User Three</Text>
       </PickerItem>
     </Picker>
   ),