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?

In T328764#8688456, @Lucas_Werkmeister_WMDE wrote:

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.

In T328764#8688456, @Lucas_Werkmeister_WMDE wrote:

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.

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:

2. 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).