Page MenuHomePhabricator

Prepare content columns for Zebra#9 design update
Closed, ResolvedPublic8 Estimated Story Points

Description

NOTE: Work on this cannot begin until T332449 is completed.

Per the conversation in T259240, we would like to update the Vector 2022 design to draw higher contrast between sections of the page. This task assumes the header portion of the design has been completed in T332449 and focuses on producing the design of the page columns.

Design spec

Prototype: https://di-content-separation.web.app/Moss

Screenshot 2023-03-20 at 9.55.09 AM.png (1×2 px, 944 KB)
Screenshot 2023-03-20 at 10.16.55 AM.png (572×1 px, 319 KB)
Screenshot 2023-03-20 at 10.17.07 AM.png (574×1 px, 282 KB)
ToC & tools menumain menu & tools menusingle column

Note: The design & prototype are based on a new grid system that will not be part of this implementation. For exact spacing and sizing, defer to design review, and use standardized variables when possible.

Alignment: a notable change is the alignment of the main-menu button to the edge of the sidebar ToC. Currently, the edge of the button is aligned with the ToC text. This design update aligns the border of the ToC container with the main menu button instead.

Palette
Page background color: #f8f9fa
content background: #ffffff
content borders: 1px solid #ececec
content rounded corner: 4px
content padding: TBD
column & row gutters: TBD

Page Footer TBD

Technical notes
  • Per discussion on T331320#8705410 the importance of maintaining the tab order was raised, and the preferred approach to styling the content column is to place the background colors & borders on the page title, toolbar and content areas individually. We shouldn't use a wrapper element to create these styles because the page tools menu sits between the toolbar and content, and a wrapper element would change that tab order.
  • We can use either a mixin or a class to generalize these container styles, but the same border & backgrounds will apply to ToC, main menu, page tools, and the content areas, so there is an opportunity to unify these styles in some way.
  • These changes should be scoped to the feature flagged

A/C

  • When the feature flag is enabled, the new design is visible.
  • When the feature flag is disabled, no changes occur.
  • When the full-width toggle is enabled, the content column expands as it currently does.

QA Results - Prod

ACStatusDetails
1T332600#8809390
2T332600#8809390
3T332600#8809390

Event Timeline

ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.
LGoto set the point value for this task to 8.Mar 23 2023, 5:35 PM

Change 907927 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [POC] Zebra design styles

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

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

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

Per design review with @KieranMcCann,

  • Column layout: ToC column & Page tools column should be symmetrical (per the new 24 column grid layout spec, it should be 4 (toc) / 16 (article) / 4 (tools) )
  • Header should have a reduced height
  • grid gap should be 24px
  • ToC height is too big (should have space at bottom equal to grid gap)
  • On lower resolutions, content padding should be reduced, but gray background should still be visible

Some small issues I noticed:

  • The fade indicator needs to be updated, its not really visible currently F36955647
  • The scrollbar on pinned elements is inside the padding (F36955648), ideally it covers the entire height of the element like so: F36955650
  • The subsection toggle buttons in the TOC are smaller than original, they should be 22px but instead are 19.25. Looks like the font size was decreased F36955657

Questions for @KieranMcCann

  • The prototype removes the borders that separate menus inside dropdowns and pinnable elements (Before: F36955664 After: F36955660). I feel like the border was helpful for separating groups of content, would it be worth considering adding back some sort of affordance, maybe spacing if not the border?
  • I noticed the dropdown styles are updated in this patch, if we are changing them could we match the OOUI styles (i.e. F36955706)? They didnt match prior to Zebra either, but I think this is a good opportunity to make it consistent and up to spec

Change 909760 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [Refactor] Prepare existing styles for zebra module

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

Change 910036 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Create skins.vector.zebra.styles module

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

Change 909760 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Refactor] Prepare existing styles for zebra module

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

Change 910097 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Scope styles related to zebra feature flag

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

Change 910036 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Create skins.vector.zebra.styles module

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

Change 910118 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Add initial Zebra design update for page layout

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

Change 910097 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Scope styles related to zebra feature flag

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

Change 910118 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add initial Zebra design update for page layout

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

@bwang thank you for getting this initial implementation over the finish line!

The design is currently visible on the beta cluster with this feature flag:
https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?VectorZebraDesign=1

Since there are known design issues with this implementation, noted in this follow-up task: "T335155-[Follow-up] Zebra update design review & adjustments" I don't think we should spend much time QA'ing or design reviewing this specific task.
I think it's ok to send this task to sign-off now, and do more exploratory QA after the implementation meets the design specification.

The AC per the description can be validated by visiting the beta cluster with the feature flag on:

Screenshot 2023-04-24 at 11.11.57 AM.png (886×1 px, 387 KB)
Zebra flag enabled
Screenshot 2023-04-24 at 11.12.03 AM.png (886×1 px, 414 KB)
Zebra & full width enabled
Jdrewniak added a subscriber: Edtadros.

Some small issues I noticed:

  • The fade indicator needs to be updated, its not really visible currently F36955647
  • The scrollbar on pinned elements is inside the padding (F36955648), ideally it covers the entire height of the element like so: F36955650
  • The subsection toggle buttons in the TOC are smaller than original, they should be 22px but instead are 19.25. Looks like the font size was decreased F36955657

Questions for @KieranMcCann

  • The prototype removes the borders that separate menus inside dropdowns and pinnable elements (Before: F36955664 After: F36955660). I feel like the border was helpful for separating groups of content, would it be worth considering adding back some sort of affordance, maybe spacing if not the border?
  • I noticed the dropdown styles are updated in this patch, if we are changing them could we match the OOUI styles (i.e. F36955706)? They didnt match prior to Zebra either, but I think this is a good opportunity to make it consistent and up to spec

Hi @bwang. Thanks for issues and questions. As @Jdrewniak mentioned in his comment, I’ll deal with visual design issues in the follow up task (T335155) but I’ll keep them noted.

Edtadros removed ovasileva as the assignee of this task.
Edtadros added a subscriber: ovasileva.

Test Result - Prod

Status: ✅ PASS
Environment: testwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: When the feature flag is enabled, the new design is visible.

Screenshot 2023-04-26 at 4.52.04 PM.png (956×1 px, 231 KB)

✅ AC2: When the feature flag is disabled, no changes occur.
Screenshot 2023-04-26 at 4.52.23 PM.png (957×1 px, 238 KB)

✅ AC3: When the full-width toggle is enabled, the content column expands as it currently does.
Screenshot 2023-04-26 at 4.52.53 PM.png (957×1 px, 286 KB)

Change 907927 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] Create skins.vector.style.zebra style module

Reason:

superseded by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/910118

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