feat: add Avatar support for ComboBoxItem and PickerItem #8931

dkario · 2025-09-25T20:35:41Z

For the new avatar style macro exported from Menu, I copied a subset of ComboBox's image style macro.

Avatar controls size via its size prop, so I didn't include that in the style macro.

Closes: N/A

Combobox:

Picker:

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

In new "With Avatars" Combobox and Picker stories, verify avatars are positioned and sized correctly

🧢 Your Project:

Adobe

For the new `avatar` style macro, I copied a subset of ComboBox's `image` style macro. Avatar controls size via its `size` prop, so I didn't include that in the style macro.

dkario · 2025-09-25T20:37:09Z

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

+```tsx render
+"use client";
+import {Avatar, ComboBox, ComboBoxItem, Text} from '@react-spectrum/s2';
+
+const users = Array.from({length: 10}, (_, i) => ({
+  id: `user${i + 1}`,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  avatar: 'https://i.imgur.com/kJOwAdv.png'
+}));
+
+<ComboBox label="Share" items={users}>
+  {(item) => (
+    <ComboBoxItem id={item.id} textValue={item.name}>
+      {/*- begin highlight -*/}
+      <Avatar slot="avatar" src={item.avatar} />
+      {/*- end highlight -*/}
+      <Text slot="label">{item.name}</Text>
+      <Text slot="description">{item.email}</Text>
+    </ComboBoxItem>
+  )}
+</ComboBox>
+```


Not sure if this doc example is good enough for the site, or if it's okay to have two tsx render blocks one after another like I did here. Same thoughts for the Picker docs I added

