Page MenuHomePhabricator

Support for a responsive language selector
Open, MediumPublic

Description

Different steps of the Section Translation process (T243495) require language selection. This is an opportunity to create a standard language selection component in Vue that other products could reuse.

Overview

The language selector shows a list of languages available for the user to select. Languages are listed using their name in their own language (i.e., the autonym). The number of languages provided in the selector is variable and can be potentially large. The selector supports searching, surfacing frequent languages, and adjusting the layout to the number of languages.

Overview of the selection process:

  • Open the selector. The language selector opens after the user taps on an action (e.g., button) or selection (e.g., drop-down) control. The design of these entry points is out of the scope of the current task. A button can be used for testing purposes.
  • Search. The user types a search query that filters the list of languages shown.
  • Select a language. Taping on a language from the list completes the selection. Closing the selector automatically and making the selected value available to the product using the selector.
  • Close the selector. The selector closes when taping outside the selector, pressing "esc" key or with a close action available on narrow screens. This cancels the selection.

Responsive layout

The layout is adapted to the following factors:

Number of languages

  • 0–9 languages. Suggested languages are hidden. The list of languages has no label, and uses one column.
  • 10-29 languages. Suggested languages are shown using 2 columns. The list of languages uses one column. Both lists are labelled.
  • 30 or more languages. Suggested languages are shown. The lists of suggested and all languages use 3 columns (on wide screens). Additional space is added after each block of 5 rows.
0–9 languages10-29 languages30-* languages

Screen size

  • Narrow screen. The selector is shown as a full screen dialog. The list of all languages always uses one column.
  • Wider screen. The selector is shown as a dialog over existing content. The list of all languages can use one or three columns depending on the number of languages (see above). The length of the selector will adapt to the available languages with a max height of 312px.
Wide screenNarrow screen

Product preferences

  • Option to hide suggested languages. Suggested languages are shown by default when there are 10 languages or more available. However, this list is optional and apps have the option to hide the suggested languages list. In such case, the list of all languages will be shown without a title label.

The layout specifications for the different cases are captured below:

Styling notes

Some notes on styling for the different pieces of the selector.

Main panel:

  • Background: white (Base100)
  • Border: 1px in Base70 with 2px radius.
  • Shadow: Base0 at 25% opacity 1px down, 2px of blur

Text styles:

  • Default: Standard body text (sans-serif 16 px in Base10)
  • List title ("suggested", "All languages"): Base30

Header:

  • Separator lines: 1px in Base70

Search bar:

  • Shadow: Base0 at 25% opacity 1px down, 2px of blur
  • Border radius: 2px radius on top corners, straight corners at the bottom.

Hover and focus states

  • Search bar focus state will use the 2px Accent50 border, the standard for input boxes.
  • Language in the list are highlighted with a Base80 on hover.

Search

We may want to reuse existing search components.

Considerations for search:

  • The search box gets the input focus automatically when the selector is opened.
  • User input filters the list of languages based on prefix search as the user types. Search will be case insensitive. When searching, only the search results are displayed (no separate list for "suggested"). See example below.
  • The search API for the current language selector can be reused to support flexible search capabilities (e.g., finding a language name written in any other language)
  • Type-ahead autocompletion will add text after the search term to complete it when a matching language is found. For example, when typing "engli" the autocompletion text will show "sh" in grey to suggest "English" to the user.
  • The search text is cleared when the selector gets closed. That is, previous searches should not remain visible when the selector is opened again.

Suggested languages

  • The selector displays up to six suggested languages, using two or three columns depending on the number of languages (see responsive layout section).
  • By default suggested languages
  • Apps opening the selector can provide their own list of suggested languages, or hide the list.
  • When suggested languages are not show (or the list is empty), the list of "all languages" will have its title hidden.

Keyboard and pointer support

  • "Esc" key would cancel the selection and close the selector.
  • Arrow keys can be used to move through the options. The active item will be shown with a Base80 background.
  • "Enter" would confirm the selection. Selecting the first results while searching, or the focused element while moving through the options.
  • Hovering a language will show it with a Base80 background.

Further context

This ticket covers only the basic aspects for the selector. Additional usecases requiring additional information, actions, or selection modes will be supported in separate tickets:

For a deep dive on how all these fit together you can check this document.

Event Timeline

Pginer-WMF updated the task description. (Show Details)
Pginer-WMF renamed this task from Support for a mobile language list to Support for a responsive language selector.Sep 30 2020, 2:28 PM
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF updated the task description. (Show Details)

Change 635505 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] POC: Renderless language selector and custom selectos based on it

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

Change 635505 abandoned by Santhosh:
[mediawiki/extensions/ContentTranslation@master] POC: Renderless language selector and custom selectos based on it

Reason:
It was just POC

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