feat(scrollbar): independent scrollbar implimentation (#DS-3176) by artembelik · Pull Request #1798 · koobiq/angular-components

artembelik · 2026-07-29T15:08:04Z

No description provided.

github-actions · 2026-07-29T15:13:26Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-07-29T15:14:02Z

Visit the preview URL for this PR (updated for commit 27bac45):

https://koobiq-next--prs-1798-x2s07lds.web.app

_{(expires Sat, 15 Aug 2026 12:09:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

github-actions · 2026-07-30T11:54:27Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-07-30T12:51:29Z

/approve-snapshots

github-actions · 2026-07-30T12:51:46Z

🔄 Updating snapshots.

github-actions · 2026-07-30T12:56:45Z

🚨 Failed to update snapshots.

github-actions · 2026-07-30T15:15:29Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-07-30T15:35:38Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-07-30T15:35:51Z

/approve-snapshots

github-actions · 2026-07-30T15:36:04Z

🔄 Updating snapshots.

github-actions · 2026-07-30T15:40:36Z

✅ Snapshots updated!

github-actions · 2026-07-30T18:33:20Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-07-31T14:08:53Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-07-31T14:31:51Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-07-31T14:36:12Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-07-31T14:46:23Z

/approve-snapshots

github-actions · 2026-07-31T14:46:43Z

🔄 Updating snapshots.

github-actions · 2026-07-31T14:51:02Z

✅ Snapshots updated!

Copilot

Pull request overview

This PR introduces a new internal (“private”) scrollbar implementation (KbqScrollbar) that renders custom track/thumb UI without relying on the external overlayscrollbars library, and migrates KbqContentPanel to use it. It also wires up API extraction/paths for a nested entry point and adds docs/e2e coverage for the new scrollbar behavior.

Changes:

Added @koobiq/components/scrollbar/private entry point (paths + ng-package) and API extractor support for nested entrypoints.
Implemented the new dependency-free scrollbar directive, styles, unit tests, and Playwright e2e coverage.
Updated content-panel (and its docs/e2e) to use the new private scrollbar instead of the overlayscrollbars-based component.

Reviewed changes

Copilot reviewed 34 out of 37 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tsconfig.json	Adds TS path alias for `@koobiq/components/scrollbar/private`.
tools/public_api_guard/components/scrollbar-private.api.md	New API guard snapshot for the private scrollbar entry point.
tools/public_api_guard/components/content-panel.api.md	Updates API snapshot due to content-panel referencing the private scrollbar entry point.
tools/cspell-locales/ru.json	Adds RU spelling exceptions for new scrollbar-related terminology.
tools/api-extractor/config.json	Adds `scrollbar/private` to API extractor component list.
tools/api-extractor/api-extractor.ts	Flattens nested entrypoint name for `api.md` report file naming.
packages/e2e/routes.ts	Registers new private scrollbar e2e routes/components and keeps existing scrollbar e2e route.
packages/docs-examples/example-module.ts	Adds new docs examples (AG Grid + private scrollbar examples) and updates example routing map.
packages/docs-examples/components/scrollbar/private-scrollbar-visibility/private-scrollbar-visibility-example.ts	New docs example for private scrollbar visibility modes.
packages/docs-examples/components/scrollbar/private-scrollbar-virtual-scroll/private-scrollbar-virtual-scroll-example.ts	New docs example showing virtual-scroll delegation.
packages/docs-examples/components/scrollbar/private-scrollbar-scroll-to/private-scrollbar-scroll-to-example.ts	New docs example for programmatic scrolling APIs.
packages/docs-examples/components/scrollbar/private-scrollbar-rtl/private-scrollbar-rtl-example.ts	New docs example for RTL behavior.
packages/docs-examples/components/scrollbar/private-scrollbar-native/private-scrollbar-native-example.ts	New docs example for native fallback via provider config.
packages/docs-examples/components/scrollbar/private-scrollbar-disable-interaction/private-scrollbar-disable-interaction-example.ts	New docs example for disabling drag/click interactions independently.
packages/docs-examples/components/scrollbar/index.ts	Exports and registers new private scrollbar docs examples in the scrollbar examples module.
packages/components/scrollbar/scrollbar.ru.md	Adds a “programmatic control” section hook for scrollbar docs.
packages/components/scrollbar/scrollbar.en.md	Adds a “programmatic control” section hook for scrollbar docs.
packages/components/scrollbar/private/scrollbar.ts	Adds the new independent scrollbar directive implementation and related types/providers.
packages/components/scrollbar/private/scrollbar.spec.ts	Adds comprehensive Jest unit tests for the private scrollbar directive.
packages/components/scrollbar/private/scrollbar.scss	Adds styles/tokens for the private scrollbar track/thumb UI.
packages/components/scrollbar/private/scrollbar.module.ts	Adds an NgModule wrapper exporting the private scrollbar directives.
packages/components/scrollbar/private/public-api.ts	Defines the private scrollbar entry point public exports.
packages/components/scrollbar/private/ng-package.json	Adds packaging config for the nested `scrollbar/private` entry point.
packages/components/scrollbar/private/index.ts	Entry-point barrel exporting `public-api`.
packages/components/scrollbar/private/e2e.ts	Adds e2e demo components for private scrollbar scenarios.
packages/components/scrollbar/private/e2e.playwright-spec.ts	Adds Playwright specs validating private scrollbar rendering and interactions.
packages/components/scrollbar/examples.scrollbar.ru.md	Replaces old placeholder with detailed RU docs examples for the private scrollbar.
packages/components/scrollbar/examples.scrollbar.en.md	Replaces old placeholder with detailed EN docs examples for the private scrollbar.
packages/components/content-panel/e2e.playwright-spec.ts	Updates selectors to match the new scroll viewport structure (`.kbq-private-scrollbar-viewport`).
packages/components/content-panel/content-panel.ts	Migrates content-panel body/container to `kbqScrollbar` directive usage.
packages/components/content-panel/content-panel.ru.md	Removes overlayscrollbars dependency note (content-panel no longer uses it).
packages/components/content-panel/content-panel.en.md	Removes overlayscrollbars dependency note (content-panel no longer uses it).
packages/components-dev/scrollbar/template.html	Simplifies dev app template to render the docs examples block.
packages/components-dev/scrollbar/styles.scss	Updates dev app layout styling.
packages/components-dev/scrollbar/module.ts	Replaces custom dev examples with imports/rendering of docs examples components.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

artembelik · 2026-08-03T12:29:25Z

@copilot resolve the merge conflicts in this pull request

Copilot · 2026-08-03T12:31:18Z

@copilot resolve the merge conflicts in this pull request

Resolved the merge conflict in tools/cspell-locales/ru.json — both скроллеру (from main) and скроллить (from this branch) are now included in the word list. Merge commit: d902ab2.

github-actions · 2026-08-11T13:12:40Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-08-11T13:27:45Z

/approve-snapshots

github-actions · 2026-08-11T13:27:57Z

🔄 Updating snapshots.

github-actions · 2026-08-11T13:33:06Z

🚨 Failed to update snapshots.

github-actions · 2026-08-11T14:59:01Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-08-12T09:00:39Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-08-12T11:25:22Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-08-12T11:41:41Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-08-12T12:09:37Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

lskramarov

В timezone остался старый скролл

artembelik · 2026-08-13T12:45:03Z

В timezone остался старый скролл

на это есть задача DS-3584 (исправим во всех выпадашках), в этих компонентах используется "kbq-scrollbar" селектор, а не kbq-scrollbar компонент, поэтому в данном пре не вносил изменения

NikGurev · 2026-08-13T14:46:09Z

 }

 @mixin _kbq-scrollbar() {
+    @warn 'The `.kbq-scrollbar` selector and related mixins/tokens are deprecated. Use the `KbqScrollbar` component instead. Will be removed in the next major version.';


Мы на 100% хотим уходить от такой реализации?

CSS скролбар может быть достаточным для простой кастомизации

NikGurev · 2026-08-13T14:50:33Z

            <span>DTO sent to the backend:</span>
-            <pre class="kbq-scrollbar"><code>{{ selectionDto() | json }}</code></pre>
+            <pre><code>{{ selectionDto() | json }}</code></pre>
        </div>


ag-grid-overview - сломалось отображение

Аналогично

это ожидаемо, баг на дизейблед сколбар у нас есть в беклоге, те он воспроизводился переодичски ранее, не связано с данными изменениями

скрол в dto поправлю

Тут не дизейблед скролбар, в доке сейчас так не отображается. Самый первый пример: https://koobiq.io/ru/components/ag-grid/overview

NikGurev · 2026-08-13T15:13:20Z

+// and the thumb overhangs the track's trailing edge at the very end of the scroll range.
+const MIN_THUMB_BOX_SIZE = MIN_THUMB_SIZE + THUMB_GAP * 2;
+
+type Dimension = {


Давай сделаем тип на основе HTMLElement. Будет единым источником правды

type Dimension = Pick<HTMLElement, 'scrollTop' | 'scrollHeight' .... >;

artembelik self-assigned this Jul 29, 2026

artembelik force-pushed the feat/DS-3176 branch from 2893b35 to 692ac95 Compare July 30, 2026 11:49

artembelik requested a review from Copilot August 3, 2026 07:32

artembelik marked this pull request as ready for review August 3, 2026 07:32

artembelik requested review from NikGurev and lskramarov as code owners August 3, 2026 07:32

Copilot started reviewing on behalf of artembelik August 3, 2026 07:33 View session

Copilot AI reviewed Aug 3, 2026

View reviewed changes

Comment thread packages/components/scrollbar/private/scrollbar.ts Outdated

Comment thread packages/components/scrollbar/private/scrollbar.ts Outdated

Copilot started work on behalf of artembelik August 3, 2026 12:30 View session

Copilot finished work on behalf of artembelik August 3, 2026 12:31

artembelik marked this pull request as draft August 3, 2026 14:31

artembelik force-pushed the feat/DS-3176 branch 2 times, most recently from bd98288 to 0a72bad Compare August 11, 2026 13:06

artembelik force-pushed the feat/DS-3176 branch from 0a72bad to e0eb829 Compare August 11, 2026 14:53

artembelik requested a balanced review from Copilot August 12, 2026 08:55

artembelik marked this pull request as ready for review August 12, 2026 11:07

artembelik added 5 commits August 12, 2026 15:02

feat(scrollbar): independent scrollbar implimentation (#DS-3176)

f7d3590

refactor: review

f04450f

refactor: e2e

6b2d2ba

refactor: code-block

6c9306c

refactor: spec

3982562

artembelik force-pushed the feat/DS-3176 branch from e6915e1 to 3982562 Compare August 12, 2026 12:03

refactor: code-block

27bac45

lskramarov approved these changes Aug 13, 2026

View reviewed changes

NikGurev reviewed Aug 13, 2026

View reviewed changes

Comment thread packages/components-dev/scrollbar/deprecated/scrollbar-with-custom-config-example.ts

NikGurev reviewed Aug 13, 2026

View reviewed changes

Comment thread packages/docs-examples/components/scrollbar/scrollbar-scroll-to/scrollbar-scroll-to-example.ts

NikGurev reviewed Aug 13, 2026

View reviewed changes

NikGurev approved these changes Aug 13, 2026

View reviewed changes

Uh oh!

Conversation

artembelik commented Jul 29, 2026

Uh oh!

github-actions Bot commented Jul 29, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 30, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jul 30, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jul 31, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jul 31, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jul 31, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented Jul 31, 2026

Uh oh!

github-actions Bot commented Jul 31, 2026

Uh oh!

github-actions Bot commented Jul 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

artembelik commented Aug 3, 2026

Uh oh!

Copilot AI commented Aug 3, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Aug 12, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Aug 12, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Aug 12, 2026

🚨 E2E tests failed

github-actions Bot commented Jul 29, 2026 •

edited

Loading

NikGurev Aug 14, 2026 •

edited

Loading

NikGurev Aug 13, 2026 •

edited

Loading