Skip to content

[Flyout Template] Improve meta-block truncation - #289147

Merged
tsullivan merged 5 commits into
elastic:mainfrom
tsullivan:flyout-template/truncation-fixes
Sep 11, 2026
Merged

[Flyout Template] Improve meta-block truncation#289147
tsullivan merged 5 commits into
elastic:mainfrom
tsullivan:flyout-template/truncation-fixes

Conversation

@tsullivan

@tsullivan tsullivan commented Sep 3, 2026

Copy link
Copy Markdown
Member

Summary

Truncation polish for https://github.com/elastic/kibana-team/issues/3165

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

@tsullivan tsullivan added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Sep 3, 2026
@tsullivan
tsullivan marked this pull request as ready for review September 3, 2026 21:23
@tsullivan
tsullivan requested a review from a team as a code owner September 3, 2026 21:23
@tsullivan
tsullivan requested a review from eokoneyo September 3, 2026 21:23
@Dosant
Dosant self-requested a review September 8, 2026 14:49

@Dosant Dosant left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good overall. I left two follow-up comments around link rendering and sizing.

{truncatableText !== undefined ? (
<span css={memoized.truncatedValue}>
<span css={memoized.fullTextSizer} aria-hidden>
{item.value}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we render truncatableText in the sizing copy instead? Rendering item.value here and cloning it into the overlay mounts the link twice. That can duplicate refs, IDs, data-test-subj values, and component behavior.

* zero width inside a shrink-to-fit parent.
*/
const isLinkElement = (value: ReactNode): value is ReactElement<{ children?: ReactNode }> =>
isValidElement(value) && (value.type === EuiLink || value.type === 'a');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EuiLink does not always render an anchor: without a valid href, it renders a button. That button is shrink-to-fit and would contain the block-level EuiTextTruncate, so this path can hit the same layout failure described above. Can we restrict this to EuiLink instances guaranteed to render an anchor, or handle the button variant separately?

@tsullivan
tsullivan removed the request for review from eokoneyo September 11, 2026 17:25
@tsullivan
tsullivan enabled auto-merge (squash) September 11, 2026 17:28
@kibanamachine

Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Unknown metric groups

warm start memory

id before after diff
post forced gc heap baseline - 835809198 +835809198
post forced gc heap delta - -2577188 -2577188
post forced gc heap delta standard deviation - 3653385 +3653385
post forced gc heap target - 833232010 +833232010
tail heap delta - -39415759 -39415759
total +1630701646

Test Failures

  • [job] [logs] FTR Configs #32 / lens app - group 12 lens terms rank by sorting by custom metric should allow sort by custom metric

History

@tsullivan
tsullivan merged commit 3f5466a into elastic:main Sep 11, 2026
43 checks passed
@tsullivan
tsullivan deleted the flyout-template/truncation-fixes branch September 11, 2026 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes v9.6.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants