Picker: placeholder string is truncated for some locales when isLoading is set to true

[lreis]

🐛 Bug Report

The placeholder string "Select an option" is truncated in 8 locales when the the isLoading property is set to true.

🤔 Expected Behavior

No truncation

😯 Current Behavior

This can be reproduced with the isLoading, no items story of the Picker component. Here's an example of the issue, for French:

This is impacting the cs-CZ, es-ES, fr-CA, fr-FR, hu-HU, it-IT, ja-JP and pt-BR locales.

💁 Possible Solution

💻 Code Sample

Used the latest storybook for testing

🧢 Your Company/Team

Adobe Globalization team

[LFDanLu]

I'm not really sure what the best way to handle this would be to be honest. Would we expect the Picker to expand to fit the placeholder text, thus introducing a possible layout shift? What if the user has set a fixed width?

[lreis]

@LFDanLu Agreed, it's not worth introducing a layout shift for this. One alternative I see is to reduce the length of the placeholder string. Do you think using just "Select..." is acceptable / understandable by users?

If not, I guess it's OK to leave this as is, since it's not really preventing users from performing a selection (and they would have seen the original string before the loading event kicks in). Perhaps this could be tagged somehow as a reminder for improvement in a future version of the component.

[LFDanLu]

I'll bring up reducing the placeholder string with the team, I don't quite remember where it came from.

[lreis]

@LFDanLu perhaps it's from Spectrum design? The string is present in their documentation - https://spectrum.adobe.com/page/picker/#Anatomy

[LFDanLu]

thanks for jogging my memory, it indeed came from a discussion we had with Spectrum Design several years back. I'll bring this up with them and let you know what they come back with.

[LFDanLu]

Globalization team and Spectrum Design discussed this and have agreed that we can reduce the placeholder string to "Select...". Moving to our backlog for prioritization