[WtC-M2] Replace WiKit's Dropdown component by Codex's Select
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Sep 22 2023, 2:17 PM

Project Tags

Referenced Files

	F41523181: Screenshot 2023-11-21 at 19.34.25.png
	Nov 21 2023, 6:49 PM

	F37750738: Screenshot 2023-09-22 at 16.14.23.png
	Sep 22 2023, 2:17 PM

Subscribers

Description

Problem

The Mismatch Finder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as Dropdown. 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 WiKit's Dropdown component (used within the MismatchRow.vue component) by the Codex equivalent: cdx-select (Link to demo). This will take us a step closer to switching to the new design system and deprecating the old.

Results page
Mismatch row:

Acceptance criteria

The WiKit Dropdown component used in the Mismatch Finder is replaced by its Codex equivalent

Related Objects
Search...

Status	Assigned	Task
Open	None	T327532 [EPIC] [WtC] Migrate WiKit-built products to Codex
Resolved	ItamarWMDE	T327683 [WtC] [EPIC] Migrate Mismatch Finder to Codex
Open	None	T346171 [WtC-M2] [EPIC] Replace WiKit components by available Codex components
Resolved	HasanAkgun_WMDE	T347168 [WtC-M2] Replace WiKit's Dropdown component by Codex's Select

Event Timeline

• Sarai-WMDE created this task.Sep 22 2023, 2:17 PM

• Sarai-WMDE mentioned this in T346171: [WtC-M2] [EPIC] Replace WiKit components by available Codex components.Sep 22 2023, 3:45 PM

karapayneWMDE moved this task from Incoming to UX Backlog on the [Archived]Wikidata Dev Team board.Sep 26 2023, 2:06 PM

• Sarai-WMDE updated the task description. (Show Details)Oct 10 2023, 11:03 AM

• Sarai-WMDE updated the task description. (Show Details)Oct 10 2023, 11:13 AM

• Sarai-WMDE moved this task from UX Backlog to Unified QT Backlog on the [Archived]Wikidata Dev Team board.Oct 11 2023, 12:16 PM

ItamarWMDE moved this task from Unified QT Backlog to Quality Tools "Sprint" on the [Archived]Wikidata Dev Team board.Nov 10 2023, 1:07 PM

ItamarWMDE edited projects, added: [Archived]Wikidata Dev Team (Quality Tools "Sprint"); removed: [Archived]Wikidata Dev Team.

ItamarWMDE assigned this task to HasanAkgun_WMDE.Nov 10 2023, 1:11 PM

ItamarWMDE moved this task from Backlog to Peer Review on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.

ItamarWMDE moved this task from Peer Review to Product Verification on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 10 2023, 3:46 PM

ItamarWMDE set the point value for this task to 5.Nov 13 2023, 9:15 AM

Tagging @Sarai-WMDE to verify :)

Looking great! Smooth replacement. No issues related with the Select were detected on Chrome 119, Safari 17 or Firefox 119.

⚠ Correction: I just detected an improvement we should probably make. Unlike in WiKit, the Codex Select has a predefined min-width of 256px (applied via .cdx-select-vue__handle). This makes the component overflow in our layout below a 462px viewport width:

Screenshot 2023-11-21 at 19.34.25.png (820×1,000 px, 128 KB)

I found that the easiest way to adjust the Codex Select to our layout for now might be to apply a 100% width to the Select itself (.cdx-select-vue), and replace the min-with applied via .cdx-select-vue__handle by a max-width (i.e. max-width: 256px). Would such an override be possible? Happy to adjust the solution if needed.

@Sarai-WMDE Great catch, thanks! I have applied your suggestions and they work like a charm :) Now, I will move the task to peer review again and will ping you for the final verification!

HasanAkgun_WMDE moved this task from Product Verification to Peer Review on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 22 2023, 4:27 PM

@HasanAkgun_WMDE can you please add a comment with links for the relevant PRs for this task? 🙏 for documentation's sake

This one is related to multiple PRs: