[docs] Use Button for language menu

[mbrookes]

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes.

Comparing: ccc470e...de42fab

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	0.00%	331,962	331,962	90,633	90,633
@material-ui/core/Paper	0.00%	0.00%	68,660	68,660	20,458	20,458
@material-ui/core/Paper.esm	0.00%	0.00%	62,098	62,098	19,203	19,203
@material-ui/core/Popper	0.00%	0.00%	28,397	28,397	10,159	10,159
@material-ui/core/Textarea	0.00%	0.00%	5,082	5,082	2,132	2,132
@material-ui/core/TrapFocus	0.00%	0.00%	3,766	3,766	1,596	1,596
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,348	16,348	5,818	5,818
@material-ui/core/useMediaQuery	0.00%	0.00%	2,488	2,488	1,050	1,050
@material-ui/lab	0.00%	0.00%	154,783	154,783	46,921	46,921
@material-ui/styles	0.00%	0.00%	51,420	51,420	15,288	15,288
@material-ui/system	0.00%	0.00%	15,581	15,581	4,351	4,351
Button	0.00%	0.00%	78,633	78,633	24,021	24,021
Modal	0.00%	0.00%	14,542	14,542	5,114	5,114
Portal	0.00%	0.00%	2,907	2,907	1,318	1,318
Rating	0.00%	0.00%	69,963	69,963	21,856	21,856
Slider	0.00%	0.00%	75,084	75,084	23,184	23,184
colorManipulator	0.00%	0.00%	3,835	3,835	1,519	1,519
docs.landing	0.00%	0.00%	54,267	54,267	14,345	14,345
docs.main	+0.06% 🔺	+0.05% 🔺	581,547	581,908	186,199	186,288
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	302,849	302,849	87,078	87,078

Generated by 🚫 dangerJS against de42fab

[oliviertassinari]

looks great

[eps1lon]

I like that 👍

[mbrookes]

Personally I prefer the option showing the currently selected language.

It more closely follows the spec for menus used for item selection:

https://material.io/components/menus/#exposed-dropdown-menu

The flag is a pretty clear indicator of the menu's purpose if you find yourself viewing the docs in a language you don't understand.

However since there was a preference for the word "language" instead, I have no idea what the right thing to do is vs localisation of that string. React localises it though, so perhaps we should follow suit?

[eps1lon]

Flags can be hard to distinguish depending on size and background.

Displaying the current value makes sense if you have a visible label.

I think I prefer following react here so that it's immediately familiar for people coming from the react docs or vice versa.

[oliviertassinari]

I like the argument of being close to React (of @eps1lon), the docusaurus approach is interesting too: https://docusaurus.io/en/. But no matter what we pick, it's probably not much different, these are all great options; @mbrookes I think that you can move forward with what you prefer, don't see much need in a long discussion here :)

[mbrookes]

So, there is no common opinion on what to use for the text, if any:

https://uxdesign.cc/my-take-on-language-selectors-945caceb58f7
https://usersnap.com/blog/design-language-switch/
http://www.flagsarenotlanguages.com/blog/best-practice-for-presenting-languages/
https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility
https://davidboniface.net/best-practice-for-presenting-website-language-selection/

...but there is one common thread – don't use flags.

I propose using the icon we have now, displaying the selected language (as per MD spec recommendation) with the text hidden at small screen sizes, and with the dropdown icon.

We should also remove the flags.

[oliviertassinari]

Awesome