feat(core): add overflow shadow directives (#DS-3478) by lskramarov · Pull Request #1633 · koobiq/angular-components

lskramarov · 2026-06-11T17:32:11Z

No description provided.

github-actions · 2026-06-11T17:37:17Z

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

https://koobiq-next--prs-1633-ov2qkikl.web.app

_{(expires Sat, 20 Jun 2026 15:59:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

github-actions · 2026-06-11T17:44:45Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-06-15T05:59:16Z

🚨 Failed to update snapshots.

github-actions · 2026-06-15T06:19:08Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

lskramarov · 2026-06-15T06:29:55Z

/approve-snapshots

github-actions · 2026-06-15T06:30:16Z

🔄 Updating snapshots.

github-actions · 2026-06-15T06:34:20Z

✅ Snapshots updated!

Copilot

Pull request overview

This PR introduces a shared overflow shadow mechanism in @koobiq/components/core (container + top/bottom marker directives + optional scroll-source DI token), and migrates multiple scrollable components (sidepanel, popover, modal, notification-center, content-panel) to use it instead of bespoke overflow checks and CSS class toggles.

Changes:

Added KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom, KbqOverflowShadowState, and KBQ_OVERFLOW_SHADOW_SOURCE to core.
Updated KbqScrollbar to implement/provide KbqOverflowShadowSource so overflow shadows can follow the real scroll viewport.
Reworked component styles/templates/e2e tests to rely on box-shadow (via the directives) rather than overflow CSS classes.

Reviewed changes

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

Show a summary per file

File	Description
tools/public_api_guard/components/sidepanel.api.md	Public API snapshot updates for sidepanel overflow-shadow integration/types.
tools/public_api_guard/components/scrollbar.api.md	Public API snapshot updates for `KbqScrollbar` implementing `KbqOverflowShadowSource`.
tools/public_api_guard/components/popover.api.md	Public API snapshot updates for popover removing old overflow fields and exposing overflow container ref.
tools/public_api_guard/components/notification-center.api.md	Public API snapshot updates reflecting removal of old overflow fields.
tools/public_api_guard/components/modal.api.md	Public API snapshot updates reflecting removal of old overflow fields/methods.
tools/public_api_guard/components/core.api.md	Public API snapshot adds overflow-shadow directives/interfaces/token.
tools/public_api_guard/components/content-panel.api.md	Public API snapshot updates for content-panel overflow state and container ref.
packages/e2e/utils/overflow-shadow.ts	New Playwright helper to assert overflow shadow presence via computed `box-shadow`.
packages/e2e/utils/index.ts	Re-export the new overflow shadow e2e helper.
packages/components/sidepanel/sidepanel.scss	Removes class-based overflow shadow styling (now applied inline by directives/bindings).
packages/components/sidepanel/sidepanel-ref.ts	Types `bodyOverflow` as `KbqOverflowShadowState`.
packages/components/sidepanel/sidepanel-directives.ts	Uses `KbqOverflowShadowContainer` + signal/effect wiring; header/footer now bind inline `box-shadow`.
packages/components/sidepanel/e2e.playwright-spec.ts	Updates assertions to check computed shadow rather than CSS classes.
packages/components/scrollbar/scrollbar.component.ts	Provides `KBQ_OVERFLOW_SHADOW_SOURCE` and adds `getScrollElement()` for overflow-shadow container.
packages/components/popover/popover.scss	Simplifies header/footer overflow styling (inline shadow now).
packages/components/popover/popover.component.ts	Removes manual overflow tracking logic; uses overflow-shadow directives instead.
packages/components/popover/popover.component.html	Adds `kbqOverflowShadowContainer` + top/bottom marker directives; triggers manual `checkOverflow()` on content mutation.
packages/components/popover/e2e.playwright-spec.ts	Updates assertions to check computed shadow rather than CSS classes.
packages/components/notification-center/notification-center.ts	Removes manual overflow tracking; imports overflow-shadow directives.
packages/components/notification-center/notification-center.scss	Removes class-based overflow shadow styling (inline shadow now).
packages/components/notification-center/notification-center.html	Adds overflow-shadow container + markers; customizes bottom shadow token via `[shadow]`.
packages/components/modal/modal.component.ts	Removes manual overflow tracking logic; imports overflow-shadow directives.
packages/components/modal/modal.component.html	Adds overflow-shadow container + top/bottom markers around modal body.
packages/components/modal/e2e.playwright-spec.ts	Updates assertions to check computed shadow rather than CSS classes.
packages/components/modal/_modal-theme.scss	Removes class-based overflow shadow styling (inline shadow now).
packages/components/core/public-api.ts	Exports the new `overflow-shadow` entrypoint.
packages/components/core/overflow-shadow/public-api.ts	New barrel for overflow-shadow public surface.
packages/components/core/overflow-shadow/overflow-shadow.ts	New overflow shadow directives + token/source abstraction.
packages/components/core/overflow-shadow/overflow-shadow.spec.ts	Unit tests for container + marker directives and external scroll source behavior.
packages/components/core/overflow-shadow/index.ts	New index barrel for overflow-shadow.
packages/components/content-panel/e2e.playwright-spec.ts	Updates assertions to check computed shadow rather than CSS classes.
packages/components/content-panel/content-panel.ts	Replaces class toggling logic with computed overflow state from `KbqOverflowShadowContainer`.
packages/components/content-panel/content-panel.scss	Removes class-based overflow shadow styling (inline shadow now).

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

    constructor() {
-        afterNextRender(() => {
-            this.checkOverflow();
-        });
-    }
-
-    /** @docs-private */
-    protected checkOverflow() {
-        const nativeElement = this.elementRef.nativeElement;
-
-        if (!isHtmlElement(nativeElement)) return;
-
-        const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
-
-        this.sidepanelRef.bodyOverflow.set({
-            top: scrollTop > 0,
-            bottom: scrollTop + offsetHeight < scrollHeight
-        });
+        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
    }


+ * In addition to scroll events, the directive observes scroll source size changes via
+ * `ResizeObserver` — this covers cases where layout changes without a scroll (modal open
+ * animation, dynamic content load, window resize).


artembelik · 2026-06-15T09:20:21Z

+        this.destroyRef.onDestroy(() => this.resizeObserver?.disconnect());
+    }
+
+    ngOnInit(): void {


лучше использовать afterNextRender чтобы это точно работало в ssr

в конструкторе afterNextRender, а тут только подписки на события..

artembelik · 2026-06-15T09:22:55Z

+
+        if (!source) return;
+
+        this.resizeObserver = new ResizeObserver(() => this.checkOverflow());


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

import { SharedResizeObserver } from '@angular/cdk/observers/private';

artembelik · 2026-06-15T09:33:47Z

-export class KbqContentPanelFooter {}
+export class KbqContentPanelFooter {
+    /** @docs-private */
+    protected readonly contentPanel = inject(KbqContentPanel, { optional: true });


KbqContentPanelFooter и KbqContentPanelHeader не могут быть использованы без KbqContentPanel

Suggested change

protected readonly contentPanel = inject(KbqContentPanel, { optional: true });

protected readonly contentPanel = inject(KbqContentPanel);

artembelik · 2026-06-15T09:39:21Z

тень в шапке еще есть у code-block:
https://github.com/koobiq/angular-components/blob/main/packages/components/code-block/code-block.ts#L488

lskramarov added 2 commits June 11, 2026 19:21

feat(core): add overflow shadow directives (#DS-3478)

8833b3e

fix: after review

cd31239

lskramarov self-assigned this Jun 11, 2026

lskramarov requested review from NikGurev and artembelik as code owners June 11, 2026 17:32

lskramarov added the enhancement New feature or request label Jun 11, 2026

koobiq deleted a comment from github-actions Bot Jun 15, 2026

fix: e2e

c54a517

test: updated e2e snapshots

ae52056

artembelik requested a review from Copilot June 15, 2026 08:18

Copilot started reviewing on behalf of artembelik June 15, 2026 08:18 View session

Copilot AI reviewed Jun 15, 2026

View reviewed changes

artembelik reviewed Jun 15, 2026

View reviewed changes

Comment thread packages/components/notification-center/notification-center.html Outdated

artembelik reviewed Jun 15, 2026

View reviewed changes

artembelik approved these changes Jun 15, 2026

View reviewed changes

fix: after review

ce64e39


		if (!source) return;

		this.resizeObserver = new ResizeObserver(() => this.checkOverflow());

	protected readonly contentPanel = inject(KbqContentPanel, { optional: true });
	protected readonly contentPanel = inject(KbqContentPanel);

Conversation

lskramarov commented Jun 11, 2026

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Jun 11, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

github-actions Bot commented Jun 15, 2026

🚨 E2E tests failed

Uh oh!

lskramarov commented Jun 15, 2026

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

artembelik Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

lskramarov Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

artembelik Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

artembelik Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

artembelik commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jun 11, 2026 •

edited

Loading

artembelik Jun 15, 2026 •

edited

Loading