-
Notifications
You must be signed in to change notification settings - Fork 8.5k
[Discover] Fix truncation for longer text in table #241440
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Pinging @elastic/kibana-data-discovery (Team:DataDiscovery) |
…/kibana into discover-fix-one-line-truncation
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
History
|
src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx
Outdated
Show resolved
Hide resolved
davismcphee
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome, thanks!
|
Starting backport for target branches: 8.19, 9.1, 9.2 |
(cherry picked from commit b947916)
(cherry picked from commit b947916)
(cherry picked from commit b947916)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…242499) # Backport This will backport the following commits from `main` to `9.1`: - [[Discover] Fix truncation for longer text in table (#241440)](#241440) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ania Kowalska","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-11-11T08:39:22Z","message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:version","v9.3.0","v8.19.7","v9.1.7","v9.2.1"],"title":"[Discover] Fix truncation for longer text in table","number":241440,"url":"https://github.com/elastic/kibana/pull/241440","mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.1","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/241440","number":241440,"mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},{"branch":"8.19","label":"v8.19.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Ania Kowalska <[email protected]>
…242500) # Backport This will backport the following commits from `main` to `9.2`: - [[Discover] Fix truncation for longer text in table (#241440)](#241440) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ania Kowalska","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-11-11T08:39:22Z","message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:version","v9.3.0","v8.19.7","v9.1.7","v9.2.1"],"title":"[Discover] Fix truncation for longer text in table","number":241440,"url":"https://github.com/elastic/kibana/pull/241440","mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.1","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/241440","number":241440,"mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},{"branch":"8.19","label":"v8.19.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Ania Kowalska <[email protected]>
…242498) # Backport This will backport the following commits from `main` to `8.19`: - [[Discover] Fix truncation for longer text in table (#241440)](#241440) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ania Kowalska","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-11-11T08:39:22Z","message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:version","v9.3.0","v8.19.7","v9.1.7","v9.2.1"],"title":"[Discover] Fix truncation for longer text in table","number":241440,"url":"https://github.com/elastic/kibana/pull/241440","mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.1","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/241440","number":241440,"mergeCommit":{"message":"[Discover] Fix truncation for longer text in table (#241440)","sha":"b947916eba486d340b61214a429f2cf32a0ea4c2"}},{"branch":"8.19","label":"v8.19.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Ania Kowalska <[email protected]>
Summary
Closes #238831
After wrapping cell into a
divin purpose of in-table-search (we need arefthere) we lost cell content truncation, because styles applied by EUI are not inherited further.Note
Targeting div via class and applying EUI styles is obsolete. Eventually replacing
divwith aspanwas sufficient to inherit styles successfully. Leaving the screenshots (UI wise solution is the same) and old description below for clear changes history.UI before in-table-search

UI after in-table-search

EUI docs

As a solution, I firstly added a
.eui-textTruncateclass directly to that new div, however it was then applied to multilines as well and the class forced one-line text render, no matter of body cell lines count.Eventually I've targeted
.euiDataGridRowCell__content--defaultHeight > div(targeting --defaultHeight is already a workaround for one line summary truncation) and applied truncation styles manually. Another possibility would be applyingeuiTextTruncate()helper, however it doesn't work in an object syntax we use here (following to Emotion standards).I'm open to refactor to css`` syntax, which accepts
euiTextTruncate()if we prefer to use EUI helper, instead of keeping Emotion syntax aligned.Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:breakinglabel should be applied in these situations.release_note:*label is applied per the guidelinesbackport:*labels.Identify risks
Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.
Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.