feat(tabs): scroll in paginated tabs (#DS-4259) - #1976
Conversation
|
Visit the preview URL for this PR (updated for commit 7790f0f): https://koobiq-next--prs-1976-kcd63s4z.web.app (expires Sat, 05 Sep 2026 14:03:53 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
|
добавление вертикальных табов немного поплыло, мб не в рамках данной фичи |
There was a problem hiding this comment.
🔵 Needs a closer look
The change introduces intricate gesture handling (drag inertia, click suppression, RTL sign flips, global document listeners, and lingering transition/suppression state) whose interaction edge cases warrant human review.
Pull request overview
This PR adds pointer/wheel-driven scrolling to the horizontal paginated tab header (KbqPaginatedTabHeader), on top of the existing pagination-arrow scrolling. Users can now reach overflowed tabs via touchpad horizontal swipe, Shift + mouse wheel, and mouse/pen click-and-drag with release inertia. The logic runs outside Angular for performance, bypasses the expensive scrollDistance setter during continuous updates (writing _scrollDistance directly and updating arrow state without a reflow), suppresses the CSS transition during drags/wheel bursts, and suppresses the trailing click after a drag so it doesn't select a tab.
Changes:
- Added wheel handling (touchpad/
Shift+wheel) withdeltaModenormalization and page-scroll suppression via a non-passive listener. - Added drag scrolling with a movement threshold, velocity-based inertia projection, drag/no-transition CSS classes,
grab/grabbingcursors, and click suppression. - Added burst-snap handling for rapid selection changes, plus unit tests and EN/RU docs describing the new gestures.
File summaries
| File | Description |
|---|---|
| packages/components/tabs/paginated-tab-header.ts | Core wheel/drag/inertia scrolling logic, listeners, transition/click suppression, and clamp helper. |
| packages/components/tabs/tab-header.html / tab-nav-bar.html | Add kbq-tab-header__scroll-container class to the tab list container. |
| packages/components/tabs/tab-header.scss / tab-nav-bar.scss | Add kbq-tab-list_no-transition rule to disable the transition during continuous scroll. |
| packages/components/tabs/_tabs-common.scss | Add grab/grabbing cursor styling for the scroll container. |
| packages/components/tabs/tab-header.spec.ts / tab-nav-bar.spec.ts | Tests for arrow dimming, wheel scrolling, and drag/inertia/click-suppression. |
| packages/components/tabs/tabs.en.md / tabs.ru.md | Document the new touchpad/Shift-wheel/drag interactions. |
Review details
- Files reviewed: 10/10 changed files
- Comments generated: 1
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| this.tabListContainer.nativeElement.classList.remove(DRAGGING_CLASS); | ||
| this.dragState = null; |
Summary
ScrollDistance уже вычисляется. Поверх него добавлена логика скролл для табов с пагинацией:
Добавлен абзац с описанием поведения, примеры не менял