feat: add virtualization to S2 combobox and picker #8110
Conversation
| ); | ||
| } | ||
|
|
||
| const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps & {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLElement>) { |
There was a problem hiding this comment.
it does feel a little overkill to import separator separately but it's at least a pretty simple component ...i can probably simplify the code since this isn't being used anywhere else except for picker + combobox. given that it's not interactive and just a visual thing, i don't think it has any accessibility requirements.
otherwise, i experimented a little bit with adding a bottom border which would work i think? i would need to play around with the linear-gradient so that the visible border aligns with the item text and it'd require some additional targeting of first-child/last-child but i think it should be possible. that said, not sure if it's worth the time figuring this out if this current solution works
| ':is(:last-child > &)': 'none', | ||
| default: 'flex' | ||
| }, | ||
| // marginX: { |
There was a problem hiding this comment.
if anyone knows why edgeToText isn't working, let me know...
There was a problem hiding this comment.
alternatively, i could do something like this which seems to work and wouldn't define the space using pixels:
marginX: {
size: {
S: '[calc(var(--marginSpace) * 3 / 8)]',
M: '[calc(var(--marginSpace) * 3 / 8)]',
L: '[calc(var(--marginSpace) * 3 / 8)]',
XL: '[calc(var(--marginSpace) * 3 / 8)]'
}
},
'--marginSpace': {
type: 'marginStart',
value: {
size: {
S: 24,
M: 32,
L: 40,
XL: 48
}
}
| ); | ||
| } | ||
|
|
||
| export const ManyItems: Story = { |
There was a problem hiding this comment.
i noticed that the picker's popover is pretty slow to open once it's clicked. not an issue when it's just opened by keyboard tho. i haven't looked into it too much but if anyone might have leads that would be appreciated
yihuiliao
changed the title
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: