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 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 menu's top border radius 0px (the design direction here is a bit unclear at the moment but the latter is what Codex does for now).

3. Currently, the menu changes in height when it's filtered: it wraps around the fewer available options. Following the existing implementations, though, it looks like the menu's height shouldn't change.

Current implementation	With adjustment

Can you please check again issue nr. 3? @Sarai-WMDE @LucasWerkmeister
https://905236--clicky-sparqly.netlify.app/
https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/905236

The fix looks good both above and below the tablet breakpoint: the menu preserves a fixed height even when it's filtered and the number of items is reduced. Thank you, @guergana.tzatchkova!

Change 907821 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[wikidata/query-builder@master] Align clear button with input field

https://gerrit.wikimedia.org/r/907821

@Sarai-WMDE for issue nr 1 could you please check here if the aligment is better:
https://907821--clicky-sparqly.netlify.app/
https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/907821

This ticket is only for the alignment.

Change 907879 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[wikidata/query-builder@master] Make border-radius 0 only for top border

https://gerrit.wikimedia.org/r/907879

For point 2 @Sarai-WMDE and I have decided that the box-shadow will be left as is for now because the CSS is already there but it is not being displayed as expected and we don't want to invest too much in this at this moment.

The border-radius of the top of the menu has been set to 0px in this patch: https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/907879
Test:
https://907879--clicky-sparqly.netlify.app/

Change 907821 merged by jenkins-bot:

[wikidata/query-builder@master] Vertically align clear button with input field

https://gerrit.wikimedia.org/r/907821

Change 907879 merged by jenkins-bot:

[wikidata/query-builder@master] Make border-radius 0 only for top border

https://gerrit.wikimedia.org/r/907879