Repository navigation
fix(grid): ensure single long filter chip shrinks to cell width with ellipsis - 22.2.x - #17878
Open
desig9stein wants to merge 6 commits into
Open
desig9stein wants to merge 6 commits into
desig9stein wants to merge 6 commits into
Conversation
…ellipsis (22.2.x) A lone filter chip now shrinks to the filter cell down to its min-content width and truncates its label with an ellipsis instead of being clipped by the column. The hidden "more filters" indicator keeps its width but hides its icon, the connector keeps its text width, and the chips area spans the cell again so the visible-chips measurement stays correct. (cherry picked from commit e01818b) (cherry picked from commit b631217) Co-Authored-By: Claude Fable 5.1 <[email protected]>
desig9stein
added
chip
grid
❌ status: awaiting-test
2 of 23 tasks
…rable Address the review: the hidden "more filters" indicator is absolutely positioned and invisible, so a lone chip gets the whole cell while updateVisibleFilters() still reads its icon width (the badge stays absolute in the hidden state so it is not measured). Scope the lone-chip rule to the built-in filter chips, drop the duplicated chip padding from the label min-width, trim the comments, and list the tree and hierarchical grids in the changelog. Co-Authored-By: Claude Fable 5.1 <[email protected]>
…b.com:IgniteUI/igniteui-angular into mpopov/fix-filtering-row-chip-ellipsis-22.2.x # Conflicts: # CHANGELOG.md
…g-row-chip-ellipsis-22.2.x # Conflicts: # CHANGELOG.md
This branch has not been deployed
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.
Closes #17375
Port of #17873 to
22.2.x.Description
A single filter chip with a long label was never allowed to shrink (
min-width: max-content; flex-shrink: 0on the chip host), so it overflowed the filter cell and was clipped by the column edge instead of ending with an ellipsis.A lone chip in the filter cell can now shrink down to its
min-contentwidth. The label collapses and shows an ellipsis, while the condition and remove icons keep their size. Only a column narrower than the icons still clips the chip, as before. Chips keep their natural width when a column has more than one, so the "more filters" count logic is unchanged.Same changes as on master: the hidden "more filters" indicator keeps its width but hides its icon (the unlayered
igx-icondisplay rule beat the layereddisplay: noneon the child, so every filtered column carried a phantom 20px icon), the connector keeps its text width, and the chips area spans the full cell again so the visible-chips measurement compares against the available width.Motivation / Context
#17375
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
Grid (filtering row chips), Theming
How Has This Been Tested?
Added a spec in
grid-filtering-ui.spec.tsthat asserts the chip stays inside the cell, the label is truncated with an ellipsis, and the hidden indicator and its icon are not visible.grid-filtering-ui.spec.tspasses apart from the pre-existing locale-dependent date test ("Sep" vs "Sept"). Verified manually in the demo app on master at 80px, 150px, 235px to 300px column widths with one to three chips.Test Configuration:
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)🤖 Generated with Claude Code