Page MenuHomePhabricator
Create Task
Maniphest T268241

Style language button and menu
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
ovasileva
Nov 19 2020, 3:38 PM
Tags
Referenced Files
F34161650: image.png
Mar 15 2021, 2:31 PM
F34161643: image.png
Mar 15 2021, 2:31 PM
F34121638: Screen Shot 2021-02-24 at 3.14.35 PM.png
Feb 24 2021, 11:15 PM
F34110483: image.png
Feb 17 2021, 6:45 PM
F34110472: image.png
Feb 17 2021, 6:45 PM
F34110478: image.png
Feb 17 2021, 6:45 PM
F34110475: image.png
Feb 17 2021, 6:45 PM
F34101031: image.png
Feb 11 2021, 11:19 PM
View All 16 Files
Subscribers
Aklapper
• alexhollender_WMF
Jdlrobson
Jdrewniak
• nray
ovasileva
Pginer-WMF
View All 9 Subscribers

Description

Background

In T260738: Language button v1 - allow language button to appear at top of page (plus JS fallback) we will be creating the basis for the new language switcher with an initial language button displaying the list of languages via the ULS. This task will build upon that work and focus on styles and precise location of the new button

Acceptence Criteria

  • Style and place new language button according to design requirements defined below

Current design

defaulthoveractivefocus
Screen Shot 2021-02-24 at 3.14.35 PM.png (82×376 px, 8 KB)
image.png (32×174 px, 2 KB)
image.png (32×174 px, 2 KB)
image.png (36×178 px, 2 KB)
-bg: #F8F9FAbg: #EAEDF0, border: #72777Dborder: 2px #3366cc

details
text color: #202122
entire height (including borders): 32px
entire width (including borders): ~174px
border-radius: 2px
font-size: 14px equivalent in ems
main icon canvas size: 20x20px

layout/spacing

image.png (156×523 px, 14 KB)

Developer notes

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080 will be interesting reading prior to taking this on.

Ideas explored:
Using a different template for language button

Details

Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jan 25 2021, 10:22 PM
Jdlrobson renamed this task from Style and place language button to Style language button and menu.Jan 28 2021, 9:42 PM
Jdlrobson updated the task description. (Show Details)Feb 1 2021, 10:07 PM
Jdlrobson claimed this task.Feb 1 2021, 10:30 PM
Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Feb 1 2021, 11:14 PM

Change 660956 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] The label of the language button refers to the number of languages

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

gerritbot added a project: Patch-For-Review.Feb 1 2021, 11:14 PM

Change 660957 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Add language icon to language button

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

gerritbot added a comment.Feb 1 2021, 11:14 PM

Change 660958 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Style the language button

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Feb 1 2021, 11:15 PM
PatchDemoBot added a comment.Feb 1 2021, 11:20 PM

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/e81a73e45af32f6298bac59145f33d38/w/

Jdlrobson removed Jdlrobson as the assignee of this task.Feb 2 2021, 5:24 PM
• alexhollender_WMF updated the task description. (Show Details)Feb 2 2021, 6:12 PM
• nray claimed this task.Feb 2 2021, 6:20 PM
• nray reassigned this task from • nray to Jdlrobson.Feb 3 2021, 5:10 PM
• nray moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson reassigned this task from Jdlrobson to • nray.Feb 3 2021, 5:11 PM
Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
LGoto added a subscriber: Volker_E.Feb 3 2021, 5:15 PM
gerritbot added a comment.Feb 3 2021, 9:53 PM

Change 661497 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Align mw-ui-button with latest decision recommendation

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

gerritbot added a comment.Feb 4 2021, 2:59 AM

Change 660956 merged by jenkins-bot:
[mediawiki/skins/Vector@master] The label of the language button refers to the number of languages

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.30; 2021-02-09).Feb 4 2021, 4:00 AM
gerritbot added a comment.Feb 4 2021, 4:03 AM

Change 660957 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add language icon to language button

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

PatchDemoBot added a comment.Feb 4 2021, 7:11 PM

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/fd41ec583a6c36f68037a0b790b1d13f/w/

• alexhollender_WMF added a comment.Feb 4 2021, 8:19 PM

@Jdlrobson looking at https://patchdemo.wmflabs.org/wikis/6a1964b9516fbbb14565d9e0453269c3/w/index.php/Spain?useskinversion=2

