Sarai-WMDE created this task.
Sarai-WMDE added projects: Wikidata Dev Team, Wikidata Design System, Wikidata,
Mismatch Finder.
TASK 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, and
their Codex replacements:
| WiKit component | Codex replacement
| Notes/Subtask
|
| ------------------------------------------ |
--------------------------------------------------------------------------------------------------------------------------------------------
|
-------------------------------------------------------------------------------------------------------------
|
| Button (Normal neutral, primary and quiet) | CdxButton
<https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/button/>
| [Add task]
|
| Dialog | CdxDialog
<https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/dialog/>
| [Add task]
|
| Link | Link mixin
<https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/themes/mixins/public/link.less>
| [Add task]
|
| Message | CdxMessage
<https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/message/>
| [Add task]
|
| TextArea | CdxTextArea
<https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/text-area/>
| Involves finding an alternative way to display the loading and
warning states of the TextArea. See [Add task] |
|
Out of scope from this task due to unavailability/lack of need:
- Dropdown/Select: Available in Codex, but cannot be replace since it's used
within the Table component, which is not available (see below)
- Label: We don't need to replace Label components individually. We'll use
the Field component to display a label for TextArea (see relevant task)
- 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 <https://phabricator.wikimedia.org/T345915>) and adjust its
styles to follow the Codex style guidelines (T345905
<https://phabricator.wikimedia.org/T345905>)
- Table component: The Table component is missing in Codex, but it has been
identified as core/planned (T303320
<https://phabricator.wikimedia.org/T303320>). Implementation accountability TBD.
- Validation message: Not needed anymore, since the Codex Field component is
now used to display inline validation in form elements such as TextArea
Acceptance criteria
-------------------
[ ] All WiKit components that have an equivalent Codex element are replaced
TASK DETAIL
https://phabricator.wikimedia.org/T346171
EMAIL PREFERENCES
https://phabricator.wikimedia.org/settings/panel/emailpreferences/
To: Sarai-WMDE
Cc: Michael, Aklapper, Sarai-WMDE, Danny_Benjafield_WMDE, Astuthiodit_1, STH,
karapayneWMDE, Invadibot, maantietaja, Mattia_Capozzi_WMDE, ItamarWMDE,
Akuckartz, Nandana, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer,
_jensen, rosalieper, Scott_WUaS, Volker_E, Wikidata-bugs, aude,
Lydia_Pintscher, Mbch331
_______________________________________________
Wikidata-bugs mailing list -- [email protected]
To unsubscribe send an email to [email protected]
