Trendyol / baklava

Baklava is a design system provided by Trendyol to create a consistent UI/UX for app users.
https://baklava.design/
MIT License
1.27k stars 112 forks source link

Add Ellipsis Overflow: Adding text-overflow:ellipsis to bl-input component #607

Open ozkersemih opened 1 year ago

ozkersemih commented 1 year ago

Input Component Text Overflowing

I think we need to add text-overflow: ellipsis to see three dots when text is too long for input component. For example what I want to see:

Ekran Resmi 2023-05-31 13 11 47

but now I see this:

Ekran Resmi 2023-05-31 13 12 20

Proposed solution

No response

Alternatives considered

No response

Additional technical context

No response

muratcorlu commented 1 year ago

@ozkersemih I don't know if this technically possible with a reasonable way. Since the value is shown by native input inside, we are not able to use text-overflow: ellipsis on text value. Do you have any suggestion?

yagiz2000 commented 1 year ago

@ozkersemih @muratcorlu I think that ellipsis behaviour could be nice feature for disabled inputs (by the way it is possible to make text-overflow:ellipsis in disabled inputs) otherwise it looks redundant