I think it could be moved up into the previous example, which would then render two comboboxes next to each other, one with icons, one with avatars (since they probably shouldn't be mixed)
It'll be hidden by the "expand" button, but should be obvious with the highlights once expanded

I'm sure we'll have some other opinions so happy to do this ourselves later if we can't come to an immediate consensus

dkario · 2025-09-25T20:37:40Z

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

+              context={AvatarContext}
+              value={{slots: {
+                avatar: {size: avatarSize[size], styles: avatar}
+              }}}>
+              <DefaultProvider


Is this the right approach to add another child DefaultProvider here?

Looks like it says

// A Context.Provider that only sets a value if not inside SelectValue. function DefaultProvider({context, value, children}: {context: React.Con...

I haven't spent time thinking about it yet (hopefully can soon), is this what you want?

Thanks that helps, I just wanted to make sure that sandwiching this between the DefaultProviders for IconContext and TextContent is okay, since this is diff than the usual Provider that takes an array of contexts

Yeah, this should be fine since those contexts won't collide since they are different contexts after all. Technically you could use a standard Provider I believe since the styles passed down are the same between the context provided at the SelectValue level and the one at the PickerItem level in this case but its probably safer to use DefaultProvider here so those can diverge if need be

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

rspbot · 2025-09-25T20:42:37Z

Build successful! 🎉

rspbot · 2025-09-25T21:45:20Z

Build successful! 🎉

snowystinger · 2025-09-26T00:33:41Z

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

+              context={AvatarContext}
+              value={{slots: {
+                avatar: {size: avatarSize[size], styles: avatar}
+              }}}>
+              <DefaultProvider


Looks like it says

// A Context.Provider that only sets a value if not inside SelectValue. function DefaultProvider({context, value, children}: {context: React.Con...

I haven't spent time thinking about it yet (hopefully can soon), is this what you want?

snowystinger · 2025-09-26T00:35:49Z

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

+```tsx render
+"use client";
+import {Avatar, ComboBox, ComboBoxItem, Text} from '@react-spectrum/s2';
+
+const users = Array.from({length: 10}, (_, i) => ({
+  id: `user${i + 1}`,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  avatar: 'https://i.imgur.com/kJOwAdv.png'
+}));
+
+<ComboBox label="Share" items={users}>
+  {(item) => (
+    <ComboBoxItem id={item.id} textValue={item.name}>
+      {/*- begin highlight -*/}
+      <Avatar slot="avatar" src={item.avatar} />
+      {/*- end highlight -*/}
+      <Text slot="label">{item.name}</Text>
+      <Text slot="description">{item.email}</Text>
+    </ComboBoxItem>
+  )}
+</ComboBox>
+```


I think it could be moved up into the previous example, which would then render two comboboxes next to each other, one with icons, one with avatars (since they probably shouldn't be mixed)
It'll be hidden by the "expand" button, but should be obvious with the highlights once expanded

I'm sure we'll have some other opinions so happy to do this ourselves later if we can't come to an immediate consensus

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

LFDanLu · 2025-09-29T18:51:23Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1045, I wouldn't worry about the other diffs, they are from main

rspbot · 2025-09-29T20:13:18Z

Build successful! 🎉

devongovett · 2025-09-30T00:52:06Z

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


-export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
+export interface AvatarContextValue extends AvatarProps {
+  render?: (avatar: ReactNode) => ReactNode


I think rather than adding this prop we could just make Avatar have CenterBaseline by default. I can't really think of a case where you'd want to align text with it at the bottom. We may be able to avoid the extra wrapper div as well since Image already has a wrapper div. We could potentially put the ::before directly on that.

Thanks for fixing this!

rspbot · 2025-09-30T01:41:45Z

Build successful! 🎉

snowystinger

We should run chromatic on this, I'm in the middle of editing dependencies, so if someone else beats me to it, that's fine

rspbot · 2025-09-30T17:28:17Z

Build successful! 🎉

LFDanLu · 2025-09-30T18:34:19Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1049

rspbot · 2025-09-30T19:47:51Z

Build successful! 🎉

rspbot · 2025-09-30T20:02:10Z

Build successful! 🎉

LFDanLu · 2025-09-30T20:26:45Z

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

+              context={AvatarContext}
+              value={{slots: {
+                avatar: {size: avatarSize[size], styles: avatar}
+              }}}>
+              <DefaultProvider


Yeah, this should be fine since those contexts won't collide since they are different contexts after all. Technically you could use a standard Provider I believe since the styles passed down are the same between the context provided at the SelectValue level and the one at the PickerItem level in this case but its probably safer to use DefaultProvider here so those can diverge if need be

feat: add Avatar support for ComboBoxItem and PickerItem

a373806

For the new `avatar` style macro, I copied a subset of ComboBox's `image` style macro. Avatar controls size via its `size` prop, so I didn't include that in the style macro.

dkario mentioned this pull request Sep 25, 2025

feat: add Avatar support for ComboBoxItem and PickerItem #8926

Closed

5 tasks

dkario commented Sep 25, 2025

View reviewed changes

feat: avatar support for Picker button, render for AvatarContextValue

b6e9288

snowystinger reviewed Sep 26, 2025

View reviewed changes

LFDanLu added the release label Sep 29, 2025

Merge branch 'main' into avatar-in-combobox-and-picker

da609c6

devongovett reviewed Sep 30, 2025

View reviewed changes

Add center baseline to Avatar by default

753b3db

snowystinger previously approved these changes Sep 30, 2025

View reviewed changes

Merge branch 'main' into avatar-in-combobox-and-picker

894e49d

dkario added 2 commits September 30, 2025 12:36

Simplify s2-docs for ComboBox and Picker with Avatars

a24272d

Merge branch 'main' into avatar-in-combobox-and-picker

804afae

dkario dismissed snowystinger’s stale review via 804afae September 30, 2025 19:38

Add defaultValue and placeholder to new ComboBox/Picker docs

865c517

LFDanLu approved these changes Sep 30, 2025

View reviewed changes

yihuiliao approved these changes Sep 30, 2025

View reviewed changes

yihuiliao added this pull request to the merge queue Sep 30, 2025

Merged via the queue into main with commit 8a49fc9 Sep 30, 2025
32 checks passed

yihuiliao deleted the avatar-in-combobox-and-picker branch September 30, 2025 20:51

feat: add Avatar support for ComboBoxItem and PickerItem #8931

feat: add Avatar support for ComboBoxItem and PickerItem #8931

Conversation

dkario commented Sep 25, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LFDanLu commented Sep 29, 2025

Uh oh!

rspbot commented Sep 29, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 30, 2025

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 30, 2025

Uh oh!

LFDanLu commented Sep 30, 2025

Uh oh!

rspbot commented Sep 30, 2025

Uh oh!

rspbot commented Sep 30, 2025

Uh oh!

LFDanLu Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

dkario commented Sep 25, 2025 •

edited

Loading

LFDanLu Sep 30, 2025 •

edited

Loading

LFDanLu Sep 30, 2025 •

edited

Loading