feat(components): use KbqScrollbar (#DS-3584,#DS-4543) - #1918
Open
artembelik wants to merge 6 commits into
Open
Conversation
|
Visit the preview URL for this PR (updated for commit c41d63b): https://koobiq-next--prs-1918-23wtc4bj.web.app (expires Mon, 24 Aug 2026 13:16:48 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates multiple overlay/scrollable component surfaces away from the deprecated .kbq-scrollbar styling to the new @koobiq/components/scrollbar primitives (KbqScrollbarViewport / KbqNativeScrollbar) and enhances the custom scrollbar UX with “flash on open” and configurable hide delay, with broad unit + Playwright E2E coverage updates.
Changes:
- Replaced
.kbq-scrollbarusage withkbqScrollbarViewport/kbqNativeScrollbaracross components (select, dropdown, modal, sidepanel, popover, textarea, etc.). - Extended scrollbar API/behavior (hide delay, “flash scroll indicators”, improved track geometry handling incl. padding + virtual scroll).
- Added/updated Jest and Playwright E2E tests and example routes to validate the new scrollbar behavior across overlays and virtual scroll.
Reviewed changes
Copilot reviewed 70 out of 78 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/textarea.api.md | API snapshot update for textarea now using scrollbar host directive. |
| tools/public_api_guard/components/sidepanel.api.md | API snapshot update reflecting sidepanel body hosting scrollbar viewport. |
| tools/public_api_guard/components/select.api.md | API snapshot update adding scrollbarMode (protected) and projected viewport query. |
| tools/public_api_guard/components/scrollbar.api.md | API snapshot update for new scrollbar inputs/methods and removed viewport token. |
| tools/public_api_guard/components/popover.api.md | API snapshot update for popover animation hook exposure. |
| tools/public_api_guard/components/modal.api.md | API snapshot update reflecting modal body hosting scrollbar viewport. |
| tools/public_api_guard/components/dropdown.api.md | API snapshot update for dropdown click handling and scrollbar viewport. |
| tools/cspell-locales/ru.json | Added RU plural form for scrollbar term. |
| packages/e2e/routes.ts | Registered new E2E pages for scrollbar scenarios across components. |
| packages/docs-examples/components/top-bar/top-bar-overflow/top-bar-overflow-example.ts | Docs example: switched from .kbq-scrollbar class to kbqNativeScrollbar. |
| packages/docs-examples/components/tabs/tabs-add-tab-vertical/tabs-add-tab-vertical-example.ts | Docs example: hostDirectives uses KbqNativeScrollbar. |
| packages/docs-examples/components/select/select-virtual-scroll/select-virtual-scroll-example.ts | Docs example: virtual scroll viewport now uses kbqScrollbarViewport. |
| packages/docs-examples/components/select/select-auto-hide-scroll-strategy/select-auto-hide-scroll-strategy-example.ts | Docs example: native scrollbar styling via KbqNativeScrollbar. |
| packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.ts | Docs example: simplified markup to use <kbq-scrollbar> directly. |
| packages/docs-examples/components/list/list-virtual-scroll/list-virtual-scroll-example.ts | Docs example: list virtual scroll viewport now uses kbqScrollbarViewport. |
| packages/components/tree-select/tree-select.html | Tree-select panel content switched to kbqScrollbarViewport. |
| packages/components/tree-select/tree-select.component.ts | Tree-select flashes scrollbar indicators on open via viewport query. |
| packages/components/tree-select/tree-select.component.spec.ts | Updated ScrollDispatcher mock to include register/deregister. |
| packages/components/tree-select/e2e.ts | Added E2E component to validate custom scrollbar behavior in tree-select. |
| packages/components/tree-select/e2e.playwright-spec.ts | Added Playwright suite validating flash/hover/thumb interactions + screenshot. |
| packages/components/timezone/timezone-select.component.ts | Timezone select imports scrollbar viewport (inherits behavior from KbqSelect). |
| packages/components/timezone/timezone-select.component.spec.ts | Adjusted fakeAsync timing to avoid flush() with scrollbar rAF loop; updated ScrollDispatcher mock. |
| packages/components/timezone/timezone-select.component.html | Added kbqScrollbarViewport + bound scrollbar mode. |
| packages/components/timezone/e2e.ts | Added E2E component to validate custom scrollbar behavior in timezone select. |
| packages/components/timezone/e2e.playwright-spec.ts | Added Playwright suite validating flash/hover/thumb interactions + screenshot. |
| packages/components/textarea/textarea.component.ts | Textarea switched to KbqNativeScrollbar host directive (removes .kbq-scrollbar). |
| packages/components/tabs/tab-body.html | Tabs body content now uses kbqNativeScrollbar. |
| packages/components/tabs/tab-body.component.ts | Tabs body imports KbqNativeScrollbar for template usage. |
| packages/components/sidepanel/sidepanel.spec.ts | Added unit test asserting sidepanel body hosts custom scrollbar classes. |
| packages/components/sidepanel/sidepanel-directives.ts | Sidepanel body uses KbqScrollbarViewport + flashes indicators after open. |
| packages/components/sidepanel/e2e.playwright-spec.ts | Added E2E assertions/screenshot coverage for sidepanel scrollbar. |
| packages/components/select/select.html | Select panel content now uses kbqScrollbarViewport and binds mode. |
| packages/components/select/select.component.ts | Select now flashes built-in/projected scrollbar viewport(s) on open; mode fallback for virtual scroll. |
| packages/components/select/select.component.spec.ts | Updated ScrollDispatcher mock to include register/deregister. |
| packages/components/select/e2e.ts | Added E2E components for select scrollbar (regular + virtual scroll). |
| packages/components/select/e2e.playwright-spec.ts | Added Playwright suites validating select scrollbar behavior + virtual scroll thumb tracking. |
| packages/components/scrollbar/scrollbar.ts | Major scrollbar internals update: hideDelay, flash events, virtual-scroll-safe track creation, padding-aware geometry, Directionality-based RTL. |
| packages/components/scrollbar/scrollbar.spec.ts | Added unit tests for geometry, reveal/flash behavior; added controllable resize trigger. |
| packages/components/scrollbar/scrollbar.ru.md | Docs: reformatted tables + added “scroll events” section. |
| packages/components/scrollbar/scrollbar.en.md | Docs: reformatted tables + added “scroll events” section. |
| packages/components/scrollbar/scrollbar-viewport.scss | Updated reveal logic to include scroll/flash-based transient reveal class. |
| packages/components/scrollbar/scrollbar-track.scss | Track CSS adjusted (geometry now applied via runtime styles). |
| packages/components/scrollbar/scrollbar-tokens.scss | Reduced-motion support by zeroing scrollbar transition duration. |
| packages/components/scrollbar/e2e.ts | Added E2E case to validate track alignment with padded viewport. |
| packages/components/scrollbar/e2e.playwright-spec.ts | Added Playwright coverage for scroll-reveal + padded viewport alignment assertions. |
| packages/components/popover/popover.spec.ts | Added unit test asserting popover content hosts custom scrollbar classes. |
| packages/components/popover/popover.component.ts | Popover flashes scrollbar indicators after open animation completes. |
| packages/components/popover/popover.component.html | Popover content switched to kbqScrollbarViewport. |
| packages/components/popover/e2e.ts | Added E2E component for popover scrollbar rendering. |
| packages/components/popover/e2e.playwright-spec.ts | Added Playwright suite validating popover scrollbar flash/hover + screenshot. |
| packages/components/modal/modal.spec.ts | Added unit test + converted problematic flush() usage to tick()/discardPeriodicTasks(). |
| packages/components/modal/modal.directive.ts | Modal body now hosts KbqScrollbarViewport + flashes indicators after open. |
| packages/components/modal/modal.component.ts | Modal flashes scrollbar indicators once open animation finishes. |
| packages/components/modal/modal.component.html | Modal body switched to kbqScrollbarViewport. |
| packages/components/modal/e2e.ts | Added E2E component for modal scrollbar. |
| packages/components/modal/e2e.playwright-spec.ts | Added Playwright suite validating modal scrollbar flash/hover + screenshot. |
| packages/components/file-upload/multiple-file-upload.component.ts | File-upload list imports KbqNativeScrollbar. |
| packages/components/file-upload/multiple-file-upload.component.html | File-upload list switched from .kbq-scrollbar to kbqNativeScrollbar. |
| packages/components/dropdown/e2e.ts | Added E2E component for dropdown scrollbar. |
| packages/components/dropdown/e2e.playwright-spec.ts | Added Playwright suite validating dropdown scrollbar flash/hover/thumb + screenshot. |
| packages/components/dropdown/dropdown.spec.ts | Adjusted fakeAsync timing/cleanup for scrollbar rAF loop; updated ScrollDispatcher mock. |
| packages/components/dropdown/dropdown.html | Dropdown panel now hosts kbqScrollbarViewport and uses guarded click handler. |
| packages/components/dropdown/dropdown.component.ts | Dropdown flashes scrollbar on open and avoids closing on scrollbar interactions. |
| packages/components/code-block/code-block.ts | Code-block imports KbqNativeScrollbar. |
| packages/components/code-block/code-block.html | Code-block content switched from .kbq-scrollbar to kbqNativeScrollbar. |
| packages/components/autocomplete/e2e.ts | Added E2E component for autocomplete scrollbar. |
| packages/components/autocomplete/e2e.playwright-spec.ts | Added Playwright suite validating autocomplete scrollbar flash/hover/thumb + screenshot. |
| packages/components/autocomplete/autocomplete.spec.ts | Updated ScrollDispatcher mock to include register/deregister. |
| packages/components/autocomplete/autocomplete.html | Autocomplete panel content switched to kbqScrollbarViewport. |
| packages/components/autocomplete/autocomplete.component.ts | Autocomplete flashes scrollbar indicators when panel opens. |
Suppressed comments (1)
packages/components/scrollbar/scrollbar.ts:307
KbqScrollbarViewportattaches the dynamically createdKbqScrollbarTrackview toApplicationRef(this.appRef.attachView(track.hostView)), but when the track is disabled it is onlydestroy()ed. The view should be detached fromApplicationRefbefore destroying to avoid leaking a destroyed view in the appRef view list and to stop change detection for it.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.