Settings: simplify language picker component

[rickybanister]

The language picker in the general settings screen is a custom dropdown:

It has the word 'CHANGE' inside the box indicating it can be clicked, but this doesn't seem necessary. We can make it look exactly like the timezone picker just below.

Something like this:

[davemart-in]

If we remove the word "CHANGE", I assume we will still need to use a custom dropdown component here @rickybanister. To clarify, the focus for this issue is around visually consistent not component consistency, right?

[rickybanister]

I hacked the inspector to create my mockup above, we likely do not need a custom select menu. We could try using a standard select menu with just the language name in text.

Or EN - English if the code and language name are helpful.

We should check on accessibility best practices as well though and make sure we can properly render all language names natively in the picker, that kind of thing.

[davemart-in]

Alright, if we're talking about replacing the component, I'll move this to the backlog, as I don't think it's super high priority.

[rickybanister]

I do think my initial proposal is lighter weight—to just remove the word 'change' from the dropdown and make the height and font-weight align.

It's not very important, I just don't really understand why this element is so different to begin with :)

[davemart-in]

I was chatting with Gary about this and he brought up that this language UI has a completely different UI once you click in which has a search Ui baked in.

[pento]

As Dave mentioned, the popup for this provides a better UI than a standard dropdown, which includes search.

Interestingly, the search functionality is quite comprehensive. I can search for languages by their English name, their localised name (including non-latin character sets), and their name in my UI language.

Given how unwieldy it would be if we replaced this with a standard dropdown (or a SelectDropdown, which provides largely the same functionality), I'm inclined to think it needs a more comprehensive solution.

Site timezones have worked around this issue by suggesting an option, we could do the same based on the browser's language settings.

Alternatively, it appears that Gutenberg is close to merging exactly the UI component we could use here. Of course, this runs into the problem of how we manage ad-hoc mixing of WordPress components into existing Calypso UIs (vs examples like Gutenboarding, where the UI was created entirely with WordPress components), but I suspect that's a simpler problem to solve than creating a new searchable dropdown component.

[rickybanister]

Thanks for looking into this. The real impetus of this issue was the visual appearance of the select menu itself. We can probably do about 10 minutes of css work to make it the same size, height of a regular select and remove the 'change' text. We can keep the popup as is for now.

Longer term I think we are likely to see much more adoption of gutenberg primitives and components, to the point where we consume all of gutenberg within calypso. We would only maintain our own components for elements that serve no purpose in core (like an upgrade nudge or something). We don't need to move in that direction immediately, but whenever practical we should consider doing so. Maintaining less code over time will benefit engineering, and a more cohesive experience across wp-admin, the editor, and wpcom will benefit customers very directly. It's worth stating explicitly that there is no 'brand value' in having different UI components. We can apply a sense of brand through color and typography in a more sustainable way than through proprietary interaction patterns.

[ncardeli]

I can take a look at this, following @rickybanister proposal to remove the "change" text and make it look like a regular select.

[ncardeli]

I took a closer look at this issue and have a couple of questions:

1. Should the language picker match the height of the timezone select (40px)?

If so, I think it would look too cramped, specially when the selected language has both a language code and a subcode (for example, ES MX - Español de México).

48px height

vs

40px height

2. Should the language picker and the select match the font size, weight and color? I think they should

Matching font size, weight and color

vs

Non-matching

To sum up, this is how I feel it would look best (48px height and matching font):

[rickybanister]

If we remove the br from the language code I think it looks just fine and has plenty of breathing room.

Removing font-weight; 600; as well will help it align. There's no reason this should look different from other dropdowns.

[ncardeli]

Ok, let's get this done 👍