The LanguageOverlay is an Overlay which overrides templatePartials.content to replace the body of the overlay element.
Code: https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/src/mobile.languages.structured/LanguageOverlay.js
Similar to how we refactor the TalkOverlay in T215370 we will convert this to an Overlay which has a LanguageSearcher child.
This new component will look like this:
This change will span 2 directories.
Acceptance criteria
- Minerva uses a languageOverlay factory function for generating the overlay used for the language feature inside resources/skins.minerva.scripts/init.js. As before it is associated with the route #/language
- There is no LanguageOverlay
- A new language widget is created
- The new language searcher component can be rendered outside an Overlay if wanted.
- Styles referring to the language-overlay class are scoped to the new component. Feel free to make use of BEM if that makes sense with the new class names.
- No changes have been made to the underlying behaviour of the overlay
- Consider moving the async api call from Minerva to getLanguages into the newly created MobileFrontend factory function (https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.scripts/init.js#L158) -- this seems to be in languageOverlay#loadLanguageSearcher()
QA steps
Exploratory testing needed for visual regressions and bugs.
- Click the language button to open the language overlay. This is what we want to test.
- Test the search filter feature by typing into "Search for a language"
- Test closing via back button and close icon
- Check you can click languages
- Close overlay and open again
- When clicking a language, we store that as a preferred language. Check that any previously clicked languages show on subsequent visits in SUGGESTED LANGUAGES
When looking for UI regressions compare all parts of the language workflow with what's currently on production, accessible via:
https://en.wikipedia.org/wiki/Barack%20Obama#/languages
Note there is one expected UI regression: the spinner will now show inside the body of the language overlay
Sign off steps
- The newly created LanguageSearcher will have less than the desired amount of code coverage. It may be appropriate as part of this task to bump code coverage to 100% but it may be better to spin this out into a new task.-- Both languageOverlay and LanguageSearcher.js have 100% coverage.
QA Results
| Status | Details)) |
| ✅ Passed | T215657#4983613 |
