Page MenuHomePhabricator

How should we style the active menu item/link when tabs are collapsed into a menu?
Open, MediumPublic

Description

Description

Below 720px the tabs on the right of the article toolbar (Read, Edit, Edit source, View history, etc.) get collapsed into a menu. How should we style the active menu item/link when they are in a menu, and no longer tabs? For example:

article in read modearticle in view history mode
Screen Shot 2022-09-15 at 5.15.25 PM.png (606×703 px, 193 KB)
Screen Shot 2022-09-15 at 5.15.53 PM.png (684×704 px, 149 KB)

Ideas

  1. Style them in black (which is what we do with the active tab)
article in read modearticle in view history mode
Screen Shot 2022-09-15 at 5.19.12 PM.png (660×687 px, 213 KB)
Screen Shot 2022-09-15 at 5.18.47 PM.png (644×687 px, 131 KB)
  1. Hide them
article in read modearticle in view history mode
Screen Shot 2022-09-15 at 5.20.13 PM.png (689×685 px, 225 KB)
Screen Shot 2022-09-15 at 5.20.33 PM.png (660×686 px, 130 KB)

Event Timeline

alexhollender_WMF renamed this task from How should we style the active "tab" when tabs are collapsed into a menu? to How should we style the active menu item/link when tabs are collapsed into a menu?.Sep 15 2022, 9:25 PM
alexhollender_WMF updated the task description. (Show Details)

cc @bmartinezcalvo @Sarai-WMDE, this is an interesting question related to menu link styling. I've also made a note of it in our Figma doc.

Hey @alexhollender_WMF. Thanks for the ping! I think that, once collapsed, the tabs should lose their own component properties and adopt that of a contextual navigational menu. For consistency, active items in the collapsed tabs menu should follow the style of the selected elements within the ToC's menu. In production, that'd be bold and #202122, but following Bárbara's comment in T309463: [Talk pages] Polish the design for the table of contents shown on talk pages, it seems that the correct style would be #2A4B8D (color-progressive--active) and bold.

ovasileva triaged this task as Medium priority.Sep 19 2022, 8:25 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

@Jdlrobson @ovasileva I think we're getting close to a point where we need a design decision here, right? It seems like bold + black would be the correct styling for now.

@alexhollender_WMF the active and selected state for menu items use background-color-progressive-subtle.

Captura de Pantalla 2022-12-15 a las 10.10.11.png (326×2 px, 241 KB)

If the selected option will be finally visible, I think we should use the same solution as in the system menu-item since when the tabs collapse they become a menu. If we use a menu then the selected item should use background-color-progressive-subtle.

Captura de Pantalla 2022-12-15 a las 10.22.03.png (1×1 px, 763 KB)