Use Codex button/icon markup instead of mediawiki ui markup in Vector
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	May 11 2023, 4:51 PM

Project Tags

Referenced Files

None

Subscribers

Description

Blockers: https://gerrit.wikimedia.org/r/c/design/codex/+/919207 and T336548 and T336533 and Codex v0.10.0

In T335710 we worked out the remaining blockers for switching to Codex markup. This task is for making the actual change.

Cached HTML should not be a problem for the most part, as mediawiki.ui.icon/mediawiki.ui.button will be loaded alongside the old mark up.

TODO

Make sure MediaWiki core is using a Codex version greater than v0.10.0 with fixes for the blockers above

We will switch the markup for:

Buttons
Icons
Check <label> and <a> elements in particular. Codex doesn't reset these so we'll need to do that inside Vector to make sure they look correct.

For the purpose of this ticket you can make assumptions that all blockers are merged, and performance is not going to be a problem.

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/912974 can be used as a reference of the expected code change.

QA

As part of code review before merging run Pixel locally
Verify visual changes in Pixel.wmcloud.org and confirm they are expected.
Either instigate a code freeze OR Update the pixel instance to run Pixel with the new markup so that we don't miss further visual regressions.

Details

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Use Codex for button styles, start transitioning icons to use Codex icon mixins	Jdlrobson	mediawiki/skins/Vector	master	+411 -251
Drop styles for cached HTML	Jdlrobson	mediawiki/skins/Vector	master	+119 -389
Remove padding-left from .uls-trigger	Bernard Wang	mediawiki/extensions/UniversalLanguageSelector	master	+0 -2

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		AnneT	T322077 Lower the maintenance costs of TypeaheadSearch in Vector
		Resolved		Jdlrobson	T336526 Use Codex button/icon markup instead of mediawiki ui markup in Vector

Event Timeline

Jdlrobson created this task.May 11 2023, 4:51 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 11 2023, 4:51 PM

Jdlrobson triaged this task as High priority.May 11 2023, 4:51 PM

Jdlrobson mentioned this in T336527: Run a synthetic test for client side preferences.

Jdlrobson added a subtask: T322077: Lower the maintenance costs of TypeaheadSearch in Vector.May 11 2023, 5:38 PM

Jdlrobson removed a subtask: T322077: Lower the maintenance costs of TypeaheadSearch in Vector.

Jdlrobson added a parent task: T322077: Lower the maintenance costs of TypeaheadSearch in Vector.

LGoto set the point value for this task to 5.May 11 2023, 5:51 PM

Jdlrobson mentioned this in T322077: Lower the maintenance costs of TypeaheadSearch in Vector.May 11 2023, 5:55 PM

Jdlrobson added a project: Vector 2022.May 11 2023, 11:23 PM

Jdlrobson updated the task description. (Show Details)May 11 2023, 11:27 PM

Jdlrobson mentioned this in T335710: [Spike] Determine remaining blockers (if any) for CSS component adoption.

Izno subscribed.May 14 2023, 5:24 AM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q4 Sprint 4) board.May 15 2023, 5:30 PM

Jdlrobson mentioned this in T321106: Use TypeaheadSearch pending state in Vector search.May 16 2023, 12:37 AM

Jdlrobson updated the task description. (Show Details)May 16 2023, 4:41 PM

Volker_E subscribed.May 16 2023, 6:01 PM

AnneT subscribed.May 16 2023, 7:49 PM

@Jdlrobson Let us now if you need anything to move this forward…

ldelench_wmf moved this task from Inbox to Following on the Design-System-Team board.May 16 2023, 8:57 PM

@Jdlrobson @bwang we've just merged the following:

New size prop for Button. As noted in this comment, the available values are 'medium' (the default) and 'large' (44px min size). There is no responsiveness here yet, so the large size should just be used in Minerva to replicate the buttons that are currently 44px on all viewport widths.
Updated flush layout mixin that includes a param for size. See a demo here (the "Large icon-only buttons" demo) and sample usage here. Again, the mixin is not responsive, it just outputs a negative margin based on the size.

