Skip to content

[Legend] List layout widthLimit (px truncation) doesn’t ellipsize when maxLines is 0 #2804

@maryam-saeidi

Description

@maryam-saeidi

Summary

When using Legend List layout (the LegendList path renders labels with truncationMode="px"), setting labelOptions.widthLimit is expected to truncate labels with ellipsis at the given pixel width, and to ignore maxLines. However, if labelOptions.maxLines is set to 0 (common way to represent “no line truncation”), labels wrap into multiple lines instead of ellipsizing.

Observed behavior

In List layout, with labelOptions.widthLimit = 250 and labelOptions.maxLines = 0, legend labels render as multi-line wrapped text rather than a single-line ellipsis-truncated label.
There is also a similar issue with labelOptions.maxLines = 2, since it will show multiple lines in the List Layout mode.

Expected behavior

  • In List layout / truncationMode="px", widthLimit should drive truncation with ellipsis (single-line behavior), and maxLines should be irrelevant.
  • In particular, maxLines = 0 should not cause wrapping when truncationMode="px" (Same for maxLines=2 and ...)
Additional technical details

Technical details / suspected cause

  • LegendList renders Label with truncationMode: "px" (dist/components/legend/legend_list.js).
  • Label applies clampStyles for px mode (maxWidth/overflow/textOverflow), but the CSS class echLegendItem__label--singleline (which applies white-space: nowrap via euiTextTruncate) is only added when maxLines === 1 (dist/components/legend/label.js).
  • If consumers pass maxLines = 0, the label element keeps the base .echLegendItem__label styles which include wrap-enabled rules (overflow-wrap, word-break, hyphens) from the theme (theme.scss wrapText mixin), causing wrapping even though textOverflow: ellipsis is set inline.

Metadata

Metadata

Assignees

No one assigned

    Labels

    :legendLegend related issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions