fix(filter-bar): keep a short pipe name from collapsing, cap the whole pipe at its max-width token (#DS-5588) - #2073
Merged
Merged
Conversation
…g value (#DS-5588) The pipe's name and value were flex items with `overflow: hidden`, which drops their automatic minimum size to zero, so flexbox took the same percentage from both. A three-character name gave up as much of itself as a forty-character value gave up of its own, and rendered as one glyph. They are now two shrinkable `minmax(0, max-content)` grid tracks: a part that asks for less than its share keeps all of it and hands the rest to its neighbour, and two long parts split the row evenly. Measured against the old layout, only the pipe whose name and value are both too long moves at all (168/148px to 160/156px), plus one pixel of rounding on a date range. `KbqPipeMinWidth`, the 20-character heuristic that used to protect the short part, is no longer applied: it never reached the multi-select, date and datetime pipes, re-measured only when the whole filter changed, and could not express the split. It stays exported and is now deprecated.
|
Visit the preview URL for this PR (updated for commit 9ab977f): https://koobiq-next--prs-2073-45y0g7gy.web.app (expires Fri, 25 Sep 2026 12:08:06 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
lskramarov
marked this pull request as ready for review
September 22, 2026 09:28
…h (#DS-5588) The token sat on `.kbq-button-wrapper` inside the trigger, so it capped only the label. At 320px a long pipe measured 344px and one with a clear button 374px, and a custom pipe whose trigger is not a `kbq-button` was not capped at all. It now sits on `.kbq-pipe`, which every pipe gets from `KbqBasePipe`, and caps the pipe together with its clear and remove buttons. No `min-width: 0` is needed on the way down, since the label's grid tracks have no min-content and the trigger gives way down to its own paddings. The input pipe keeps its explicit width.
🚨 E2E tests failedReview the report for details. 💡 Comment |
lskramarov
changed the title
… elements (#DS-5588) With several `#kbqTitleText` elements the directive compared each one's full width with the whole container, so a part that lost width to its siblings, while its text would still fit the container on its own, was clipped without a tooltip. A filter-bar pipe hits this at its default max width: a 255px date range squeezed to 237px next to its name. Such hosts now also count a text element that is narrower than its own text. Single-element hosts keep the container comparison and its sub-pixel handling unchanged.
lskramarov
marked this pull request as draft
September 22, 2026 10:29
🚨 E2E tests failedReview the report for details. 💡 Comment |
Contributor
Author
|
/approve-snapshots |
|
🔄 Updating snapshots. |
lskramarov
marked this pull request as ready for review
September 22, 2026 11:48
|
✅ Snapshots updated! |
rmnturov
approved these changes
Sep 23, 2026
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
2 participants
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.
Summary
Имя пайпа в filter-bar схлопывалось до одного символа рядом с длинным значением. Имя и значение были flex-элементами с
overflow: hidden, который обнуляет автоматический минимальный размер, поэтому flexbox отбирал у обеих частей одинаковую долю: значение из 48 символов теряло 8 и оставалось читаемым, а имя из 3 символов теряло 1 и рисовалось как «Т…».Теперь это два сжимаемых grid-трека
minmax(0, max-content): часть, которой нужно меньше своей доли, сохраняет её целиком и отдаёт остаток соседу, а две длинные части делят строку поровну. Grid при этом никогда не режет часть, которую не резал flex.20-символьная эвристика
KbqPipeMinWidth, раньше защищавшая короткую часть, больше не применяется: её не было на пайпах multi-select, date и datetime и на значении multi-tree-select, перемер шёл только на сменуfilterBar.filter(), а порог был обрывом — имя ровно из 20 символов защиты уже не получало. Класс остаётся экспортом и помечен@deprecated: его удаление — breaking change с миграцией.--kbq-filter-bar-pipe-max-widthтеперь задаёт ширину всего пайпа: правило переехало с.kbq-button-wrapperвнутри триггера на базовый класс.kbq-pipe, который каждому пайпу, включая кастомные, ставитKbqBasePipe. Раньше токен ограничивал только подпись — при 320px длинный пайп был 344px, с кнопкой очистки 374px, а кастомный пайп с триггером не наkbq-buttonне ограничивался вовсе. Цепочкаmin-width: 0не нужна: у grid-треков подписи нет min-content, и триггер ужимается до собственных паддингов. Пайп input исключён — его явная ширина--kbq-filter-bar-pipe-input-widthпобеждает.Тултип пайпа (
kbq-title) не открывался, когда часть обрезана соседом: директива сравнивала полную ширину каждого#kbqTitleTextс шириной всего контейнера, а текст такой части в контейнер помещается. При нескольких#kbqTitleTextобрезанной теперь считается и часть, которая уже собственного текста. Хосты с одним текстом измеряются как раньше, вместе с обработкой субпикселей.List of notable changes:
--kbq-filter-bar-pipe-max-widthограничивает весь пайп вместе с кнопками очистки и удаления; пайп input исключён;kbq-title: при нескольких#kbqTitleTextтултип открывается и тогда, когда часть обрезана соседом;KbqPipeMinWidth; атрибут снят с шаблонов Select, TreeSelect, MultiTreeSelect, Text и ReadOnly и с примера кастомного пайпа в документации;E2eFilterBarPipeTruncationпайп с коротким именем и длинным значением (multi-select, с кнопкой удаления) и пайп input;kbq-titleв юнит- и e2e-тестах самой директивы.What should reviewers focus on?
/approve-snapshotsдля01-*— локального Docker нет, первый раунд покрыл только grid. Геометрия трёх скриншотных маршрутов измерена до и после переноса кэпа: меняется толькоE2eFilterBarStates— длинные text-пайпы 344 → 320px, datetime 338/374 → 320px, и первый ряд перестраивается (cleanable text-пайп поднимается в него).02-filters-*и03-option-caption-*совпали, так что их расхождение было бы поводом остановиться. Правкаkbq-titleна скриншоты не влияет: она меняет только то, откроется ли тултип при наведении.--kbq-filter-bar-pipe-max-width, он теперь означает ширину всего пайпа, а не области подписи: при тех же 320px подписи достаётся на 23px меньше, у пайпа с кнопкой очистки — на 54px. Заметно уже на значениях по умолчанию: диапазон дат вE2eFilterBarStatesтеперь обрезается (237 из 255px, с кнопкой очистки 198 из 255px) — и теперь с тултипом.kbq-titleзатрагивает только хосты с несколькими#kbqTitleText: в библиотеке это пайпы filter-bar, в документации — примеры «Multiple text elements» и «List option». Новая проверка требует ненулевойclientWidth, поэтому inline-части, которые ничего не обрезают, её не проходят. Весь юнит-набор components (5711 тестов) и e2ekbq-title, включая субпиксельные случаи, зелёные. Проверил в обе стороны: без правки новые юнит- и e2e-тесты падают.Пересекается с #2064, который решает ту же задачу тем же способом и тоже переносит
max-widthна.kbq-pipe, но добавляет цепочкуmin-width: 0(по замеру она ничего не меняет) и новую публичную директивуKbqPipeTitle— здесь тот же тултип починен в общемkbq-title.Задача: DS-5588.