feat(component): add multiselect #200
Conversation
|
There are two breaking tests I need to fix. Feel free to review while I 👀 . |
|
|
||
| return ( | ||
| React.isValidElement(trigger) && | ||
| React.cloneElement<React.HTMLAttributes<any> & React.RefAttributes<any>>(trigger as any, { | ||
| 'aria-haspopup': true, | ||
| 'aria-haspopup': 'listbox', |
There was a problem hiding this comment.
aria-haspopup can only be true/false per the spec:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup
Is there a reason why it's not? 🤔
There was a problem hiding this comment.
Most other libraries I saw used listbox instead of true. However, looks like VO works either way so I'll return it to spec.
| box-sizing: border-box; | ||
| color: ${({ theme }) => theme.colors.secondary70}; | ||
| flex: 1; | ||
| height: 26px; |
There was a problem hiding this comment.
Any reason for not using theme.spacing for the height still?
There was a problem hiding this comment.
There's no way to calculate 26px using the current values of theme.spacing. Will use remCalc.
| ); | ||
| } | ||
| } | ||
| export const List: React.FC<ListProps> = memo( |
jorgemoya
force-pushed
the
multi-select
branch
from
3ba3058
to
b163039
Compare
| } | ||
|
|
||
| private renderChips() { | ||
| const { chips, onChipDelete } = this.props; |
There was a problem hiding this comment.
🍹 const { chips = [], onChipDelete } = this.props; and get rid of the if.
| box-sizing: border-box; | ||
| color: ${({ theme }) => theme.colors.secondary70}; | ||
| flex: 1; | ||
| height: ${remCalc(26)}; |
There was a problem hiding this comment.
Does xLarge look pretty different? Worst case can we do a large + xxSmall?
There was a problem hiding this comment.
I can do 24 or 28, but I guess it would deviate from designs. Do you think it's worth it?
jorgemoya
force-pushed
the
multi-select
branch
from
498e04c
to
3e2150f
Compare
jorgemoya
force-pushed
the
multi-select
branch
from
3e2150f
to
b5514d7
Compare
jorgemoya
force-pushed
the
multi-select
branch
from
a29a488
to
6290f88
Compare
Multi selectable component. Using the same
selectcomponent but with an addedmultiprop that enablescheckboxeson all items. Allows multiple checked elements.Still using the same
valueandonItemClickprops to return the selected items. In the case of being amultiselect we return anarrayof values selected.