search

vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
https://clarity.design
Other
350 stars 80 forks source link

Button truncation issues #399

Open WhiteLord opened 2 years ago

WhiteLord commented 2 years ago

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:

Framework:

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

Device:

Additional notes

Add any other notes about the problem here.

bbogdanov commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Folks, any updates on this?