fix(select): use kbqHighlightBackground for search highlighting in dropdowns (#DS-5293)#1774
Open
lskramarov wants to merge 3 commits into
Open
fix(select): use kbqHighlightBackground for search highlighting in dropdowns (#DS-5293)#1774lskramarov wants to merge 3 commits into
lskramarov wants to merge 3 commits into
Conversation
|
Visit the preview URL for this PR (updated for commit fefb4c6): https://koobiq-next--prs-1774-1agrbtqi.web.app (expires Thu, 30 Jul 2026 11:51:28 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates search-match highlighting in dropdown/overlay-based pickers to use the kbqHighlightBackground pipe (background fill) instead of mcHighlight (bold), and adjusts highlight documentation accordingly.
Changes:
- Switched select/tree-select/dropdown option templates from
mcHighlighttokbqHighlightBackgroundfor search highlighting in dropdowns/overlays. - Updated several examples/components to import
KbqHighlightBackgroundPipewhere they previously importedKbqHighlightPipe. - Revised highlight documentation (EN/RU) to describe when to use bold vs background highlighting.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/docs-examples/components/tree-select/tree-select-search-overview/tree-select-search-overview-example.ts | Uses kbqHighlightBackground for tree-select search highlighting in the example. |
| packages/docs-examples/components/select/select-search/select-search-example.ts | Uses kbqHighlightBackground for select search highlighting in the example. |
| packages/docs-examples/components/select/select-paging/select-paging-example.ts | Swaps pipe import + template usage to KbqHighlightBackgroundPipe / kbqHighlightBackground. |
| packages/docs-examples/components/select/select-paging-error/select-paging-error-example.ts | Same as above for the error variant example. |
| packages/docs-examples/components/select/select-loading/select-loading-example.ts | Same as above for the loading variant example. |
| packages/docs-examples/components/select/select-loading-error/select-loading-error-example.ts | Same as above for the loading+error variant example. |
| packages/docs-examples/components/highlight/highlight-select/highlight-select-example.ts | Updates highlight-select example to use background highlighting. |
| packages/docs-examples/components/dropdown/dropdown-with-filter/dropdown-with-filter-example.ts | Updates dropdown filtering example to use background highlighting. |
| packages/components/timezone/timezone-option.component.ts | Switches component imports to KbqHighlightBackgroundPipe. |
| packages/components/timezone/timezone-option.component.html | Updates timezone option highlighting to kbqHighlightBackground. |
| packages/components/filter-bar/pipes/pipe-tree-select.html | Updates filter-bar tree-select pipe template to kbqHighlightBackground. |
| packages/components/filter-bar/pipes/pipe-multi-tree-select.html | Updates filter-bar multi-tree-select pipe template to kbqHighlightBackground. |
| packages/components/core/highlight/highlight.ru.md | Updates RU docs describing highlight pipes/usage. |
| packages/components/core/highlight/highlight.en.md | Updates EN docs describing highlight pipes/usage. |
| packages/components-dev/tree-select/template.html | Updates dev tree-select template highlighting to kbqHighlightBackground. |
| packages/components-dev/select/template.html | Updates commented dev select snippets to kbqHighlightBackground. |
| packages/components-dev/form-field/template.html | Updates dev form-field tree-select highlighting to kbqHighlightBackground. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
5
to
8
| #### Bold | ||
|
|
||
| Used in selects with search and homogeneous lists (for example, choosing a department or a name). This style is unobtrusive and ideal for quickly scanning familiar data: the user immediately sees that the searched word is in the row but is not distracted from the main choice. | ||
|
|
||
| <!-- example(highlight-select) --> | ||
| Used in homogeneous lists rendered inline on the page, without a dropdown or overlay (for example, filtering a tree list). This style is unobtrusive and ideal for quickly scanning familiar data: the user immediately sees that the searched word is in the row but is not distracted from the main choice. | ||
|
|
Comment on lines
5
to
8
| #### Жирный шрифт | ||
|
|
||
| Применяется в селектах с поиском и однородных списках (например, выбор отдела или имени). Этот способ ненавязчив и идеален для быстрого сканирования знакомых данных: пользователь сразу видит, что искомое слово есть в строке, но не отвлекается от основного выбора. | ||
|
|
||
| <!-- example(highlight-select) --> | ||
| Применяется в однородных списках, отображаемых прямо на странице, без выпадающего окна или оверлея (например, фильтрация дерева). Этот способ ненавязчив и идеален для быстрого сканирования знакомых данных: пользователь сразу видит, что искомое слово есть в строке, но не отвлекается от основного выбора. | ||
|
|
NikGurev
approved these changes
Jul 23, 2026
artembelik
approved these changes
Jul 23, 2026
rmnturov
approved these changes
Jul 23, 2026
rmnturov
requested changes
Jul 23, 2026
rmnturov
left a comment
rmnturov
left a comment
Contributor
There was a problem hiding this comment.
По задаче я понял так: нужно, чтобы во всех перечисленных компонентах появилась подсветка совпадений фоном. Не «заменить, где есть», а «сделать так, чтобы было». В описании задачи же прямо перечислены: Select, TreeSelect, Dropdown, Autocomplete, Timezone, Tag Input, Tag Autocomplete.
В PR отлично залетела замена вида подсветки в селектах, три-селеуктах, дропдауне и таймзоне — там где подсветка уже была, все ок.
Но в Autocomplete и Tag Autocomplete ее не было ранее, и в PR она не добавилась. Получается, что эти компоненты остались без подсветки, хотя задача подразумевает, что она должна быть.
Contributor
Author
|
@rmnturov добавил везде где есть поиск в выпадающем списке |
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.