Epic ticket for the new language selector. Since new products use the new Vue-based front-end, this is an opportunity to create a standard language selection component in Vue that other products could reuse.
Details of the language selector have been documented in this spec document, and the design style guide. The tickets below capture the main milestones and other sub-tickets include other related tickets.
Updates about this ticket:
Language team wanted to write this language selector as a a new generation ULS with new frontend technology by incorportating the design details @Pginer-WMF provided. We were exploring different ideas on how to do this. I had a brief meeting with @Jdlrobson in 2020 November about how to approach this so that we can develop a new generation ULS with new technology by incorportating the design details @Pginer-WMF provided.
The current ULS is based on jquery.uls library written about 10 years ago. If we are rewriting it need to be with Vue(our new frontend technology), use our more mature design guidelines, incorporate all the learning from use(including perfromance, maintainance, bug reports)
As per the current status of Vue usage in foundation, it is not clear how a reusable higher level UI component need to be written. WVUI is in early stages of development. A language selector based on WVUI components, CSS and layout utilities would be a good first higher level UI component to explore. But we are not there yet. WVUI does not have the required components(example: dialogs) or layout system(example: responsive layout sytem: T90687)
We also not clear about using a Vue library component in a screen when it require multiple vue apps in single page. Not to mention the performance cost of multile frontend, UI libraries in a page.
Hack-ish approaches like renderless library, compiling to a webcomponent etc are there, but that will not serve the variety of usecases we want to serve and the flexibility we need. Such intermediate solutions often becomes burden to maintainance and proper deprecation will require more effort. It is important to do it right enough(in terms of performance, architecture) in the beginning itself.
Since the language team is working on section translation, one of the early vue based application, we took an initial iteration on developing the language selector using Vue(T253303). We could do that because section translation is an isolated special page with no interaction with rest of mediawiki features. This language selector uses the small UI library of section translation, which completes the requirements for language selector. But extracting that to a reusable library is a complete different story as mentioned above.
Till the Vue frontend usage is standardized, I don't see a way we can deliver a Vue UI compoenent like language selector that can replace the current ULS usecases. There are several immediate enhancement requests for current ULS, but promising that as part of new Vue based ULS can't be realisitcally done now.
Currently, the only way to address immediate ULS enhancements is to update the jquery based ULS codebase, even if it is a very old codebase and nobody enjoy adding more code to it.
I don't get this - black text is for text, not for links (this is a fundamental part of web design). It's also really not clear what this redesign will look like (does it go back to the sidebar? or stay separate? does it include links to the other Wikimedia projects, or just Wikipedia?)
This design is for a reusable language selector component. It can be used in many different places in the same way that a drop-down component or a calendar one allow to make selections in different contexts. Controls for selection such as the ones don't need to highlight each option as an interactive link to convey they can be selected.