@bmartinezcalvo I've updated the copy to reflect the fact that 32 characters is recommended, not a hard rule. https://docs.google.com/document/d/1ubIYZuoOSdTO-nzg_C8WrwYpl5zJVGorUcFdrtmiB1A/edit#bookmark=id.26087ncarc0u

Change 803493 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[design/codex@main] Button, ToggleButton: Text overflow from button is larger than max width

https://gerrit.wikimedia.org/r/803493

Change 803493 merged by jenkins-bot:

[design/codex@main] Button, ToggleButton: Text overflow from button is larger than max width

https://gerrit.wikimedia.org/r/803493

Design sign-off done. Ellipsis appears when text is long.

Although ellipsis appears when text is long, I've found some things to fix:

1. Ellipsis appears when text is longer than 53 characters. It should appears when the button has reached its available max-width, and in this case the button is not filling demo box width.

2. Also, the ellipsis doesn't adapt to each button width because the button is not filling the demo box but is displayed with a fixed width. Fir this reason, the button stands out the demo box when you resize the screen.

@SimoneThisDot I move the task to Ready for Development so you can have a look.

@bmartinezcalvo I noticed the same thing and decided to open a separate task, since these issues are caused by the button's current max-width, which I figured would require some discussion: T310158

Please feel free to comment on that new task if you have thoughts about how to handle this!

In T309825#7988890, @AnneT wrote:

@bmartinezcalvo I noticed the same thing and decided to open a separate task, since these issues are caused by the button's current max-width, which I figured would require some discussion: T310158

Please feel free to comment on that new task if you have thoughts about how to handle this!

@AnneT thank you for the information, I will review the new task.

@SimoneThisDot as my corrections collected in my previous comment are related with the button width (topic moved to this other task T310158) you can ignore them because the rest is working well in the component. So I move the task to Functional Testing since the design sign-off was done.

For completion on an i18n detail for overflow elements: https://en.wikipedia.org/wiki/Ellipsis#In_different_languages
According to above article in Chinese the ellipsis is “……”, which we're not covering (and can't) with the .text-overflow mixin currently.
My personal take was to continue to use three dot … ellipsis (but one char!) for now and know about and accept the imperfect internationalization status quo.

Hi @bmartinezcalvo @SimoneThisDot I had a look at this again and the overflow issue has been fixed. However, it seems the width on Firefox is slightly different from other browsers and truncates a character before the others do. The text I used in this case is:

Click me but do not tell me what happens when you overstimate

Chrome 102:

Safari 15.1:

Firefox 101.0.1:

I think that might be because the font Firefox uses is slightly larger/wider? I feel like we see subtle differences like that with Firefox pretty often. @Volker_E probably knows more.

As I mentioned during our "pair testing" session, this seems to be browser-related as I could not see any difference in the values of the component.

The difference is also not providing any "degradation" to the different browsers, so I do not think further development should be considered here (as they will prob result in hacks of some sort)

Thanks for your comments! Moving this to Product Sign-Off.

In T309825#7993750, @Catrope wrote:

I think that might be because the font Firefox uses is slightly larger/wider? I feel like we see subtle differences like that with Firefox pretty often. @Volker_E probably knows more.

This is a known issue with Firefox macOS: It uses 'Helvetica' as 'sans-serif' which is different to all other macOS browsers, who use 'San Francisco' (in CSS -apple-system)

"Helvetica"	"Helvetica Neue"	"San Francisco"/-apple-system

I've even filed a Firefox bug a while ago, cause for layout the default choice f*** sucks, specifically on the letter box issue, making the font never look vertically centered. But all of this doesn't stop this task from being moved to Product Sign-Off. @EUdoh-WMF pls take those font differences in account for future component testing, differences will remain.

Looks good. Signing off.