Page MenuHomePhabricator

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

Description

Problem

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

Main pageResults page
FAQ dialog:
Dialog 1.png (764×1 px, 180 KB)
Instructions dialog:
Dialog 2.png (764×1 px, 210 KB)
Upload info dialog:
Screenshot 2023-08-03 at 19.12 1.png (758×1 px, 127 KB)
Confirmation dialog:
Desktop_ Default.png (887×1 px, 107 KB)
Considerations

We'll need to replace the WiKit checkbox by Codex's within the Dialog. See T347200
Beware of positioning

Acceptance criteria
  • All WiKit Dialogs in Mismatch Finder are replaced by their Codex equivalent

Event Timeline

karapayneWMDE set the point value for this task to 5.

Thanks for all the replacements! Summary of the review:

  • FAQ Dialog ✅
  • Instructions Dialog ✅
  • Upload Info Dialog (Results page): This dialog cannot currently be checked in the staging environment (no "read the full description" buttons are included).
  • Confirmation dialog (Results page): There's an improvement to make here. The "Do not show again" checkbox should be included in the footer slot provided by the Codex Dialog (see demo) instead of within the Dialog's body. We're still using the WiKit checkbox here, so I'm not sure if it'd make more sense to wait to include this element in the right slot as part of its replacement in T347200.

Screenshot 2023-11-18 at 06.41.29.png (1×1 px, 161 KB)

Hey, @HasanAkgun_WMDE @Arian_Bozorg. Besides the fix suggested above, I noticed the need to make other small corrections. Dialogs inherit certain styles and, in our case, these come from app.css. So the first two points might be fixed once we replace the current styles by Codex tokens, but I'm not 100% sure:

  • The text within the Dialogs' body is inheriting a 1.5 line-height from the app.css stylesheet, while the right value here would be 1.6 (@line-height-medium).
  • The font color of the Dialogs' headings should be #000 (@color-emphasized) instead of #202122.

On another note, there are some selectors such as .wikit-Dialog ol or .wikit-Dialog li defined in app.css and are still being used by the Codex Dialog. Are they still required? If so, how might we replace these?

@Sarai-WMDE Thank you for great feedback! I have addressed your comments in a PR, it'd be great to have your review!

All the latest fixes have been verified. The replacement was successful 🎉