Codex/Migrating from MediaWiki UI

From MediaWiki 1.41 on, it is recommended to use markup for [ https://doc.wikimedia.org/codex/main/components/overview.html Codex CSS-only components] instead of MediaWiki UI markup. This page aims to explain how to handle migrations.

Introduction to Codex CSS-only components
Codex provides CSS-only components for consumers who are concerned about using Vue.js and Codex library. They provide a lightweight mechanism to render basic components such as buttons, checkboxes, input, icons and radio elements.

The most recent information on CSS components can be found in the offical Codex documentation. For example see the CSS-only-version of the button component as an example.

How to migrate to Codex from mediawiki.ui modules
Migrating away from mediawiki ui markup requires 2 changes:


 * 1) You should remove the ResourceLoader module from the page, and instead load either codex-styles OR codex-search-styles.  The former loads all styles for all Codex components and the latter loads a subset of styles for commonly used components.
 * 2) * It is important to chose the appropriate module:
 * 3) ** Currently in performance sensitive pages e.g. articles we recommend using codex-search-styles. This stylesheet is loaded by default on the Minerva and Vector 2022 skins.
 * 4) ** If the page is not performance sensitive, for example it is a special page, or a page primarily for logged in editors, particularly pages which load Vue.js and Codex at some point in the page life cycle, use the full codex-styles module.
 * 5) ** If in doubt, use codex-search-styles.
 * 6) You should change the HTML markup per the sections below.

Component modifiers
Many components can be modified. This lookup table should help you map mediawiki UI modifiers to Codex equivalents.