fix(filter-bar): errors following a full review of the component (#DS-5302) by lskramarov · Pull Request #1714 · koobiq/angular-components

lskramarov · 2026-07-08T15:26:48Z

No description provided.

github-actions · 2026-07-08T15:31:33Z

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

https://koobiq-next--prs-1714-1sbwrgwg.web.app

_{(expires Mon, 13 Jul 2026 12:12:40 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

Copilot

Pull request overview

This PR refactors the filter-bar component suite to eliminate the retired changes bus, align state propagation with signal-driven patterns, and address multiple functional/a11y/theming issues discovered during a full component review.

Changes:

Migrates KbqFilterBar and dependent pipes/subcomponents to a signal-based host seam (KBQ_FILTER_BAR_HOST) with immutable filter updates.
Extracts shared implementations to reduce duplication (KbqPipeDateBaseComponent, KbqTreeSelectPipeBase, KbqMultiSelectPipeState) and factors out the save/rename UI into KbqFilterSavePopover.
Improves accessibility (ARIA labels, live-region announcements) and styling robustness (RTL-safe logical props, theme mixins/tokens) plus updates locale strings and API snapshots.

Reviewed changes

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

Show a summary per file

File	Description
tools/public_api_guard/components/core.api.md	Updates public API snapshot for added filter-bar locale configuration fields.
packages/docs-examples/components/filter-bar/filter-bar-uniq-pipes/filter-bar-uniq-pipes-example.ts	Updates docs example to use signal-style `filterBar.filter()` access.
packages/docs-examples/components/filter-bar/filter-bar-saved-filters/filter-bar-saved-filters-example.ts	Updates docs example to use signal-style `filterBar.filter()` access.
packages/docs-examples/components/filter-bar/filter-bar-overview/filter-bar-overview-example.ts	Updates docs example to use signal-style `filterBar.filter()` access.
packages/components/filter-bar/public-api.ts	Exports newly added/refactored filter-bar building blocks.
packages/components/filter-bar/pipes/tree-select-pipe-base.ts	Adds shared base for tree-select pipes (control/flattener/search/open/close behavior).
packages/components/filter-bar/pipes/pipe-tree-select.ts	Refactors tree-select pipe to inherit shared base and simplify template updates.
packages/components/filter-bar/pipes/pipe-tree-select.spec.ts	Refactors tests to use shared pipe-state suite + improved structuredClone handling.
packages/components/filter-bar/pipes/pipe-tree-select.scss	Replaces hardcoded max-height with shared filter-bar theme mixin.
packages/components/filter-bar/pipes/pipe-tree-select.html	Migrates to native control flow and improves search input a11y.
packages/components/filter-bar/pipes/pipe-text.ts	Switches pipe change notification from `.next` to `.emit`.
packages/components/filter-bar/pipes/pipe-text.spec.ts	Uses shared pipe-state suite; replaces magic keyCodes with core constants.
packages/components/filter-bar/pipes/pipe-states.spec-helper.ts	Adds shared helper to reduce duplicated “Pipe states” tests across pipe specs.
packages/components/filter-bar/pipes/pipe-state.ts	Converts directive input + change subscription to signal input + `effect()`.
packages/components/filter-bar/pipes/pipe-select.ts	Stronger typing for search/compare and null-safe filtering.
packages/components/filter-bar/pipes/pipe-select.spec.ts	Uses shared pipe-state suite + expands compare-by tests for null cases.
packages/components/filter-bar/pipes/pipe-select.scss	Replaces hardcoded max-height with shared filter-bar theme mixin.
packages/components/filter-bar/pipes/pipe-select.html	Adds aria-label to the search input.
packages/components/filter-bar/pipes/pipe-readonly.scss	Moves readonly styling into a filter-bar theme mixin.
packages/components/filter-bar/pipes/pipe-multiselect.scss	RTL-safe logical margins + shared max-height mixin.
packages/components/filter-bar/pipes/pipe-multi-tree-select.ts	Refactors multi-tree-select to shared base + extracted “all=none” state helper.
packages/components/filter-bar/pipes/pipe-multi-tree-select.spec.ts	Uses shared pipe-state suite; updates assertions for extracted selection logic.
packages/components/filter-bar/pipes/pipe-multi-tree-select.scss	RTL-safe logical margins + shared max-height mixin.
packages/components/filter-bar/pipes/pipe-multi-tree-select.html	Migrates to native control flow and updates node predicate naming.
packages/components/filter-bar/pipes/pipe-multi-select.ts	Refactors multi-select to extracted “all=none” state helper + stronger typing.
packages/components/filter-bar/pipes/pipe-multi-select.spec.ts	Uses shared pipe-state suite; improves filtering tests to match cold observable behavior.
packages/components/filter-bar/pipes/pipe-multi-select.html	Adds aria-label to the search input.
packages/components/filter-bar/pipes/pipe-datetime.ts	Extracts shared date/datetime behavior into `KbqPipeDateBaseComponent`.
packages/components/filter-bar/pipes/pipe-datetime.spec.ts	Uses shared pipe-state suite for datetime pipe.
packages/components/filter-bar/pipes/pipe-date.ts	Extracts shared date/datetime behavior into `KbqPipeDateBaseComponent`.
packages/components/filter-bar/pipes/pipe-date.spec.ts	Uses shared pipe-state suite for date pipe.
packages/components/filter-bar/pipes/pipe-date.scss	Improves RTL robustness via logical props; introduces overlay-scoped CSS variables for widths.
packages/components/filter-bar/pipes/pipe-date-base.ts	Adds shared date/datetime pipe base implementing popover + period selection flow.
packages/components/filter-bar/pipes/pipe-button.ts	Replaces `changes` subscription with effect-driven markForCheck + a11y improvements.
packages/components/filter-bar/pipes/multi-select-pipe-state.ts	Adds extracted helper for “select all equals select nothing” behavior.
packages/components/filter-bar/pipes/base-pipe.ts	Migrates filter-bar injection to host seam; adds destroyed guard; aligns outputs to `.emit`.
packages/components/filter-bar/pipes/base-pipe.scss	Moves themed colors into theme mixins; improves RTL via logical properties.
packages/components/filter-bar/pipe-add.ts	Migrates to signals/computed; makes filter updates immutable; adds live-region announcement.
packages/components/filter-bar/pipe-add.spec.ts	Updates tests for signal-based filter model + verifies live-region behavior.
packages/components/filter-bar/filters.ts	Refactors save/rename flow into child popover component; switches selection clone strategy.
packages/components/filter-bar/filters.spec.ts	Adds/updates tests for effect-driven behavior and new save/rename popover flows.
packages/components/filter-bar/filters.scss	RTL-safe logical props + theme mixin usage + overlay-scoped CSS variables.
packages/components/filter-bar/filters.html	Replaces inline popover templates with `<kbq-filter-save-popover>`; signal access updates; a11y labels.
packages/components/filter-bar/filter-save-popover.ts	Adds extracted component encapsulating save/rename popover templates and state.
packages/components/filter-bar/filter-reset.ts	Switches to host seam; updates filter read access to `filter()`.
packages/components/filter-bar/filter-refresher.ts	Adds aria-labels and locale-driven strings; switches to host seam; renames class.
packages/components/filter-bar/filter-refresher.scss	Makes min-width configurable via CSS variable token.
packages/components/filter-bar/filter-bar.types.ts	Introduces `KbqFilterBarHost` seam + strongly typed configuration/pipes map; improves typings.
packages/components/filter-bar/filter-bar.ts	Migrates to `model()` for filter, adds computed derived state, immutable updates, host provider.
packages/components/filter-bar/filter-bar.spec.ts	Updates tests for signal model/computed behavior and locale precedence rules.
packages/components/filter-bar/filter-bar.scss	RTL-safe logical props + overlay-scoped CSS variables.
packages/components/filter-bar/filter-bar.module.ts	Updates module declarations to renamed refresher class.
packages/components/filter-bar/filter-bar-tokens.scss	Introduces CSS custom properties for pipe max width and refresher min width.
packages/components/filter-bar/filter-bar-button.ts	Replaces `changes` bus with `effect()` based updates via host seam.
packages/components/filter-bar/examples.filter-bar.en.md	Fixes docs example id reference.
packages/components/filter-bar/_filter-bar-theme.scss	Adds theme mixins for shared panel sizes and themable surfaces.
packages/components/core/locales/tk-TM.ts	Adds new filter-bar locale strings (actions tooltip, added announcement, refresher labels).
packages/components/core/locales/ru-RU.ts	Adds new filter-bar locale strings (actions tooltip, added announcement, refresher labels).
packages/components/core/locales/pt-BR.ts	Adds new filter-bar locale strings (actions tooltip, added announcement, refresher labels).
packages/components/core/locales/es-LA.ts	Adds new filter-bar locale strings (actions tooltip, added announcement, refresher labels).
packages/components/core/locales/en-US.ts	Adds new filter-bar locale strings (actions tooltip, added announcement, refresher labels).

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

… alias, specs) - restore `KbqFilterBarRefresher` as a `@deprecated` alias of `KbqFilterRefresher` so the public export rename is non-breaking (P2-1) - preserve the keyboard focus ring on programmatic focus: `showPeriod()` and `savedUnsuccessfully()` use `KbqButton.focusViaKeyboard()` instead of native `.focus()` (P2-2, P3-1) - guard `showPeriod()`'s deferred required-view-query reads with the `destroyed` flag to avoid NG0951 on teardown (P3-5) - `saveAsNew()` uses a shallow structural copy instead of `structuredClone`, matching `selectFilter()` so non-cloneable custom pipe values survive a save (P3-4) - tests: assert outside the `subscribe` callback in pipe-select spec, tighten `toBe(false)` in filters spec (+ `!!` the `opened` getter), and stub `focusViaKeyboard` in the date/datetime `showPeriod` specs (P3-2, P3-3)

…rm-field Option hover-to-focus in kbq-tree-select is gated by KbqTreeSelection.inSelect, which was derived solely from a wrapping kbq-form-field (KBQ_FORM_FIELD_REF). The filter-bar tree-select pipes (KbqPipeTreeSelectComponent, KbqPipeMultiTreeSelectComponent) render the tree-select bare, so inSelect stayed false and hovering options stopped highlighting them — a regression from #DS-4631, which moved the highlight from CSS :hover to the .kbq-focused/inSelect path. KbqTreeSelect now marks its projected KbqTreeSelection as inSelect in ngAfterContentInit, so hover works whenever the tree lives inside a select panel, regardless of a form-field wrapper. Standalone kbq-tree-selection is unaffected.

lskramarov added 10 commits July 7, 2026 21:59

fix(filter-bar): first attempt

7f0ed7a

fix: phase B

3368047

fix: phase C

6308e88

fix: P3-2 + P3-6

3001f34

fix: P2-19

6857ed7

fix: P2-21

26acdca

fix: P1-6

2c40fb0

fix: P2-18

7f04f8d

fix: P2-20

6794450

fix: P2-4 + P2-5

708538b

lskramarov requested review from NikGurev and artembelik July 8, 2026 15:26

lskramarov self-assigned this Jul 8, 2026

lskramarov added the bug Something isn't working label Jul 8, 2026

fix: after review

99bd32c

artembelik requested a review from Copilot July 9, 2026 07:59

Copilot started reviewing on behalf of artembelik July 9, 2026 08:00 View session

Copilot AI reviewed Jul 9, 2026

View reviewed changes

Comment thread packages/components/filter-bar/pipes/tree-select-pipe-base.ts

Comment thread packages/components/filter-bar/pipes/multi-select-pipe-state.ts

Comment thread packages/components/filter-bar/filter-save-popover.ts

Comment thread packages/components/filter-bar/filter-refresher.ts