Skip to content

Add svelte sticky groups#899

Open
kbaratyants wants to merge 1 commit into
inokawa:mainfrom
kbaratyants:kbaratyants/feature/sticky-svelte-groups
Open

Add svelte sticky groups#899
kbaratyants wants to merge 1 commit into
inokawa:mainfrom
kbaratyants:kbaratyants/feature/sticky-svelte-groups

Conversation

@kbaratyants

Copy link
Copy Markdown

Summary

We needed sticky date-separator headers in a chat-style virtualized list (Svelte), similar to what's already possible in React/Vue/Solid via the "Sticky Group" pattern. The Svelte package didn't support this because Virtualizer/VList only accepted item as an HTML tag name — there was no way to attach extra style/class/attributes to a specific item's wrapper element, which is required to flip an item from position: absolute to position: sticky at scroll time.

Rather than hack around this at the story/consumer level, we added first-class itemProps support to the Svelte package (src/svelte), mirroring the existing Vue itemProps API:

  • Virtualizer/VList now accept an itemProps?: (payload: { item, index }) => { style?, class?, ...attrs } prop.
  • The returned style is merged on top of the item wrapper's base positioning styles (so overrides like position/top take effect), and any other returned attributes (e.g. class) are spread onto the wrapper element.
  • WindowVirtualizer is untouched — Vue doesn't expose itemProps there either, so there's no parity gap to close.

With that in place, we ported the existing "Sticky Group" Storybook story (already present for React/Vue/Solid) to Svelte, demonstrating sticky group headers built entirely on public API — no internal hacks needed.

No dedicated unit test was added for itemProps, matching the existing convention in this repo (the Vue itemProps implementation has no dedicated unit test either) — coverage here is the existing VList/Virtualizer SSR spec suite plus manual verification via the new Storybook story.

Test plan

  • npm run test -- --project=svelte passes (existing suite, unchanged)
  • npm run check:svelte reports no new errors
  • npm run storybook:svelte → "advanced/Sticky Group" story: scroll through the list and confirm the active group header (0, 100, 200, …) sticks to the top and hands off correctly at each boundary

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant