Layout component now tracked under T305069: ToC: Layout spec

Since the toggle icon is new, I assume we need @Volker_E's help to add the new chevron icon into OOUI and do a release, similar to the watchlist icon. Adding the icon isnt blocking, it can happen alongside dev work.
I also noticed that OOUI already has a very similar chevron/arrow icon, I'm not sure if that matters.

@alexhollender_WMF I was wondering, given our our convo about the small touchsize, what do you think about adding some invisible padding? I.e. Adding 5px padding to the chevron would increase the touch size from 12px to 22px. It still doesn't meet the WCAG requirement, but I'd say its a pretty good improvement and it wouldn't alter any of the visual design.

Isnt this the same icon we use for section collapsing in mobile (rotated)?

I think it's slightly different. The icons in mobile are the "collapse"/"expand" OOUI icons, while the svg in this task is slightly thicker/shorter

@bwang @Jdlrobson I just tried out the icon we use in mobile and it works well enough. to keep things simple let's re-use that icon at the smaller size. I've updated the prototype to use the same SVG we use in Minerva (https://di-toc-with-menu-above.web.app/Tuna):

@bwang adding some padding to the chevron sounds good. keep in mind that the chevron and the section link next to it are separate clickable elements. let me know when I can review that.

Change 778599 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Style fixes for sticky TOC

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

Change 779126 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Replace TOC arrow icon

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

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7bf0454258/w/

Change 779126 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Replace TOC arrow icon

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

reviewed on https://patchdemo.wmflabs.org/wikis/7bf0454258/wiki/Barack_Obama?useskin=vector-2022&tableofcontents=1

looks awesome 👍 perfectly to spec 😄

• Remove border from ToC and main menu
• Reduce font-size of "Contents" heading to 16px
• Replace ToC section toggle icons with chevrons
• The icon should have 5px additional padding to increase the touch area size
• add transition: 100ms to section toggle icons, this transition should take into account the prefers-reduced-motion media query
• Adjust spacing around and between ToC elements

feel free to move to signoff after code review

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

https://patchdemo.wmflabs.org/wikis/7bf0454258/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1bfd991efc/w/

for code + design review: https://patchdemo.wmflabs.org/wikis/c0e2e484ef/wiki/Test-TOC?useskin=vector-2022&tableofcontents=1

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

https://patchdemo.wmflabs.org/wikis/1bfd991efc/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7eb47c98e2/w/

hi @alexhollender_WMF during code review, 2 issues arose around the searchbox thanks to @bwang's eagle eyes:

1. Although I managed to get the actual input box aligned between clicking in and out of the input, you can see that the magnifying glass icon doesn't align with the searchbox dropdown icons. I'm guessing that the placement of the search icon should match vertically with the search dropdown thumbnails?

If so, this will move the default placement of that magnifying glass icon inside the search input a bit more over to the right so that it doesn't bounce/move between clicking in/out of the searchbox.

2. There's a bit of a jump when first clicking into the searchbox input on page load (subsequent clicks in/out don't exhibit this behavior)

I'm not that familiar with how the simple search + Vue search was put together so I'm not sure how to solve this jumpy behavior. You can see the jumpy-ness at https://patchdemo.wmflabs.org/wikis/7eb47c98e2/wiki/Test-TOC?useskin=vector-2022&tableofcontents=1

@bwang suggested to avoid using the autoExpandWidth prop to not have to add any overriding CSS and so that the search icon can be aligned - would this be acceptable?

In T304166#7849951, @cjming wrote:

I'm guessing that the placement of the search icon should match vertically with the search dropdown thumbnails?

If I understand your question correctly, yes. You can see the search spec here: https://phabricator.wikimedia.org/T255603

2. There's a bit of a jump when first clicking into the searchbox input on page load (subsequent clicks in/out don't exhibit this behavior...@bwang suggested to avoid using the autoExpandWidth prop to not have to add any overriding CSS and so that the search icon can be aligned - would this be acceptable?

Is this a technical question or a design question? I don't have an opinion on how it's fixed, as long as it looks like it did before : )

In T304166#7849965, @alexhollender_WMF wrote:

I don't have an opinion on how it's fixed, as long as it looks like it did before : )

@alexhollender_WMF I just realized that this jumpy behavior is happening on prod -- so these changes should replicate what's currently happening?

In T304166#7849969, @cjming wrote:

@alexhollender_WMF I just realized that this jumpy behavior is happening on prod -- so these changes should replicate what's currently happening?

no, it's currently incorrect. I'm not sure when the bug first appeared. You can reference this prototype to see how it's supposed to be , however there are some aspects of it that you won't be able to replicate exactly because of how Vue loads. I suggest moving this into a separate task.

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

https://patchdemo.wmflabs.org/wikis/7eb47c98e2/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c0e2e484ef/w/

trying again - for code/design review: https://patchdemo.wmflabs.org/wikis/c0e2e484ef/wiki/Test-TOC?useskin=vector-2022&tableofcontents=1

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/995593dce7/w/

Change 778599 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout + visual style changes for sticky TOC

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

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

https://patchdemo.wmflabs.org/wikis/995593dce7/w/

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

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

one more time - for design review: https://patchdemo.wmflabs.org/wikis/33de85e58a/wiki/TestTOCupdates?useskin=vector-2022&tableofcontents=1

See T305069#7866293 for reports of this work and of the layout changes

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Remove border from ToC and main menu

@Edtadros Thank you, Alex confirmed today in standup that the visual regression tests looked fine so I've moved this and T305069 to QA in prod

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Remove border from ToC and main menu

In T304166#7933082, @Edtadros wrote:

Test Result - Prod

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

Test Artifact(s):

QA Steps

❌ AC2: Reduce font-size of "Contents" heading to 16px
Font size is 14

hi @Edtadros -- according to the updated prototype (https://di-toc-with-menu-above.web.app/Tuna) in the task description - "Contents" is 14px. Not sure if this got updated/documented somewhere or not. @alexhollender_WMF do you mind confirming?

In T304166#7936217, @cjming wrote:

hi @Edtadros -- according to the updated prototype (https://di-toc-with-menu-above.web.app/Tuna) in the task description - "Contents" is 14px. Not sure if this got updated/documented somewhere or not. @alexhollender_WMF do you mind confirming?

hey, apologies for the conflicting information. yes, 14px is correct. I will change the task description now. my bad