Adding persistence to the page tools feature (T322051) made pinnableElement.js delegate to features.js to handle the toggling of the body class. However, this also diverged naming conventions that TOC and page tools use for the pinned and unpinned body class:
Page tools: vector-feature-page-tools-pinned-enabled and vector-feature-page-tools-pinned-disabled
TOC: vector-toc-pinned and vector-toc-unpinned
We should make TOC and page tools use the same naming convention for the body class. This might mean making TOC pinning logic also delegate to features.js to handle the toggling of the body class. If the persistence of pinned state is not wanted for TOC (open question, also see T316060), we might consider adding an isPersistent param to the features.js toggle method that TOC can pass as false.
Developer Notes
Note that because vector-toc-pinned and vector-toc-unpinned classes are part of cached HTML, we need to handle this in multiple deploys. For example,
- Deploy vector-feature-toc-pinned-enabled/vector-toc-pinned-disabled additions to CSS.
- Once 1) is cached, make the changes to the JS and HTML to use the new convention and remove old selectors in CSS
Acceptance Criteria
- All components that use pinning in Vector (at time of writing, page tools and TOC) use the same naming convention for the body class pinned state
QA steps
- As a logged in user, collapse the table of contents. Refresh page, and table of contents should remain collapsed.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T325032#8684296 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T325032#8712271 |
