TruncateEnd property in Layout component is not truncating content with ellipsis.

[vini-gupta]

Bug Report

Steps

The truncateEnd property in Layout component is just truncating the text without showing ellipsis.

Expected Result

The result that you expected.

Actual Result

The actual result that happened 💣

MitigationSteps

The truncateEnd property should have display:"block" instead of "flex" to truncate with ellipsis.

[bmdalex]

@vini-gupta - thanks for reporting this, it's something we should fix.

Here are some attempts and after that our resolution and solution.

Attempt no. 1: display: 'block' instead of display: 'flex' (proposed by @vini-gupta )

Using display: 'block' instead of display: 'flex' (or display: 'grid' for the main area) won't work for us because it'll break alignment of the items inside the start, main and end areas.

See: https://codesandbox.io/s/1rm85vyyl7

Attempt no. 2: Wrap ReactText (strings or numbers) in a span to achieve the ellipsis

Following https://css-tricks.com/flexbox-truncated-text/ article we could detect if the user passes string | number primitives to start, main and end areas and wrap them with a span.

However, we cannot do that because it'd imply that Layout component will have opinions on the elements we pass and the structure of the rendered DOM will change based on that. This contradicts Stardust principles.

Resolution

Since truncate* props (truncateStart, truncateMain, truncateEnd) failed to handle all truncation cases we decided to remove them from the API. We will do the same for ItemLayout. (BREAKING CHANGE)

Solution

Wrap the element that you need truncated with truncated Text component and pass that element to Layout's end slot

<Layout
  // ...
  end={<Text truncated>My long text that I need truncated</Text>}
  endCSS={{ overflow: 'hidden' }}
/>

See complete code: https://codesandbox.io/s/pm4vn7j0mm

fyi @kuzhelov @mnajdova