Create basic one column LanguageSelector component


Article Images

QueryBuilder: Create basic one column LanguageSelector component

Implement the first three steps of the parent task:

  • Create a new component in the QB components directory
  • Take a look at the Vue Language Component made by the Language team, to try and see which patterns can be reused
  • Basic Markup is added and rendered from a languages prop (and message of unavailable language) including CSS states (Menu Item States in the Figma file)

Note: there is also a columns prop that takes 'one' or 'three' as input

This PoC can be used as a base to build the component.

Event Timeline

guergana.tzatchkova renamed this task from Create basic one column LanguageSelector component to QueryBuilder: Create basic one column LanguageSelector component.Feb 13 2023, 10:33 AM

@Arian_Borzog @karapayneWMDE Please check the visual implementation of the base elements of the component LanguageSelector. The component has been added to the screen for now just so you can review it, but it will be not be merged into the code. The component will be added with the button and correct position in another task: T328148 . Please note that this version doesn't include the mobile version, keyboard navigation or RTL behaviour, those features will be added in subsequent tasks.
https://889547--clicky-sparqly.netlify.app/

Hi @guergana.tzatchkova :)

Just a couple of sizing amendments on this.

It looks like the padding on the bottom of the search is a little too high, it should be 16px.
Here is a screenshot to illustrate:

image.png (318×661 px, 25 KB)

And it looks like the dimensions of the search box are a little off too, it should be 384 x 52px.
I think the height will be fixed when the padding is amended.

The rest looks great!

Thanks so much :)

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits