[WtC-M3] [QB] Replace WiKit Checkbox by Codex's
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Arian_Bozorg
	Mar 11 2024, 3:17 PM

Description

Problem

The Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as Checkbox. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the official Wikimedia design system. The utilization of WiKit components is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.

Solution

We have to replace the WiKit checkboxes used within the "Settings" section of the Query Builder by the Codex equivalent: cdx-checkbox (See demo). This will take us a step closer to switching to the new design system and deprecating the old.

Acceptance criteria

The WiKit Checkboxes in Query Builder are replaced by their Codex equivalent

Details

	Subject	Repo	Branch	Lines +/-
	Fix codex checkbox padding	wikidata/query-builder	master	+0 -1
	Replace WiKit Checkbox by Codex's	wikidata/query-builder	master	+66 -57

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T327532 [EPIC] [WtC] Migrate WiKit-built products to Codex
Open	karapayneWMDE	T380280 [Epic] Deprecating Quality Tools functional team
Open	None	T327680 [WtC] [EPIC] Migrate Query Builder to Codex
Open	None	T359842 [WtC-M3] [QB] [EPIC] Replace WiKit components by available Codex components
Resolved	Arian_Bozorg	T359852 [WtC-M3] [QB] Replace WiKit Checkbox by Codex's

Event Timeline

Arian_Bozorg created this task.Mar 11 2024, 3:17 PM

Arian_Bozorg mentioned this in T359842: [WtC-M3] [QB] [EPIC] Replace WiKit components by available Codex components.Mar 11 2024, 3:34 PM

karapayneWMDE moved this task from Incoming to UX Backlog on the Wikidata Dev Team board.Mar 12 2024, 3:11 PM

• Sarai-WMDE renamed this task from [SW] [WtC-M3] [QB] Use Codex Checkbox within Dialog to [SW] [WtC-M3] [QB] Replace WiKit Checkbox by Codex's.Apr 9 2024, 4:10 PM

• Sarai-WMDE updated the task description. (Show Details)

• Sarai-WMDE renamed this task from [SW] [WtC-M3] [QB] Replace WiKit Checkbox by Codex's to [WtC-M3] [QB] Replace WiKit Checkbox by Codex's.Apr 10 2024, 12:06 PM

Arian_Bozorg moved this task from UX Backlog to Unified QT Backlog on the Wikidata Dev Team board.Apr 10 2024, 12:14 PM

guergana.tzatchkova claimed this task.Jun 10 2024, 5:02 PM

guergana.tzatchkova moved this task from Unified QT Backlog to Quality Tools "Sprint" on the Wikidata Dev Team board.

guergana.tzatchkova edited projects, added Wikidata Dev Team (Quality Tools "Sprint"); removed Wikidata Dev Team.

guergana.tzatchkova moved this task from Backlog to Doing on the Wikidata Dev Team (Quality Tools "Sprint") board.

Change #1041594 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[wikidata/query-builder@master] Replace WiKit Checkbox by Codex's

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

gerritbot added a project: Patch-For-Review.Jun 11 2024, 11:05 AM

guergana.tzatchkova moved this task from Doing to Peer Review on the Wikidata Dev Team (Quality Tools "Sprint") board.Jun 12 2024, 4:21 PM

Hello, @Sarai-WMDE , you can test this change here: https://1041594--clicky-sparqly.netlify.app/
Please let us know if there are any adjustments needed in the UX. :)

guergana.tzatchkova moved this task from Peer Review to Doing on the Wikidata Dev Team (Quality Tools "Sprint") board.Jun 13 2024, 3:34 PM

guergana.tzatchkova removed guergana.tzatchkova as the assignee of this task.Jun 24 2024, 11:32 AM

guergana.tzatchkova subscribed.

guergana.tzatchkova moved this task from Doing to Backlog on the Wikidata Dev Team (Quality Tools "Sprint") board.Jun 24 2024, 4:39 PM

guergana.tzatchkova claimed this task.Jun 25 2024, 3:06 PM

guergana.tzatchkova moved this task from Backlog to Doing on the Wikidata Dev Team (Quality Tools "Sprint") board.

guergana.tzatchkova updated the task description. (Show Details)Jun 25 2024, 3:08 PM

