Page MenuHomePhabricator

Consolidate MinervaNeue and Flow on one WikimediaUI icon for ToC
Closed, ResolvedPublic

Description

Coming from T231613#5471903 we're dealing with two separate, very close icons, that should be consolidated into one.

  1. OOUI's 'stripeToC'; currently only in use in Flow, see also T141801: OOUI/WikimediaUI icon inventory (tracking)
  2. MinervaNeue's new 'toc-*' icons from https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/534865/

Expected result

Use one icon for table of contents.

Design

image.png (14×18 px, 119 B)
vs
image.png (124×370 px, 4 KB)

in comparison bullet point list:

image.png (68×206 px, 2 KB)

In context:

Minerva TOCFlow
image.png (717×1 px, 270 KB)
image.png (717×1 px, 225 KB)

SVGs:

Proposal

  • Deprecate & remove 'stripeToC' in OOUI
    • Deprecate
    • Remove it
  • Use 'listBullet' in Flow
  • Use 'listBullet' in MinervaNeue

QA steps

QA Results - Prod

ACStatusDetails
1T232383#6092066
2T232383#6092066

Event Timeline

@Volker_E perhaps this?

image.png (14×18 px, 119 B)

In context:

Minerva TOCFlow
image.png (717×1 px, 270 KB)
image.png (717×1 px, 225 KB)

SVGs:

No strong preference one, one thing though is, the mobile site doesn't use an indicated list, only indentation. But I think that is acceptable.

No strong preference one, one thing though is, the mobile site doesn't use an indicated list, only indentation. But I think that is acceptable.

Good point. In Flow the table of contents does not use bullets or numerals either, however I think this icon does a better job of representing the idea of "table of contents" even if it doesn't accurately represent our versions visually. If we removed the bullets I also think the icon would become too generic (it would look just like text/paragraph).

ovasileva triaged this task as Medium priority.Sep 17 2019, 9:40 AM
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.

Spoke with @Volker_E — I think it's fine to swap the current contents icon for the bullet list one, e.g.

image.png (975×1 px, 565 KB)

And that'd be the result of reusing listBullet instead of stripeToC in Flow:

BeforeAfter
image.png (398×1 px, 48 KB)
image.png (528×1 px, 70 KB)

Change 575046 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [DEPRECATING CHANGE] icons: Deprecate 'toc' from 'icons-layout'

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

Change 575046 merged by jenkins-bot:
[oojs/ui@master] [DEPRECATING CHANGE] icons: Deprecate 'toc' from 'icons-layout'

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

Change 575115 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.37.0

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

Change 575115 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.37.0

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

@Volker_E is a Minerva patch needed here? Note I'm seeing some UI regressions in table of contents so if so maybe we could fix those too? (note position of arrow not floated right or correct color)

Screen Shot 2020-03-03 at 8.50.55 AM.png (488×494 px, 37 KB)

Change 583191 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Rename 'edit' icon internally to 'editLock'

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

Volker_E renamed this task from Consolidate MinervaNeue's ToC icon with OOUI's to Consolidate MinervaNeue and Flow on one WikimediaUI icon for ToC.Mar 27 2020, 3:45 AM
Volker_E updated the task description. (Show Details)

Change 583820 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Flow@master] Replace deprecated 'stripeToC' with 'listBullet' icon

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

@Jdlrobson Yes, there's a patch needed. Should go hand in hand with T244444. We need to use 'listBullet' icon for that.

Change 583820 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Replace deprecated 'stripeToC' with 'listBullet' icon

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

Change 583191 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Rename several icons to WikimediaUI naming

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

Change 585348 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Use standardized icon classes

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

Change 585348 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Use standardized icon classes and fix some missing icons

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

Change 585362 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Remove 'stripe*' and 'toc' icons

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

Change 585362 merged by jenkins-bot:
[oojs/ui@master] [BREAKING CHANGE] icons: Remove 'stripe*' and 'toc' icons

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

Volker_E moved this task from Backlog to OOUI-0.38.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.38.0); removed OOUI.

Change 588826 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.38.0

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

Change 588826 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.38.0

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

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: prod
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps

✅ AC1: Visit Albert Einstein and look out for ToC interaction element. Confirm that 'listBullet' icon

image.png (68×206 px, 2 KB)
is used
en.m.wikipedia.org_wiki_Albert_Einstein(iPad) (1).png (2×1 px, 556 KB)

✅ AC2: Visit https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS and confirm ”Browse topics“ interaction elements uses 'listBullet' icon
m.mediawiki.org_wiki_Manual_talk_Coding_conventions_CSS(iPad).png (2×1 px, 383 KB)

Looks good, resolving.