feat(form-field): independent addons (#DS-3883) - #1828
Merged
Conversation
|
Visit the preview URL for this PR (updated for commit a327406): https://koobiq-next--prs-1828-ege4674f.web.app (expires Sat, 08 Aug 2026 19:09:43 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors form-field “addons” (cleaner, password toggle, stepper, icon auto-color error state) to be independent projected components that bind their own pointer/keyboard behavior via narrow InjectionToken contexts, reducing coupling to host concrete classes and removing the need for template reference lookups (e.g. #kbqSelectCleaner).
Changes:
- Introduces
KBQ_CLEANER_CONTEXT/kbqCleanerFactoryProviderand updatesKbqCleaner/KbqSelect/KbqTreeSelect/KbqFormFieldto use type-based projection + host-owned clearing behavior (with deprecatedclearValue(...)shims). - Introduces
KbqIconErrorStateContext+KBQ_ICON_ERROR_STATE_CONTEXTto decoupleKbqIconautoColor error-state handling fromKbqFormFieldRef. - Updates unit/e2e tests, docs examples, dev templates, and public API snapshots to match the new addon discovery and behavior.
Reviewed changes
Copilot reviewed 83 out of 84 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/tree-select.api.md | Updates TreeSelect public API to add clear() and deprecate clearValue(...). |
| tools/public_api_guard/components/select.api.md | Updates Select public API to add clear() and deprecate clearValue(...). |
| tools/public_api_guard/components/input.api.md | Reflects KbqNumberInput.controlType becoming non-optional; minor API cleanup. |
| tools/public_api_guard/components/icon.api.md | Exposes icon error-state context token/provider and updates KbqIcon surface. |
| tools/public_api_guard/components/form-field.api.md | Exposes new form-field/cleaner tokens + context; deprecates some legacy members; updates signatures. |
| tools/public_api_guard/components/datepicker.api.md | Adjusts Datepicker API typing/import paths for form-field usage. |
| tools/public_api_guard/components/core.api.md | Marks legacy KBQ_FORM_FIELD_REF and KbqFormFieldRef as deprecated in core API. |
| packages/e2e/routes.ts | Registers new E2eFormFieldAddons route for addon-focused e2e coverage. |
| packages/docs-examples/components/tree-select/tree-select-with-multiline-matcher-overview/tree-select-with-multiline-matcher-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-search-overview/tree-select-search-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-overview/tree-select-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-multiple-overview/tree-select-multiple-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-lazyload/tree-select-lazyload-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-footer-overview/tree-select-footer-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tree-select/tree-select-child-selection-overview/tree-select-child-selection-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/tags/tag-input-removable/tag-input-removable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-input-overview/tag-input-overview-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-input-onpaste-off/tag-input-onpaste-off-example.html | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-input-editable/tag-input-editable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-input-draggable/tag-input-draggable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-removable/tag-autocomplete-removable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-overview/tag-autocomplete-overview-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-option-operations/tag-autocomplete-option-operations-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-onpaste-off/tag-autocomplete-onpaste-off-example.html | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-editable/tag-autocomplete-editable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/tags/tag-autocomplete-draggable/tag-autocomplete-draggable-example.ts | Switches tag-list cleaner example to direct cleaner projection (no ref). |
| packages/docs-examples/components/select/select-with-multiline-matcher/select-with-multiline-matcher-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/select/select-prioritized-selected/select-prioritized-selected-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/select/select-preselected-values/select-preselected-values-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/select/select-multiple/select-multiple-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/select/select-cleaner/select-cleaner-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/inline-edit/inline-edit-overview/inline-edit-overview-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/inline-edit/inline-edit-controls/inline-edit-controls-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/form-field/form-field-with-cleaner/form-field-with-cleaner-example.ts | Removes cleaner template ref usage in docs example. |
| packages/docs-examples/components/ag-grid/ag-grid-external-filter-state/ag-grid-external-filter-state-example.ts | Removes cleaner template ref usage in docs example. |
| packages/components/tree/tree-selection.component.ts | Migrates from legacy KBQ_FORM_FIELD_REF to KBQ_FORM_FIELD token. |
| packages/components/tree-select/tree-select.html | Removes wrapper click/keydown handlers; cleaner handles its own activation. |
| packages/components/tree-select/tree-select.component.ts | Adds cleaner context provider + type-based cleaner query; introduces clear() + deprecated clearValue(...). |
| packages/components/tree-select/tree-select.component.spec.ts | Updates tests to use type-based cleaner discovery (By.directive(KbqCleaner)). |
| packages/components/tree-select/e2e.ts | Removes cleaner template refs in tree-select e2e fixtures. |
| packages/components/timezone/timezone-select.component.ts | Adds cleaner context provider for timezone-select. |
| packages/components/timezone/timezone-select.component.html | Removes wrapper click/keydown handlers; cleaner handles its own activation. |
| packages/components/timezone/e2e.ts | Removes cleaner template refs in timezone e2e fixtures. |
| packages/components/tags/tag-list.component.ts | Switches cleaner query to type-based and disables default cleaner context for tag-list use-cases. |
| packages/components/tags/e2e.ts | Removes cleaner template refs in tags e2e fixtures. |
| packages/components/select/select.html | Removes wrapper click/keydown handlers; cleaner handles its own activation. |
| packages/components/select/select.component.ts | Adds cleaner context provider + type-based cleaner query; introduces clear() + deprecated clearValue(...). |
| packages/components/select/select.component.spec.ts | Updates tests to use type-based cleaner discovery; adds coverage for no-template-ref cleaner. |
| packages/components/input/input.ts | Makes KbqInput.controlType reflect number-input usage (input-number vs input). |
| packages/components/input/input.spec.ts | Updates tests to find the cleaner element by its own class (.kbq-cleaner). |
| packages/components/input/input-password.ts | Tightens toggleType() signature/behavior and emits state changes. |
| packages/components/input/input-password.spec.ts | Adds coverage for Alt+F8 behavior only when password toggle is present. |
| packages/components/input/input-number.ts | Sets explicit controlType = 'input-number' for number input directive. |
| packages/components/input/input-number.spec.ts | Adds coverage for controlType + dynamic stepper projection; adjusts cleaner-vs-number error expectation. |
| packages/components/input/e2e.playwright-spec.ts | Stabilizes password-toggle visual test by focusing input before clicking toggle. |
| packages/components/inline-edit/inline-edit.spec.ts | Removes cleaner template ref usage in inline-edit tests. |
| packages/components/icon/public-api.ts | Exports the new icon error-state context entry. |
| packages/components/icon/icon.component.ts | Uses KBQ_ICON_ERROR_STATE_CONTEXT rather than KBQ_FORM_FIELD_REF for autoColor error updates. |
| packages/components/icon/icon-error-state-context.ts | Adds new narrow context contract + token/provider for icon error state. |
| packages/components/form-field/stepper.ts | Refactors stepper to resolve control via DI and structural typing; deprecates connectTo(...). |
| packages/components/form-field/reactive-password-hint.ts | Migrates from legacy KBQ_FORM_FIELD_REF to KBQ_FORM_FIELD token. |
| packages/components/form-field/password-toggle.ts | Refactors password toggle to resolve control via DI and own Alt+F8 handling. |
| packages/components/form-field/form-field.ts | Adds KBQ_FORM_FIELD token; provides cleaner/icon contexts; deprecates legacy keydown handling. |
| packages/components/form-field/form-field.spec.ts | Adds coverage for tokens + cleaner keyboard behavior; updates tests accordingly. |
| packages/components/form-field/form-field.html | Removes wrapper click/keydown handlers; cleaner handles its own activation. |
| packages/components/form-field/e2e.ts | Adds new E2eFormFieldAddons component for addon-focused manual/e2e coverage. |
| packages/components/form-field/e2e.playwright-spec.ts | Adds Playwright coverage ensuring addons own their keyboard/pointer behavior. |
| packages/components/form-field/cleaner.ts | Makes cleaner a behavior-owning component via injected context; adds keyboard handling and runtime guards. |
| packages/components/form-field/_form-field-theme.scss | Extends form-field theming to include kbq-form-field-type-input-number. |
| packages/components/form-field/snapshots/form-field.spec.ts.snap | Updates snapshot for cleaner host attributes (role="button"). |
| packages/components/filter-bar/pipes/pipe-tree-select.html | Removes cleaner template ref usage in filter-bar pipe template. |
| packages/components/filter-bar/pipes/pipe-multi-tree-select.spec.ts | Updates comments/expectations around cleaner presence and behavior. |
| packages/components/filter-bar/pipes/pipe-input.ts | Updates documentation/comments to reflect KbqCleaner ownership of reset behavior. |
| packages/components/filter-bar/pipes/pipe-input.spec.ts | Updates documentation/comments to reflect KbqCleaner ownership of reset behavior. |
| packages/components/datepicker/datepicker-input.directive.ts | Migrates host form-field injection from class to KBQ_FORM_FIELD token. |
| packages/components/core/form-field/form-field-ref.ts | Marks legacy internal KbqFormFieldRef and KBQ_FORM_FIELD_REF as deprecated. |
| packages/components/autocomplete/autocomplete.component.ts | Migrates host form-field injection from class to KBQ_FORM_FIELD token. |
| packages/components/autocomplete/autocomplete-trigger.directive.ts | Migrates host form-field injection from class to KBQ_FORM_FIELD token. |
| packages/components-dev/tree-select/template.html | Removes cleaner template ref usage in dev template. |
| packages/components-dev/tag/template.html | Removes cleaner template ref usage in dev template; retains consumer click handling. |
| packages/components-dev/select/template.html | Removes cleaner template ref usage in dev template (commented examples). |
| packages/components-dev/form-field/template.html | Removes cleaner template ref usage in dev template. |
| AGENTS.md | Updates repo agent guidance (husky setup) and codifies projected-child InjectionToken best practice. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
artembelik
marked this pull request as ready for review
August 4, 2026 10:39
NikGurev
reviewed
Aug 4, 2026
artembelik
force-pushed
the
feat/DS-3883
branch
from
August 5, 2026 11:45
c7f9dad to
216098c
Compare
🚨 E2E tests failedReview the report for details. 💡 Comment |
lskramarov
approved these changes
Aug 5, 2026
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
NikGurev
approved these changes
Aug 5, 2026
artembelik
force-pushed
the
feat/DS-3883
branch
from
August 5, 2026 16:46
f4c3881 to
8ad707d
Compare
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
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.