Page MenuHomePhabricator

Implement custom LanguageSelector component
Open, Needs TriagePublic13 Estimated Story Points


User stories

As a user of the Query Builder and/or the Mismatch Finder, I want to be able to easily switch the interface language of these tools.


  • Description: Language selectors display a list of languages that users can choose from. Apps can then treat selections according to different use cases (e.g. navigating to a different version of a page, purely as an input in case of translation, update the interface language). Check the Design Style Guide page on Language selector for further details.
  • Previous implementations: After an investigation (see T324653), we decided to base our custom implementation of the LanguageSelector off of the new Vue component created by the Language team at WMF (available on GitHub).

Design spec

Acceptance criteria

The custom LanguageSelector component is implemented following the design specifications:

  • The component's visual properties match the design guidelines
  • The component presents languages in a single-column list
  • States: the default state of the component is active, it can be filled and present an empty state in the lack of a match
  • The component becomes full-screen on mobile
  • The component adjusts to different reading directions (LTR, RTL)
  • The component is fully usable via keyboard


Please note: there is no loading state for this component
There seems to be a slowness issue with this, and fixing it is part of the challenge of creating the component. But also good to note that the language switcher of the query GUI faces similar issues
This component will be replaced by Codex. As such, it's a temporary thing and does not need to be fulled polished. Its been added to our tech debt list


  • The need to subject the component to a specific type of testing should be documented here.


Event Timeline

karapayneWMDE set the point value for this task to 13.

Task Breakdown Notes:

  • Query Builder first: will create the component in QB and copy it over to Mismatch Finder
  • Accept the tech debt of having two copies of the component until we decide whether to upstream it to Codex / inherit a codex implementation
  • We will not discuss the Query builder subtask (T328148): as it is understood to be part of this ticket that we are discussing
  • Although the specs display a multi-column layout, we are only creating a single column layout for the widget regardless of the number of languages, this should simplify responsivity in this initial version of the widget
  • These specs are more generic than what we are used to, as it does not use any of the design system tokens in this initial stage
  • Languages are displayed in their autonyms
  • Loading state is not specified for this component at this point in time, and is not in the scope of this task
  • Filtering should also remove filtered out items from the list
  • Filtering at the first version should be done by antonym alone
  • RTL mode depends on the current interface language
  • The keyboard shortcuts mentioned are based on the codex typeahead search component, and might need to be reimplemented.
  • At the very least, unit tests for the component should be included, and potentially browser tests as well, as they are already set up in QB
  • This task most probably not parllelizable
  • Break out small sub tasks as we do them from the list below (or at least for any adaptation of that list)

Potential Plan of Action:

  1. Create a new component in the QB componentes directory
  2. Take a look at the Vue Language Component made by the Language team, to try and see which patterns can be reused
  3. Basic Markup is added and rendered from a languages prop (and message of unavailable language) including CSS states
  4. Keyboard navigation is implemented
  5. Filtering behavior is added
  6. RTL state is added
  7. Mobile version (with additional Close button and full screen width) is implemented

Should the current user interface language be part of the shareable link or not?

Should the current user interface language be part of the shareable link or not?

Probably not but let's ask in the big runde just to be sure.

Should the current user interface language be part of the shareable link or not?

Since we don't include it in the Query UI let's not do it here either.

This comment was removed by Michael.

Hello there! Just took a look at the LanguageSelector in Query builder and, first, it looks great! 💯 I just found a couple of small fixes:

  1. The clear icon is not vertically aligned within the input:

Screenshot 2023-03-24 at 10.12 1.png (297×409 px, 22 KB)

  1. If possible, the top border of the menu shouldn't be visible. It should overlap with the input's border. At the same time, the input drops a shadow on top of the menu with the value 0 1px 2px rgba( 0 , 0 , 0 , 0.251 ). We should try this, as it would make the component look closer to the Style guide specs and the Language team's implementation. Nevertheless, if this is not an easy change, it's fine if we keep the current look as a compromise but make the top border radius 0px (the design direction here is a bit unclear at the moment but the latter is what Codex does for now).

Screenshot 2023-03-24 at 11.27.50.png (144×666 px, 12 KB)