**Project title:**
Vector 2022 Codex PHP migration
**Brief summary:**
Replace Button and Icon components in the Vector 2022 skin with standardized components from the new Codex PHP library.
**Expected outcomes:**
Button and Icon UI elements (excluding dropdown menus) will be converted from using the current custom-built Php components into standardized PHP-based components provided by the Codex PHP library. This work is not expected to introduce any functional changes. Instead, it aims to improve code quality, reduce technical debt, and lower the long-term maintenance burden of the Vector 2022 skin. Success will not be measured by how many lines of code will be add, but by how many lines will be removed.
As we implement Codex PHP in Vector, enhancements and needed changes will be documented and if small, implemented.
**Skills required/preferred:**
This work will focus on the MediaWiki skin layer, specifically the Vector 2022 skin. Required skills include the following:
- **PHP **- UI elements in Vector 2022 are server-rendered, so the ability to navigate and code PHP is required.
- **HTML/CSS/JS** - This project requires replacing UI components, which have HTML CSS and JS functionality associated with them. CSS is written using the Less CSS preprocessor. Javascript is written without a framework, and HTML is currently provided by Mustache templating.
- **Git and Gerrit** - The ability to submit git patches through the Gerrit code-review system will be essential for uploading work for code-review.
- **Visual regression testing** - Since the changes to this code will be affecting core features of the Vector skin, testing these changes through various means will be essential.
Not required but very helpful:
- **Design systems** - This project might require small changes to the Codex Php codebase
- **Accessibility** - Web accessibility is important to the skin architecture and implementation of UI elements
- **VueJS** - This project might involve minor changes to the CSS or documentation of Codex
**Mentors:**
@bwang, @Volker_E , @Catrope , Reader Experience team engineers.
**Rating:**
medium-hard
**Microtasks:**
- TODO:
**Any other additional information for contributors:**
Candidates need to be willing to meet with engineers from the Reader Experience team during the course of this project over Google Meet in order to communicate about the project. Most of the Reader Experience team is in the EDT (UTC -4) and CDT (UTC -5) timezones, so the ability to communicate during those working hours is preferred.
**What WMF priority does this project align with?**
Web Readers Experience Essential Work
**Why are you proposing it?**
The purpose of this project is to clean up old code and migrate UI components to a new library. Since there is no end-user impact of this change, it's unlikely to get prioritized on our project roadmap, but it has clear maintenance benefits. This work is somewhat experimental as well since the Codex PHP library is new, and this is a good opportunity to validate the library in a real-world setting.
**What is the expected impact?** What does success look like? How will this affect the needs you have identified?
- Reduced technical debt in the Vector 2022 skin
- Improved consistency with the Codex design system
- Validation and enhancements to Codex PHP in a real-world MediaWiki skin environment
- Preparing for Codex Php menu enhancements