guergana.tzatchkova moved this task from Doing to Peer Review on the Wikidata Dev Team (Quality Tools "Sprint") board.Jun 25 2024, 3:27 PM

Arian_Bozorg moved this task from Peer Review to Backlog on the Wikidata Dev Team (Quality Tools "Sprint") board.Jul 2 2024, 8:04 AM

HasanAkgun_WMDE claimed this task.Jul 5 2024, 2:14 PM

HasanAkgun_WMDE moved this task from Backlog to Doing on the Wikidata Dev Team (Quality Tools "Sprint") board.

HasanAkgun_WMDE moved this task from Doing to Peer Review on the Wikidata Dev Team (Quality Tools "Sprint") board.Jul 8 2024, 12:58 PM

Change #1041594 merged by jenkins-bot:

[wikidata/query-builder@master] Replace WiKit Checkbox by Codex's

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

ItamarWMDE moved this task from Peer Review to Product Verification on the Wikidata Dev Team (Quality Tools "Sprint") board.Jul 11 2024, 8:47 AM

Maintenance_bot removed a project: Patch-For-Review.Jul 11 2024, 9:31 AM

Just a small detail. Looks like extra space was added after the checkbox label. There should be a gap of only 0.5em/8px between the text and the number input:

Screenshot 2024-07-22 at 10.06.30.png (1×2 px, 254 KB)

Otherwise, looking good! Glad you managed to display the limit checkbox as preselected 💯

Change #1055967 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Fix codex checkbox padding

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

gerritbot added a project: Patch-For-Review.Jul 22 2024, 3:41 PM

In T359852#10001487, @Sarai-WMDE wrote:

Just a small detail. Looks like extra space was added after the checkbox label. There should be a gap of only 0.5em/8px between the text and the number input:

Otherwise, looking good! Glad you managed to display the limit checkbox as preselected 💯

You can check from https://1055967--clicky-sparqly.netlify.app/, if it works you can +2 on gerrit.

HasanAkgun_WMDE moved this task from Product Verification to Peer Review on the Wikidata Dev Team (Quality Tools "Sprint") board.Jul 22 2024, 3:45 PM

karapayneWMDE removed HasanAkgun_WMDE as the assignee of this task.Jul 30 2024, 8:00 AM

karapayneWMDE added a subscriber: HasanAkgun_WMDE.

Hey @HasanAkgun_WMDE! Thanks for the changes. I checked right when you shared, and found that indeed the padding between the checkbox label and the input has been corrected. I found an issue that stopped me from giving a thumbs up right away, but I now realized it's unrelated to this change: so all good! 👍🏻

Change #1055967 merged by jenkins-bot:

[wikidata/query-builder@master] Fix codex checkbox padding

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

ItamarWMDE moved this task from Peer Review to Product Verification on the Wikidata Dev Team (Quality Tools "Sprint") board.Jul 31 2024, 4:24 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 31 2024, 4:32 PM

• Sarai-WMDE added a comment.Jul 31 2024, 5:48 PM

This comment was removed by • Sarai-WMDE.

Last fixes looking good. I'm assuming that the RTL issue affecting the checkboxes, which aren't correctly aligned (see screenshot below) should be fixed as part of T371519: [QB] RTL layout is broken on staging environment.

Screenshot 2024-07-31 at 20.19.31.png (332×1 px, 32 KB)

@ItamarWMDE if you can you confirm this will be fixed on T371519 I'll close this ticket :)

Restricted Application added a project: User-ItamarWMDE. · View Herald TranscriptAug 26 2024, 8:23 AM

I confirm indeed! 😄

Arian_Bozorg closed this task as Resolved.Oct 2 2024, 7:48 AM

Arian_Bozorg claimed this task.

Arian_Bozorg moved this task from Product Verification to Done on the Wikidata Dev Team (Quality Tools "Sprint") board.

	F56830037: Screenshot 2024-07-31 at 20.19.31.png
	Jul 31 2024, 6:21 PM

	F56591967: Screenshot 2024-07-22 at 10.06.30.png
	Jul 22 2024, 8:09 AM

[WtC-M3] [QB] Replace WiKit Checkbox by Codex'sClosed, ResolvedPublicActions