Changes for button
  • reduce font-size to 14px (currently it's 16px)
  • change color to #202122 (currently it's #54595d)
  • padding-right for button text should be 30px (currently it's 40px)
  • language icon seems to be displaying at 21x21px (should be 20x20px)
  • language icon's margin-right should be 7px (currently is 14px)
  • the down arrow should be 10px from the right edge of the button (currently it's 8px)

after making those changes in the dev tools I'm seeing:

Screen Shot 2021-02-04 at 3.13.39 PM.png (147×364 px, 9 KB)

The remaining issue is the colors of the icons. It seems that on mobile the icons are #54595d, but on desktop the icons are #202122 (see the new Recent Changes page for examples of icons in buttons). I'm not sure how to resolve this?

Changes for non-JS menu
  • increase font-size to 16px (currently it's 13px)
  • add a max-height of ~65vh (or something similar)
  • add overflow: scroll
  • add a border-top (since the menu is wider than the button)

after making those changes in the dev tools I'm seeing:

Screen Shot 2021-02-04 at 3.18.04 PM.png (657×308 px, 57 KB)

gerritbot added a comment.Feb 5 2021, 12:06 AM

Change 660958 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Style the language button

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

• nray removed • nray as the assignee of this task.Feb 5 2021, 12:59 AM
Jdlrobson claimed this task.Feb 5 2021, 1:58 AM
Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Feb 5 2021, 2:18 AM

Change 661831 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Language button - design fixes

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Feb 5 2021, 2:19 AM
• nray claimed this task.Feb 5 2021, 9:31 PM
gerritbot added a comment.Feb 8 2021, 10:42 PM

Change 661831 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button - design fixes

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

gerritbot added a comment.Feb 8 2021, 11:25 PM

Change 662793 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Fix focus, active and hover states of language button

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

Jdlrobson reassigned this task from • nray to Jdrewniak.Feb 8 2021, 11:28 PM

https://gerrit.wikimedia.org/r/662793 and https://gerrit.wikimedia.org/r/661497 ould the mediawiki core button inline with the wvui spec.

Volker_E added a comment.Feb 9 2021, 12:27 PM

We are not changing direction of arrow on dropdown-like buttons if expanded. That's non-default behaviour and should be fixed.
Also the border-bottom-radius needs to be set to 0 as soon as the menu is visible.

Jdlrobson added a comment.Feb 9 2021, 11:02 PM

We are not changing direction of arrow on dropdown-like buttons if expanded. That's non-default behaviour and should be fixed.

We do flip the arrow direction. See screenshot., The border-radius is disabled in https://gerrit.wikimedia.org/r/c/662793

Screen Shot 2021-02-09 at 2.59.21 PM.png (906×424 px, 44 KB)

Jdlrobson mentioned this in T191021: User links: Standardize `.mw-ui-icon` to overhauled icon canvas size 20x20.Feb 9 2021, 11:18 PM
• alexhollender_WMF added subscribers: RHo, Pginer-WMF.Feb 11 2021, 11:19 PM

@ovasileva @Jdlrobson — after @Volker_E and I spoke today we realized that a slightly different button styling should be used here. Apologies from both of us for not bringing this up sooner. cc @RHo @Pginer-WMF

What we considered: based on our current design system we have three button styling choices

quiet
Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)
quiet progressive
image.png (386×987 px, 109 KB)
normal
Screen Shot 2021-02-11 at 5.21.43 PM.png (387×981 px, 145 KB)

Regarding user testing: thankfully during testing we tested both quiet and normal and though we're talking about extremely small sample sizes here, we found no difference between the two.

Regarding visual design: currently it is difficult to judge what the best visual style for this button will ultimately be since the surrounding elements have yet to be re-designed. Volker pointed out that the normal style button currently feels out of place, as it's much larger than the other elements around it.

Regarding UX patterns: Volker spoke about a distinction between buttons and links. A button is typically used for taking an action within the current view (e.g. the Submit button below this comment box), whereas a link takes you to a different page. Of course many, or perhaps even most, buttons/links blur the lines here. The language button/link in question is difficult to categorize because it's a trigger for a menu of links (so neither clearly a button or a link).

Regarding A/B testing: running the A/B test with a less prominent button seems like a desirable option because it will make the test that much harder, plus we can always make the button more noticeable if we need to.

Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

ovasileva added a comment.Feb 12 2021, 10:53 AM

Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

Looks good to me.

RHo added a comment.Feb 12 2021, 11:37 AM
In T268241#6825061, @alexhollender wrote:

Regarding A/B testing: running the A/B test with a less prominent button seems like a desirable option because it will make the test that much harder, plus we can always make the button more noticeable if we need to.

^ This makes sense and the quiet button looks good to me too.

Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

• alexhollender_WMF updated the task description. (Show Details)Feb 17 2021, 6:45 PM
Volker_E added a comment.Feb 17 2021, 8:59 PM

Thanks for the extensive updates @alexhollender – one thing still to consider is using a quiet progressive button (in case folks would be confused with the non-interaction color treatment). I understand that a colored icon and label would possibly mean a stronger than necessary focus on the right side. Coming from considerations on discoverability and clarity in case the tests show us unexpected low interaction results.
For next step let's go with Alex' latest design.

gerritbot added a comment.Feb 18 2021, 6:47 PM

Change 665151 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Make quiet button mixin available

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

gerritbot added a comment.Feb 18 2021, 6:55 PM

Change 665151 abandoned by Jdlrobson:
[mediawiki/core@master] Make quiet button mixin available

Reason:
After talking to Jan and volker, we're just going to load the mediawiki.ui button module.

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

gerritbot added a comment.Feb 18 2021, 7:09 PM

Change 661497 merged by jenkins-bot:
[mediawiki/core@master] Align mw-ui-button with latest design recommendation

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

gerritbot added a comment.Feb 18 2021, 7:18 PM

Change 665156 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Align quiet buttons with style guide

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

ReleaseTaggerBot edited projects, added MW-1.36-notes (1.36.0-wmf.32; 2021-02-23); removed MW-1.36-notes (1.36.0-wmf.30; 2021-02-09).Feb 18 2021, 8:00 PM
ovasileva closed subtask T260738: Language button v1 - allow language button to appear at top of page (plus JS fallback) as Resolved.Feb 19 2021, 10:49 AM
Jdlrobson updated the task description. (Show Details)Feb 24 2021, 11:15 PM
Jdlrobson reassigned this task from Jdrewniak to Volker_E.Mar 1 2021, 6:12 PM
Jdlrobson added a subscriber: Jdrewniak.
Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 1 2021, 9:52 PM
gerritbot added a comment.Mar 1 2021, 10:16 PM

Change 665156 merged by jenkins-bot:
[mediawiki/core@master] Align quiet buttons with style guide

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

gerritbot added a comment.Mar 1 2021, 10:28 PM

Change 662793 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button is quiet with focus, active and hover states

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

Jdlrobson reassigned this task from Volker_E to • alexhollender_WMF.EditedMar 1 2021, 10:52 PM

Note arrow flipping will be handled as part of T275681
https://patchdemo.wmflabs.org/wikis/796258b4f19bcff4ce8db662ed396b26/w/index.php/Spain?useskinversion=2

Remaining Issues

  1. Focus state

I'm pretty sure the focus state is still wrong, and perhaps other things.
The focus state never gets triggered for the button as we autofocus the search input in the dialog. What should we do about that?

  1. height is wrong. in wvui it's 32px, here it's 20px.
  1. quiet buttons should be bold.

Am putting in design review as I think we should be able to find these inconsistencies easier together.

ReleaseTaggerBot edited projects, added MW-1.36-notes (1.36.0-wmf.33; 2021-03-02); removed MW-1.36-notes (1.36.0-wmf.32; 2021-02-23).Mar 1 2021, 11:00 PM
gerritbot added a comment.Mar 2 2021, 12:59 AM

Change 667740 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Correct the height of the language button

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

gerritbot added a comment.Mar 2 2021, 1:01 AM

Change 667741 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Quiet buttons should be bold and min height of 32px

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

Jdlrobson closed subtask T275089: Improve layout of language menu (columns & headings) as Resolved.Mar 2 2021, 5:45 PM
• alexhollender_WMF reassigned this task from • alexhollender_WMF to Volker_E.Mar 3 2021, 2:11 PM

From a conversation with @Jdlrobson yesterday: it might sense for you, @Volker_E, to be responsible for design review here since you know the most about our buttons. Even better would be if you want to take this task on yourself and also provide the appropriate styling adjustments. Feel free to re-assign to me if you don't want to take this on.

gerritbot added a comment.Mar 3 2021, 6:07 PM

Change 667741 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.ui: Quiet buttons set to bold and with min-height of 32px

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

ReleaseTaggerBot edited projects, added MW-1.36-notes (1.36.0-wmf.34; 2021-03-09); removed MW-1.36-notes (1.36.0-wmf.33; 2021-03-02).Mar 3 2021, 7:00 PM
Volker_E added a comment.Mar 3 2021, 7:49 PM

Sounds good to me @alexhollender!

gerritbot added a comment.Mar 3 2021, 7:53 PM

Change 667740 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Correct the height of the language button

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

Jdlrobson added a comment.EditedMar 4 2021, 1:33 AM

@Volker_E @alexhollender please review the patchdemo and determine whether it's acceptable and if any further refinements to the core spec for quiet buttons are needed.

I'm going to be stepping away from this patch for now to focus on the instrumentation.

• alexhollender_WMF added a comment.Mar 8 2021, 6:52 PM

@ovasileva @Jdlrobson: Volker and I just met about the button. There are two slight changes that still need to be made, however we are also comfortable shipping the button as-is. Therefore we were thinking:

  • if Volker can submit a patch on (or before) Wednesday we'll make the changes
  • otherwise we should move this forward and create a separate task for the changes to be made as a follow-up

The changes are:

  • reduce the space between the icon and the button text
  • increase the opacity of the icon and the down arrow to 1
gerritbot added a comment.Mar 8 2021, 7:08 PM

Change 669954 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Language button skinStyle overrides

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

Jdlrobson moved this task from Design Review to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 8 2021, 7:11 PM
Volker_E added a comment.Mar 8 2021, 7:57 PM

The icon comes out of ULS as well, we would need to change the color upstream and put opacity on the other cases from my quick review.

gerritbot added a comment.Mar 8 2021, 8:56 PM

Change 669954 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button skinStyle overrides

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

Volker_E added a comment.Mar 10 2021, 6:17 PM

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

Volker_E updated the task description. (Show Details)Mar 10 2021, 6:21 PM
Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 10 2021, 6:27 PM
Pginer-WMF added a comment.Mar 11 2021, 8:29 AM
In T268241#6901870, @Volker_E wrote:

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

• alexhollender_WMF added a comment.Mar 11 2021, 3:39 PM
In T268241#6903724, @Pginer-WMF wrote:
In T268241#6901870, @Volker_E wrote:

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

@Volker_E could you provide an example of how what you're imagining would look?

stjn mentioned this in T277365: mw-ui-button in wikitext causes text to be vertically misaligned.Mar 13 2021, 10:12 PM
Volker_E added a comment.Mar 15 2021, 2:31 PM
In T268241#6903724, @Pginer-WMF wrote:
In T268241#6901870, @Volker_E wrote:

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

Correct, the thinking behind is, that we currently miss a clear visual connection between the frameless button and the (current) menu:

image.png (898×1 px, 196 KB)

A few weeks ago, we were discussing putting the position of the language selector menu underneath the button.
Having this and a treatment of a frameless toggle button (toggled) seems like a necessary improvement.

image.png (738×1 px, 125 KB)

A pokey would be another possible supporter of the mental connection between button and menu. Note, that frameless toggle button was added without design support to OOUI. It could see some improvements on the way like normal toggle button's Accent30 color.

• alexhollender_WMF reassigned this task from Volker_E to ovasileva.Mar 15 2021, 3:30 PM
• alexhollender_WMF moved this task from Design Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

and we have another button! this is all set to deploy. @Volker_E please open follow-up tasks for any remaining concerns.

ovasileva closed subtask T275147: Empty state for language button and menu as Declined.Mar 16 2021, 10:16 AM
Volker_E mentioned this in T277660: Language button icon should feature opacity based Base10 equivalent color.Mar 17 2021, 1:45 PM
ovasileva closed this task as Resolved.Mar 17 2021, 5:13 PM

Alright! Resolving

ovasileva closed subtask T268514: [Language switcher] Language switcher button design as Resolved.Mar 19 2021, 9:27 AM
ovasileva closed subtask T276255: Discuss solution for clipped placeholder text in ULS when screen width decreased as Resolved.Apr 13 2021, 11:34 AM
ovasileva closed subtask T276248: Position language menu below language button as Resolved.May 10 2021, 8:54 AM
• alexhollender_WMF added a subtask: T283757: Improvements to language button.Jun 1 2021, 6:48 PM
• alexhollender_WMF reopened subtask T275147: Empty state for language button and menu as Open.Sep 15 2021, 3:13 PM
ovasileva closed subtask T283757: Improvements to language button as Resolved.Sep 30 2021, 9:55 PM
PatchDemoBot added a comment.Jan 20 2022, 1:28 PM

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/fd41ec583a6c36f68037a0b790b1d13f/w/

PatchDemoBot added a comment.Jan 20 2022, 1:37 PM

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/e81a73e45af32f6298bac59145f33d38/w/

Pginer-WMF closed subtask T275147: Empty state for language button and menu as Resolved.Oct 23 2023, 2:31 PM
Maintenance_bot removed a project: Patch-For-Review.Oct 23 2023, 3:10 PM
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