fix(breadcrumbs): removed item rendering flick (#DS-4622) by NikGurev · Pull Request #1579 · koobiq/angular-components

NikGurev · 2026-05-15T15:39:09Z

Summary

Moved to signals in breadcrumb items
Replaced maxWidth calculation with simple overflow items hiding

TODO

resolve problems with keyboard focus

github-actions · 2026-05-15T15:44:06Z

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

https://koobiq-next--prs-1579-gbet4tnu.web.app

_{(expires Tue, 09 Jun 2026 17:00:41 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

github-actions · 2026-05-15T15:44:10Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-05-18T14:43:01Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

NikGurev · 2026-05-18T15:06:25Z

/approve-snapshots

github-actions · 2026-05-18T15:06:38Z

🔄 Updating snapshots.

github-actions · 2026-05-18T15:11:30Z

🚨 Failed to update snapshots.

github-actions · 2026-05-19T12:06:21Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

NikGurev · 2026-05-19T12:10:31Z

/approve-snapshots

github-actions · 2026-05-19T12:10:48Z

🔄 Updating snapshots.

github-actions · 2026-05-19T12:15:48Z

✅ Snapshots updated!

Copilot

Pull request overview

This PR updates the Breadcrumbs component to use Angular signal-based queries/computations to prevent a visible “reflow” during initial render (previously caused by maxWidth being null on the first CD cycle), and re-enables the previously skipped E2E suite after addressing keyboard focus ordering.

Changes:

Migrated breadcrumb item/template/query handling to signal-based APIs (contentChild, contentChildren, viewChild, viewChildren, computed, effect).
Adjusted overflow rendering to use signal reads in the template and added CSS to hide projected <kbq-breadcrumb-item> nodes.
Added unit tests for roving-focus ordering and un-skipped the Playwright suite for KbqBreadcrumbsModule.

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tools/public_api_guard/components/breadcrumbs.api.md	Updates public API snapshot to reflect signal-based members.
packages/components/breadcrumbs/e2e.playwright-spec.ts	Re-enables previously `fixme`-skipped E2E describe block.
packages/components/breadcrumbs/breadcrumbs.ts	Core refactor to signals (queries, `maxWidth` computation, focus ordering `effect`).
packages/components/breadcrumbs/breadcrumbs.spec.ts	Adds unit coverage for focusable item ordering behavior.
packages/components/breadcrumbs/breadcrumbs.scss	Hides projected breadcrumb-item elements to avoid duplicate rendering.
packages/components/breadcrumbs/breadcrumbs.html	Updates template to use signal reads and simplifies overflow result rendering.

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

github-actions · 2026-05-21T13:18:21Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

flicker (#DS-4622)

code

performance

github-actions · 2026-06-02T12:07:02Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

Copilot

Pull request overview

Copilot reviewed 6 out of 9 changed files in this pull request and generated 4 comments.

lskramarov · 2026-06-04T06:41:11Z

 <ng-template #breadcrumbTemplate let-item let-last="last">
-    @if (item.customTemplateRef()) {
-        <ng-container [ngTemplateOutlet]="item.customTemplateRef()!" />
+    @let customTemplateRef = item.customTemplateRef();


было 2 строки стало 3, в чем смысл ?

lskramarov · 2026-06-04T06:41:37Z

 <ng-template #separatorTemplate>
-    @if (separator) {
-        <ng-container [ngTemplateOutlet]="separator" />
+    @let separatorTemplate = separator();


тоже самое, зачем ? Все что не влияет на исправление бага нужно убрать из PR

Убрал, оставил шаблонную переменную на верхнем уровне только для items.

Items в рамках фикса переделал на сигнал для удобство воркфлоу и расчетов

NikGurev self-assigned this May 15, 2026

NikGurev marked this pull request as ready for review May 19, 2026 12:16

NikGurev requested review from artembelik and lskramarov as code owners May 19, 2026 12:16

NikGurev changed the title ~~fix(breadcrumbs,overflow-items): removed item rendering flick (#DS-4622)~~ fix(breadcrumbs): removed item rendering flick (#DS-4622) May 20, 2026

artembelik requested a review from Copilot May 20, 2026 14:08

Copilot started reviewing on behalf of artembelik May 20, 2026 14:08 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

Comment thread packages/components/breadcrumbs/breadcrumbs.ts Outdated

Comment thread packages/components/breadcrumbs/breadcrumbs.ts Outdated

Comment thread packages/components/breadcrumbs/breadcrumbs.ts Outdated

Comment thread packages/components/breadcrumbs/breadcrumbs.ts Outdated

NikGurev marked this pull request as draft May 21, 2026 13:13

lskramarov force-pushed the main branch 7 times, most recently from c6b11d5 to a5c9ca5 Compare May 26, 2026 18:45

NikGurev added 3 commits June 2, 2026 14:48

fix(overflow-items): add enableDefer input to prevent initial render

23d2ec3

flicker (#DS-4622)

chore(breadcrumbs): migrate to signals

12987d2

fix(breadcrumbs): improve focus management

ef8bc0a

NikGurev and others added 7 commits June 2, 2026 14:53

fix(breadcrumbs): calculate visible items properly

a9b90a3

test: updated e2e snapshots

640f17c

chore: golden files

d500487

refactor: removed redundant code

9bd88a9

refactor(overflow-items): remove enableDefer functionality and related

1003e22

code

fix(breadcrumbs): after review

db03247

fix(breadcrumbs): improve overflow width calculation and rendering

7d10761

performance

NikGurev force-pushed the bugfix/DS-4622 branch from d45f75f to 7d10761 Compare June 2, 2026 11:54

NikGurev added 4 commits June 2, 2026 18:58

chore: proper hiding for overflow items

e2cd375

refactor(breadcrumbs): items signal usage in template

3927102

chore: updated golden files

648db14

refactor: run ci

73020e0

NikGurev marked this pull request as ready for review June 2, 2026 16:16

artembelik requested a review from Copilot June 3, 2026 06:42

Copilot started reviewing on behalf of artembelik June 3, 2026 06:42 View session

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Comment thread packages/components/breadcrumbs/breadcrumbs.html

Comment thread packages/components/breadcrumbs/breadcrumbs.ts

Comment thread packages/components/breadcrumbs/breadcrumbs.ts

Comment thread packages/components/breadcrumbs/e2e.playwright-spec.ts

lskramarov reviewed Jun 4, 2026

View reviewed changes

chore: after review

f9e2c0c

NikGurev force-pushed the bugfix/DS-4622 branch from 9595863 to f9e2c0c Compare June 4, 2026 13:57

NikGurev added 4 commits June 4, 2026 17:17

fix: hiddenItemsIds calculation

b0882c5

chore: returned redundant changes

5fd2ff6

chore: fixed hiding items on max change

ff9e5b7

chore: golden files

c3fce30

NikGurev requested a review from lskramarov June 5, 2026 11:43

Conversation

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

Uh oh!

Summary

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented May 18, 2026

🚨 E2E tests failed

Uh oh!

NikGurev commented May 18, 2026

Uh oh!

github-actions Bot commented May 18, 2026

Uh oh!

github-actions Bot commented May 18, 2026

Uh oh!

github-actions Bot commented May 19, 2026

🚨 E2E tests failed

Uh oh!

NikGurev commented May 19, 2026

Uh oh!

github-actions Bot commented May 19, 2026

Uh oh!

github-actions Bot commented May 19, 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!

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jun 2, 2026

🚨 E2E tests failed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lskramarov Jun 4, 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!

NikGurev Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

lskramarov Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

NikGurev Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NikGurev commented May 15, 2026 •

edited

Loading

github-actions Bot commented May 15, 2026 •

edited

Loading

lskramarov Jun 4, 2026 •

edited

Loading