wip: allow custom react element for S2 Picker value #9541
Conversation
| * Custom renderer for the selected value shown in the button. | ||
| * Matches the `SelectValue` children render type. | ||
| */ | ||
| renderValue?: SelectValueProps<T>['children'] |
There was a problem hiding this comment.
I think we should just pass in the selected items (i.e. (selectedItems: T[]) => ReactNode) here, and only call it when there is at least one item selected. We already have the placeholder prop to customize the placeholder text, and you can omit renderValue if you want the default text. Is that sufficient for your use case or did you need one of the other render props?
There was a problem hiding this comment.
Yes, it's enough for our use case -- was probably being too proactive trying to think of a general situation.
BrknRules
force-pushed
the
S2-Picker-renderValue
branch
from
0645caf to
7f8c3fd
Compare
BrknRules
force-pushed
the
S2-Picker-renderValue
branch
from
7f8c3fd to
d5c4f3c
Compare
BrknRules
left a comment
BrknRules
left a comment
There was a problem hiding this comment.
Some notes on implementation choices -- would appreciate thoughts!
| display: 'flex', | ||
| alignItems: 'center' | ||
| alignItems: 'center', | ||
| height: '100%' |
There was a problem hiding this comment.
Locked height to picker button height. Enough for our use case as we don't have anything larger than the button that should cause it to resize.
| <SelectValue | ||
| className={ | ||
| valueStyles({isQuiet}) + | ||
| (renderValue ? '' : ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')) |
There was a problem hiding this comment.
This was quite restrictive in allowing us our own layouts. This should allow custom layouts only through renderValue and not via slot manipulation.
2 participants
This adds a
renderValueprop to Picker S2, which allows users to render custom elements within the Picker's select based off of selected items (could also just render a custom element regardless of selection as well, TBD).To Do
renderSelectedItems,renderValue, ...?)renderValuetype, atm just usesSelectValue.childrenbut should restrict