Page MenuHomePhabricator

[SW] [WtC-M2] [SNL] Replace WiKit Message component by Codex's
Closed, ResolvedPublic

Description

Problem

The Special:NewLexeme's user interface was composed using a combination of Vue 3 WiKit next elements, such as Message. 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 Message by the Codex equivalent: cdx-message(See demo). This will take us a step closer to switching to the new design system and deprecating the old.

image.png (2,940×1,640 px, 386 KB)

The WiKit message is used in the following Special:NewLexeme components:

Acceptance criteria
  • All types of WiKit Messages used in Special:NewLexeme are replaced by their Codex equivalent

Event Timeline

Arian_Bozorg renamed this task from [WtC-M2] [SNL] Replace WiKit Message component by Codex's to [SW] [WtC-M2] [SNL] Replace WiKit Message component by Codex's.Jul 16 2024, 1:41 PM
Arian_Bozorg moved this task from Incoming to UX Backlog on the [Archived]Wikidata Dev Team board.

@Charlie_WMDE tagging you here for UX review / by way of keeping you informed of wikit2codex migration progress in special new lexeme.

Hey @ArthurTaylor I'm not able to review this change without a netlify link. I followed the PR link and clicked the netlify link there but the UI I was presented with seemed very different from the screenshots that Lucas had posted in the same PR.

Could you provide me with the correct netlify link If you'd like me to review this change? Or did you just want to inform me about this change by pinging me?

Hey @Charlie_WMDE ,

I pinged for the UX review - the technical review is done and the code is merged, and your approval / feedback is needed to resolve the ticket.

The netlify link in the PR is the correct one. @Lucas_Werkmeister_WMDE posted screenshots from the same code running on a local wiki, because the Message component isn't triggered / visible in the netlify environment. If you are able to provide feedback on the basis of @Lucas_Werkmeister_WMDE's screenshots then please do that. If not, then we need to try and set up a live wiki environment where you can see and test the changes. Let me know - thanks!

@ArthurTaylor it's pretty much impossible for me to fo a review without being able to inspect the component, as I would have to go by eyesight alone which can be quite inacurate. In general a netlify link is always necessary and ideally I would do the review before the technical review is done, otherwise a second technical review is necessary if I find discrepancies and the code needs to be adjusted.

Based on the screenshots alone I would say it might be fine. I'm not sure about the font color. Is the new design using color-base? I would also remove the boldness from the links.

I am questioning why this message is a warning and not a notice. Do you recall what lead to the decision to pick a warning message?

@Charlie_WMDE as with the other tickets, I would say that if you're comfortable for the changes to be made live (and possibly hit production), then we should just merge them all in and make them available on beta so that you can look in more detail.

I don't have any information about the decision process for the message style. My guess would be that we chose a warning because (before temporary accounts was available) making the edit without logging in leaks personally-identifiable information about the user.

I also don't know the history of the bold styling, but it seems to have been used somewhat consistently in other places specifically to mark the 'create account' and 'login' links. Other links to informational pages seem not to get the bold styling. If you want the style changed here, we can definitely do that, but note that it will make the UX inconsistent with other pages (like New Item)

I would very much appreciate that! testing on beta sounds like a great option.

Thank you also for the context for the link boldness. I still think it's not necessary in that short sentence, but wasn't aware of the pattern used elsewhere on Wikidata so am happy to keep it consistent.