Page MenuHomePhabricator

ToC: Allow Table of Contents to pin expanded sections
Closed, ResolvedPublic5 Estimated Story Points

Description

User story

While browsing an article, I'd like to see different subsections within the table of contents without having to scroll to them.

Background

This functionality expands on the expand/collapse behaviour outlined in T299361 which describes how the ToC should expand and collapse when clicking the section headings. This "pinned" behaviour, on the other hand, gives users the ability to expand and collapse sections explicitly without changing the scroll position on the page (by clicking on the triangle icon "▶" or the section heading).

Pinned section: A pinned section is a top-level section in the ToC that has been explicitly expanded or collapsed by the user by clicking the arrow icon "▶" .

Rationale: Clicking on the arrow icon or the section link on the ToC signals a different intent by the user because it is more deliberate than scrolling and more distinct than clicking the section link.

Design spec

Screen Shot 2022-01-19 at 12.03.23 PM.png (1×536 px, 82 KB)
Screen Shot 2022-01-20 at 10.47.53 AM.png (1×512 px, 90 KB)
Expanded statepinned state

UI Behaviour

"▶" arrow behaviour

When a section is collapsed→ Clicking the arrow→ Will expand the section
Screen Shot 2022-02-01 at 11.47.47 AM.png (398×490 px, 31 KB)
Screen Shot 2022-02-01 at 11.47.47 AM.png (398×490 px, 34 KB)
Screen Shot 2022-02-01 at 11.48.06 AM.png (434×484 px, 34 KB)

Same in reverse.


When a section is expanded AND active→ Clicking the arrow→ Will collapse the section*
Screen Shot 2022-02-01 at 12.02.33 PM.png (432×482 px, 35 KB)
Screen Shot 2022-02-01 at 12.06.12 PM.png (440×504 px, 39 KB)
Screen Shot 2022-02-01 at 12.03.21 PM.png (394×478 px, 31 KB)

Same in reverse.

Prototype

https://di-toc-phase2.web.app/Silver

AC

  • Clicking the arrow on a closed section opens it.
  • Clicking the arrow on an open section closes it.
  • Add unit tests to model the behaviour. A test driven approach is recommended.

QA Results - Prod

ACStatusDetails
1T300167#7740500
2T300167#7740500

Event Timeline

Jdrewniak renamed this task from ToC: Allow Table of Contents to pin expanded sections to `.Feb 1 2022, 5:28 PM
Jdrewniak renamed this task from ` to ToC: Allow Table of Contents to pin expanded sections.
Jdrewniak updated the task description. (Show Details)

@Jdrewniak Does the last part UI behavior still apply? I thought we weren't opening/closing sections based off scroll anymore?

When a section is expanded AND active → Clicking the arrow → Will collapse the section* → Then when scrolling up or down ↕ and scrolling back → the section will expand

@bwang Right. So I've updated the description. As you mention, section expanding/collapsing will no longer respond to any scroll interactions.
So technically clicking the section links will be similar to "pinning" a section open. However, The difference with the arrow will be that it will expand/collapse the section without scrolling to it.

Change 762962 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Toggle ToC sections when clicking toggle button

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

Change 762962 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Toggle ToC sections when clicking toggle button

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

bwang moved this task from Doing to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang subscribed.
LGoto added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Clicking the arrow on a closed section opens it.
✅ AC2: Clicking the arrow on an open section closes it.

Screen Recording 2022-02-27 at 9.25.01 PM.mov.gif (910×542 px, 2 MB)