[WtC-M3] Port Table component to Mismatch Finder
Closed, ResolvedPublic13 Estimated Story Points
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Oct 5 2023, 5:44 PM

Description

Problem

Table is a core component which introduction into the Wikimedia Design System is planned (see T303320), yet not scheduled.

It is unclear if either the QT team at WMDE or the DST team at WMF will be able to dedicate resources to implement a Codex Table for its usage within Mismatch Finder before the first migration project concludes. Fortunately, this doesn't need to be a blocker for the deprecation of the legacy design system WiKit: we can recreate and port a Vue 3 version of the existing Table in the Mismatch Finder repository.

Solution

Port the WiKit component to Mismatch finder. We'll copy the WiKit table into the MSMF repo and update it to make it compatible.

Considerations

Styles: In order to unblock WiKit's deprecation, we should also replace all WiKit tokens used currently to style the Table. It's fine to use discrete values instead.

Responsiveness: There's a pending improvement that we should apply to the Mismatch Finder table to fix the display of information in certain viewports (we refrained from doing this earlier because it involved modifying the WiKit component): it should linearize at 800px instead of at the tablet breakpoint. This means that the new version of the Table should be able to take a custom value as a breakpoint instead of a token.

Acceptance criteria

The WiKit table is ported to Mismatch Finder and made compatible with the migrated version of the tool
Any WiKit building blocks, dependencies or styles are replaced

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Invalid		None	T347513 [SW] [WtC-M2] [EPIC] Migrate unavailable components to Vue 3
		Resolved		• noarave	T348271 [WtC-M3] Port Table component to Mismatch Finder

Event Timeline

• Sarai-WMDE created this task.Oct 5 2023, 5:44 PM

• Sarai-WMDE mentioned this in T346171: [WtC-M2] [EPIC] Replace WiKit components by available Codex components.Oct 10 2023, 10:55 AM

• Sarai-WMDE mentioned this in T347168: [WtC-M2] Replace WiKit's Dropdown component by Codex's Select.Oct 10 2023, 11:03 AM

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

• Sarai-WMDE updated the task description. (Show Details)Oct 10 2023, 12:51 PM

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

• Sarai-WMDE renamed this task from [WtC-M2] Create Vue 3 version of the Table component to [WtC-M2] Port Table component to Mismatch Finder.Oct 10 2023, 3:04 PM

• Sarai-WMDE mentioned this in T313467: Ability to report mismatches on qualifiers.Oct 11 2023, 11:26 AM

• Sarai-WMDE renamed this task from [WtC-M2] Port Table component to Mismatch Finder to [WtC-M3] Port Table component to Mismatch Finder.Oct 13 2023, 4:43 PM

• Sarai-WMDE renamed this task from [WtC-M3] Port Table component to Mismatch Finder to [SW][WtC-M3] Port Table component to Mismatch Finder.Nov 22 2023, 10:42 AM

• Sarai-WMDE mentioned this in T348729: [WtC-M2] Adapt MSMF's layout to Codex's grid system.Nov 28 2023, 11:40 AM

• Sarai-WMDE renamed this task from [SW][WtC-M3] Port Table component to Mismatch Finder to [WtC-M3] Port Table component to Mismatch Finder.Dec 6 2023, 10:51 AM

karapayneWMDE moved this task from UX Backlog to Unified QT Backlog on the [Archived]Wikidata Dev Team board.Dec 6 2023, 10:58 AM

ItamarWMDE set the point value for this task to 13.Dec 12 2023, 9:28 AM

Notes from Sprint Planning : If the port turns out to be more complicated than its worth, let's chat about recreating it from scratch

ItamarWMDE moved this task from Unified QT Backlog to Quality Tools "Sprint" on the [Archived]Wikidata Dev Team board.Dec 13 2023, 3:27 PM

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

HasanAkgun_WMDE claimed this task.Jan 10 2024, 1:23 PM

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

https://github.com/wmde/wikidata-mismatch-finder/pull/850

Restricted Application added a project: User-Noarave. · View Herald TranscriptJan 29 2024, 11:10 AM

• noarave moved this task from Peer Review to Product Verification on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Jan 30 2024, 10:12 AM

Hey there! The table is looking good. I only found the following necessary fix:

Select menu options: For some reason, the menu items are now displaying a margin-inline-start and a margin-block-start of 1rem that creates extra spacing that shouldn't be there. I'm not 100% sure this issue is necessarily related to the porting of the Table, so we can evaluate creating a separate ticket to unblock this one.

Screenshot 2024-02-02 at 12.11.27.png (1×1 px, 339 KB)

The following doesn't need fixing, but I think it's a good idea to document it for our future selves:

MSMF Tables still linearise (become lists for responsiveness) at the (new) tablet breakpoint of 1120px. This is a bit "too early" (there's still sufficient space for the default table shape at that viewport size). We can apply a custom breakpoint to them to improve their readability in a separate task. I added this change to this ticket, but didn't make it an AC, so too bad. I also indicated 800px, which probably needs adjustment due to the recent grid changes. In any case, this is not urgent nor essential, just an enhancement for the future.

On the other hand, some of the discrete values used to style the ported table do have Codex equivalents. Since this component will be replaced sooner than later, I would also skip any of that replacement work at this point.

• noarave moved this task from Product Verification to Doing on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Feb 2 2024, 11:21 AM