This will be included in the next Codex release on May 23rd. Please let me know if you have any feedback!

bwang claimed this task.May 22 2023, 6:28 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q4 Sprint 4) board.

@Jdlrobson While working on this, I realized that its probably not feasible to handle in Vector the issues I previously mentioned about the buttons styles not applying properly to non button elements. Most of the codex button styles are scoped under the :enabled pseudo class, which doesnt exist on non buttons. Fixing the button styles for non button elements in Vector would basically mean copying 80% of the codex styles with hardcoded values, so I think the best solution is to update codex.

I already spoke to @AnneT, and I put up this patch in codex under T284273. Unfortunately, this means we need to wait 2 more weeks for the next Codex release

@bwang Repeating here, what I've shared in T284273. How many elements are we talking about that are links disguised as buttons besides the QuickSurvey one? I feel strongly that we're not doing our users a favor breaking the semantic differentiation between the two by mixing them for usability and accessibility reasons.

Jdlrobson moved this task from Doing to Blocked on Others on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q4 Sprint 4) board.May 25 2023, 4:43 PM

@bwang given the A/B test and the fact I'm out I think it makes sense to delay merging any big code relating to this until Wednesday 7th. Please make sure this carries over to sprint 5 with that in mind.

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

[mediawiki/skins/Vector@master] Use Codex for typeahead search styles

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

gerritbot added a project: Patch-For-Review.May 30 2023, 7:17 PM

The search component of this task has been split off into T337966

LGoto edited projects, added: Web-Team-Backlog-Archived ( Web Team FY2022-23 Q4 Sprint 5); removed: Web-Team-Backlog-Archived (Web Team FY2022-23 Q4 Sprint 4).Jun 5 2023, 5:47 PM

LGoto moved this task from Incoming to Blocked on Others on the Web-Team-Backlog-Archived ( Web Team FY2022-23 Q4 Sprint 5) board.

bwang moved this task from Blocked on Others to Doing on the Web-Team-Backlog-Archived ( Web Team FY2022-23 Q4 Sprint 5) board.Jun 7 2023, 3:08 PM

bwang removed bwang as the assignee of this task.Jun 7 2023, 4:53 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived ( Web Team FY2022-23 Q4 Sprint 5) board.

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

[mediawiki/skins/Vector@master] Use Codex for button styles, start transitioning icons to use Codex icon mixins

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

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

[mediawiki/extensions/UniversalLanguageSelector@master] Remove padding-left from .uls-trigger

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

bwang mentioned this in T338403: Replace Resource loader icon modules with Codex icon mixins.Jun 7 2023, 10:16 PM

bwang assigned this task to Jdlrobson.Jun 8 2023, 4:41 PM

Change 929427 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Drop styles for cached HTML

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

Jdlrobson mentioned this in T338911: Optimize codex-search-styles.Jun 12 2023, 11:07 PM

Change 912974 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use Codex for button styles, start transitioning icons to use Codex icon mixins

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

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived ( Web Team FY2022-23 Q4 Sprint 5) board.Jun 13 2023, 1:49 AM

Change 924556 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Remove padding-left from .uls-trigger

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.15; 2023-06-27).Jun 14 2023, 1:00 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Jun 14 2023, 8:16 PM

bwang updated the task description. (Show Details)Jun 15 2023, 4:49 PM

Change 929427 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Drop styles for cached HTML

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

This was validated per @bwang

Edtadros removed Edtadros as the assignee of this task.Jun 16 2023, 10:45 PM

Edtadros subscribed.

Jdlrobson closed this task as Resolved.Jun 16 2023, 10:57 PM

Jdlrobson claimed this task.

Jdlrobson updated the task description. (Show Details)

Use Codex button/icon markup instead of mediawiki ui markup in VectorClosed, ResolvedPublic5 Estimated Story PointsActions