Page MenuHomePhabricator

[WtC-M2] [EPIC] Replace WiKit components by available Codex components
Open, Needs TriagePublic

Description

Problem

Mismatch Finder's user interface was composed using a combination of Vue 2 custom components and WiKit components. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the now official Wikimedia design system.

Solution

Replacing WiKit components by available Codex elements will take us a step closer to switching to the new design system and deprecating the old.

Deprecating WiKit will mean contributing to establishing a single source of truth for FE components. Using Codex will ensure that we are up-to-date in terms of Wikimedia's front end standards, and it will also contribute to the migration of Mismatch finder from Vue 2 to Vue 3 (to avoid the side effects of Vue 2's end of life).

Here's a list of the WiKit components used in the Mismatch Finder's UI that have equivalent Codex replacements:

WiKit componentCodex replacementNotes/Subtask
Button (Normal neutral, primary progressive and quiet progressive)CdxButtonT346797
CheckboxCdxCheckboxUsed within Dialog component. This is an addition to the new dialog rather than a replacement. T347200
DialogCdxDialogContains checkbox T347100
DropdownCdxSelectT347168
LinkLink mixinT347161
MessageCdxMessageT347183
TextAreaCdxTextArea + CdxFieldInvolves finding an alternative way to display the loading and warning states of the TextArea. See T347190

Out of scope from this task due to unavailability/lack of need:

  • Inline progress bar: We won't be using the inline progress bar to indicate the loading state of TextArea or any other elements. We'll use the Indeterminate Progress bar in loading scenarios instead (see specs, see relevant task T347190)
  • Label: We don't need to replace Label components/mixins individually, since we'll use the Field component to display a label for TextArea (see relevant task T347190)
  • LanguageSelector: This is not considered a core component, and thus it won't be made available in Codex. We'll have to update our custom component to Vue 3 (T345915) and adjust its styles to follow the Codex style guidelines (T345905)
  • Table component: The Table component is missing in Codex, but it has been identified as core/planned (T303320). Implementation accountability TBD. We tentatively agree to relatively reduce efforts by migrating the existing Table component to Vue 3 (T348271)
  • Validation message: Not needed anymore, since the Codex Field component now handles the display of inline validation in form elements such as TextArea
Acceptance criteria
  • All WiKit components that have an equivalent in Codex are replaced

Related Objects

Event Timeline

Sarai-WMDE renamed this task from [WtC-M2] [EPIC] Replace WiKit components by available Codex components to [SW] [WtC-M2] [EPIC] Replace WiKit components by available Codex components.Oct 5 2023, 5:27 PM
Sarai-WMDE renamed this task from [SW] [WtC-M2] [EPIC] Replace WiKit components by available Codex components to [WtC-M2] [EPIC] Replace WiKit components by available Codex components.Oct 20 2023, 10:24 AM