| RoySmith | |
| Sep 26 2022, 11:08 PM |
| F36934872: image.png | |
| Mar 31 2023, 1:56 AM |
| F36925633: image.png | |
| Mar 24 2023, 2:19 PM |
| F36921491: Screen Shot 2023-03-21 at 12.56.15 PM.png | |
| Mar 21 2023, 9:58 AM |
| F36921492: Screen Shot 2023-03-21 at 12.55.54 PM.png | |
| Mar 21 2023, 9:58 AM |
| F36909067: Screen Shot 2023-03-13 at 15.24.44 PM.png | |
| Mar 13 2023, 12:53 PM |
| F36909068: Screen Shot 2023-03-13 at 15.25.05 PM.png | |
| Mar 13 2023, 12:53 PM |
| F36909089: Screen Shot 2023-03-13 at 15.50.02 PM.png | |
| Mar 13 2023, 12:53 PM |
| F36909059: Screen Shot 2023-03-13 at 15.19.30 PM.png | |
| Mar 13 2023, 12:53 PM |
Go to https://en.wikipedia.org/wiki/Wikipedia:Sockpuppet_investigations/SPI/Cases?safemode=1
Click the "1 language" menu link. You'll get a "Search for a" message. I assume there was supposed to be some additional text.
Chrome Version 105.0.5195.125 (Official Build) (x86_64)
MacOS Monterey 12.5.1 (21G83)
Filed upstream issue https://github.com/wikimedia/jquery.uls/issues/433
@Pginer-WMF - Could you please comment there on expected behavior for narrow mode?
The Design systems team was working on defining min/ma width for menus. We may wan to align with the min-width used in this case.
We can also consider for the narrowest cases (one column) to use an alternative placeholder using only the text "Search". It would be more likely to fit and in such case and in such scenario searching is less relevant (short list of languages) so it may not be a problem to be a bit less specific with the label.
I'll check with the Design Systems team to identify which is the recommended min-width.
It seems the current width for the selector is already wider than the min-width proposed by the Design Systems team for input fields (128px).
I think that some approaches to consider could be:
At the moment, the current font-size of the text input is 1.143em (rendered as 16px). We could start by reducing the font size to about 1em (rendered as 14px) and removing the padding on all sides of the text input. This doesn't introduce any detrimental effects to the ULS from my testing.
- Apply ellipsis-based cropping when text gets cropped.
It is possible to add ellipsis onto a placeholder. The concern here would be that when the text field is in focus, the placeholder will still appear cropped given the size of the input field and length of the placeholder text. When out of focus, the placeholder will have the ellipsis in the event that the text overflows. I don't think this will have the intended effect as the text may still be rendered in a cropped way in either scenarios. See this Stackoverflow thread for more.
- For the most narrow version (and only there) use a simpler "Search" label instead. It is not as specific as the full text but may be less confusing than a cropped version of the full text. Given the button above mentions languages and the list below is a list of languages, the "Search" prompt may be clear in context.
This would probably be best done programmatically based on the width of the search input field.
The first and third options seem best to go ahead with.
I'd recommend not reducing the font. 16px is expected to be the default font size at some point (it is already the default browser size) and the search input is the main element of focus to invite people to search for their language.
Change 895707 had a related patch set uploaded (by Wangombe; author: Wangombe):
[mediawiki/extensions/UniversalLanguageSelector@master] Remove padding from .uls-filterinput
With this patch, here are results on following themes. Note that the 'X' (clear search field button still maintains its ideal position even after the change)
Timeless
Removing the padding somewhat makes the placeholder text make sense, i.e 'Search for a Lang...'
The next part of this fix would be to programmatically use a simpler "Search" label for the most narrow version of the ULS
Change 899478 had a related patch set uploaded (by Wangombe; author: Wangombe):
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
Change 899478 abandoned by Wangombe:
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
Reason:
Duplicate
Change 895707 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
From testing, it appears of the 3 menu width options available (wide, middle, narrow), narrow was the one most affected by the crop of the placeholder text and this has not been fixed. The images below show the difference in the menu size. The wide version would have the same place holder as middle.
Change 902234 had a related patch set uploaded (by Wangombe; author: Wangombe):
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
Change 902306 had a related patch set uploaded (by Wangombe; author: Wangombe):
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
Change 902306 abandoned by Wangombe:
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
Reason:
Duplicate
Change 902234 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls from upstream
