Button truncation issues

[WhiteLord]

This is a bug report for the @clr Angular or UI versions of the design system. For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

Whenever you style a button with "btn btn-link" and provide a fairly long text input, the text input gets truncated

How to reproduce

Link to stackblitz: https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ng14-3iytmn?file=src/app/app.component.html

Steps to reproduce the behavior:

1. Create a button element
2. Format it in the following way <button class="btn btn-link">This is a fairly long long long long text</button>

Expected behavior

I expect that the content won't be truncated

Versions

Clarity version:

• [ ] v12.x
• [x] v13.x
• [ ] Other:

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: "@angular/common": "13.3.11" "@clr/angular": "13.7.0", "@clr/icons": "13.0.2", "@clr/ui": "13.7.0",

Device:

• Type: MacBook
• OS: iOS
• Browser Chrome
• Version 107.0.5304.110

Additional notes

Add any other notes about the problem here.

[bbogdanov]

Hi George,

I would like to ask about your use case. Why would you like to have such a long button? In what context that button makes sense from your perspective to be that long?

P.S. The btn class has text-overflow: ellipsis , max-width:18rem and overflow: hidden that are making the button to be like that.

[WhiteLord]

My use case is the translation of a specific string in German. The EN string is fine, but German words consist in multiple long words put together, thus resulting in a button containing an ellipsis.

[bbogdanov]

Here is a valuable workaround.

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ng14-ca6jt8?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.scss

[WhiteLord]

Thanks. We do have multiple workarounds for multiple components inherited thourhgout the years. As I'm no stranger to the framework, this issue would be more of a "Hey folks, are you going to let us use buttons with a long enough text" instead of having a custom global class defined somewhere, and applying it (if you remember you initially had such a style defined somewhere).

[Jinnie]

I am not aware what's been the rationale behind adding maximum size and if it is still valid today. Cc-ing design: @Partick @colinreedmiller

[WhiteLord]

Folks, any updates on this?