feat: add Avatar support for ComboBoxItem and PickerItem #8926
Conversation
For the new `avatar` style macro exported from Menu, I copied a subset the `image` style macro. Avatar controls size via its `size` prop, so I didn't include that in the style macro.
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
looks like the right direction to go
| objectFit: 'contain' | ||
| }); | ||
|
|
||
| export let avatar = style({ |
There was a problem hiding this comment.
not sure we're going to have avatar support in a menu, best to define this over in ComboBox and Picker as needed
dkario
changed the title
| ```tsx render | ||
| "use client"; | ||
| import {Avatar, Picker, PickerItem, Text} from '@react-spectrum/s2'; | ||
|
|
||
| const users = Array.from({length: 10}, (_, i) => ({ | ||
| name: `User ${i + 1}`, | ||
| email: `user${i + 1}@example.com`, | ||
| avatar: `https://i.imgur.com/kJOwAdv.png` | ||
| })); | ||
|
|
||
| <Picker label="Share" items={users}> | ||
| {(item) => ( | ||
| <PickerItem 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> | ||
| </PickerItem> | ||
| )} | ||
| </Picker> | ||
| ``` |
There was a problem hiding this comment.
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 ComboBox docs I added
| context={AvatarContext} | ||
| value={{slots: { | ||
| avatar: {size: avatarSize[size], styles: avatar} | ||
| }}}> |
There was a problem hiding this comment.
Is this the right approach to add another child DefaultProvider here?
| width: 'full' | ||
| }); | ||
|
|
||
| const avatar = style({ |
There was a problem hiding this comment.
The style macro variables in Picker.tsx and ComboBox.tsx are named a bit inconsistently, do you prefer this to be called avatar or avatarStyle(s)?
|
Closing, reopened as non-fork PR: #8931 |
2 participants
For the new
avatarstyle macro exported from Menu, I copied a subset of ComboBox'simagestyle macro.Avatar controls size via its
sizeprop, so I didn't include that in the style macro.Closes: N/A
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project:
Adobe