Codex/fr

Codex est le système de conception de Wikimedia – voir le site officiel de documentation.

Le paquet logiciel Codex comprend des outils de conception pour stocker les valeurs de conception, des composants d'interface utilisateur construits en JavaScript (Vue.js) et uniquement avec CSS, ainsi qu'une suite d'icônes. Ces outils comprennent un vaste support pour l'internationalisation, l'utilisation globale et l'accessibilité web par défaut.

Cette page détaille comment utiliser Codex dans MediaWiki. Voir également la documentation générale sur la façon d'.



Les paquets Codex dans MediaWiki


Version actuelle
MediaWiki utilise actuellement la version 0.20.0 de Codex. De nouvelles versions sont publiées toutes les 2 semaines (voir le pour la cadence de sortie et toutes les versions).

Paquets
Les paquets suivants de Codex sont disponibles sur MediaWiki :


 * 1)   &mdash; Ce paquet contient des jetons de conception dans divers formats, y compris les variables Less et JSON.
 * 2)   &mdash; Ce paquet contient des composants d'interface utilisateur (UI) construits avec Vue 3 ou en tant que composants CSS uniquement.
 * 3)   &mdash; Ce paquet contient un ensemble d'icônes.

Il convient de noter qu'il existe actuellement un quatrième paquet &mdash;. Il s'agit d'un sous-ensemble du paquet, contenant seulement le composant TypeaheadSearch et ses styles. Avec la version 0.20.0 il est devenu obsolète et son code a été transformé et placé dans le paquet. Il a été créé seulement pour servir Vector 2022 et améliorer les performances, il ne doit être utilisé que là et va cesser d'exister au fur et à mesure que la division du code sera disponible.



Utilisation générale de Codex dans MediaWiki
Consultez l' extension CodexExample pour un exemple d'utilisation de ses composants, jetons de conception et icônes dans une extension MediaWiki.

Les exemples de code du site web de documentation Codex ont tous, deux versions étiquetées « NPM » et « MediaWiki ». Dans le noyau, les habillages et les extensions MediaWiki, vous devez utiliser les versions « MediaWiki » de ces exemples; les exemples « NPM » ne conviendront pas parce que certains aspects fonctionnent un peu différemment dans MediaWiki. Lisez aussi les sections de cette page qui vont plus en détail sur la façon d'utiliser les jetons de conception, les composants et les icônes Codex dans MediaWiki.



Utiliser la version locale de Codex dans votre instance locale MediaWiki
Parfois, il peut être utile d'avoir votre version Codex dans votre instance locale de MediaWiki, afin de tester les nouvelles fonctionnalités ou les modifications de Codex qui n'ont pas encore été publiées ou incluses dans le noyau de MediaWIKI. Nous espérons éventuellement automatiser cela, mais jusqu'à ce que nous ayons cette capacité, vous pouvez le faire manuellement en copiant les fichiers 'dist' des paquets Codex dans le répertoire 'resources/lib' du noyau.


 * 1) Construisez votre bibliothèque locale Codex en exécutant   dans le répertoire racine de votre dépôt Codex.
 * 2) Copiez les parties de Codex dont vous avez besoin dans votre dépôt du noyau MediaWiki. Tous les exemples ci-dessous supposent que vous utilisez un système de type Unix (par exemple: Linux ou macOS), que votre dépôt Codex et votre dépôt du noyau se trouvent dans le même répertoire, et que vous travaillez depuis le répertoire du noyau. Pour copier :
 * 3) * Paquet  contenant les composants Codex :
 * 4) * Paquet  contenant les composants Codex :
 * 5) * Paquet  :
 * 6) * Paquet  :



Utiliser les jetons de conception Codex
Les jetons de conception sont les plus petits éléments stylistiques de notre système de conception. Découvrez les jetons de conception de Codex dans la documentation officielle et consultez les démonstrations disponibles des jetons (par exemple, la démo des jetons de couleur).



Avantages des jetons de conception
Tous les aspects visuels du système de conception, tels que les couleurs, la typographie, l'espacement et les tailles sont définis à l'aide de jetons. Ils fournissent une source centrale de fiabilité pour ces éléments de conception, qui peuvent ensuite être utilisés sur plusieurs plateformes et applications, ici les habillages et les extensions MediaWiki. En utilisant des jetons de conception, les concepteurs et les développeurs peuvent assurer la cohérence de l'apparence et du comportement de leurs produits numériques. Par exemple, au lieu de coder en dur une valeur de couleur spécifique à plusieurs endroits d'un site web ou d'une application, un jeton de conception pour cette couleur peut être créé et réutilisé partout dans le système. Dans la phase finale de l'architecture des jetons, tous les jetons Codex doivent être utilisés exclusivement pour les propriétés de style dans le noyau, les habillages et les extensions MediaWiki. Une modification telle qu'un changement de couleur se reflètera facilement partout.

Design tokens help streamline the design and development process, increase efficiency, and maintain visual consistency throughout a project.



Utilisation des jetons de conception Codex dans MediaWiki et ses extensions
Vous pouvez utiliser les jetons de conception dans un fichier  (ou dans un bloc   d'un fichier  ) en important. MediaWiki utilise le système de variables d'habillage pour distribuer les jetons Codex.

Les valeurs de ces variables de jeton diffèrent selon l'habillage. Le thème par défaut de Codex est actuellement utilisé dans MinervaNeue, et une version modifiée du thème par default pour une taille de police de base plus petite (voir aussi la section sur les valeurs relatives ci-dessous) est utilisée dans Vector 2022 et l'ancien Vector. Tous les autres habillages utilisent actuellement des valeurs de retrait définis dans mediawiki.skin.defaults.less; ces valeurs sont encore en cours de développement.

Exemple de fichier Less utilisant les jetons Codex de conception :

Note that the examples on the Codex documentation site import the tokens from, but this does not work in MediaWiki. A la place, vous devez importer  comme indiqué dans l'exemple ci-dessus.



Jetons à valeurs relatives
Les jetons qui expriment des distances utilisent généralement des valeurs absolues en, tandis que les jetons qui expriment des tailles utilisent généralement des valeurs relatives en. Tokens with relative values are designed to be used in a context where the font size is the default font size for the skin. In MinervaNeue the default font size is 16px; in Vector 2022 and Vector legacy it's 14px. Les jetons affectés de valeurs relatives sont initialisés de sorte à fournir la même valeur de pixels pour tous les habillages. Par exemple, dans MinervaNeue  est fixé à   (qui est 20px à une taille de police de 16px), tandis que dans Vector 2022 et l'ancien Vector il est fixé à   (qui est de 20px pour une taille de police de 14px).

Dans la plupart des cas, l'habillage définira la bonne taille de police pour vous, mais si vous rencontrez des problèmes avec des valeurs relatives produisant la mauvaise taille (généralement un nombre fractionnel de pixels plutôt qu'un nombre rond, par exemple 22,857px au lieu de 20px), vérifiez si la taille de police de l'élément parent est différente de la taille de la police de base de l'habillage.



Utiliser les composants de Codex Vue 3


Pour commencer
Consultez les documents officiels pour en savoir plus sur les composants Vue 3 disponibles, y compris les démonstrations et les informations d'utilisation (voir par exemple la démo du composant Button). Notez que les échantillons de code de ces démos ne fonctionneront pas dans MediaWiki — Codex pour plus d'informations.



Utiliser les composants Codex dans MediaWiki et les extensions
Codex est inclus dans MediaWiki et il est disponible via le module ResourceLoader. Pour utiliser les composants Codex dans votre code, ajoutez  aux dépendances de votre module, puis importez les composants dont vous avez besoin comme suit : Vous pouvez ensuite passer ces composants dans l'option  de votre composant, et les utiliser dans le modèle de ce dernier. Rappelez-vous que, vous devez donc utiliser  pour CdxButton,   pour CdXTextInput, etc.

Exemples
Example of a simple block form using the CdxButton and CdxTextInput components from Codex: Exemple de définition de module (dans le format ) :



Utiliser les icônes Codex


Pour commencer
Visit the official docs site for information about the icon system and a list of all icons.



Utiliser les icônes Codex dans MediaWiki et les extensions
Pour des raisons de performance, il n'y a pas de module ResourceLoader  contenant toutes les icônes de Codex. Un tel module serait énorme et coûteux, car la plupart des utilisateurs de Codex n'ont besoin que d'une poignée de ces 200 icônes. Au lieu de cela, ResourceLoader fournit un moyen pour les modules d'intégrer les icônes dont ils ont besoin, en définissant comme suit un fichier de paquet : Ces icônes peuvent ensuite être importées dans les fichiers  comme suit : Pour plus d'informations sur la façon d'utiliser ces icônes une fois qu'elles ont été importées, voir la documentation de Codex sur les icônes.

Exemples
Exemple du même bloc formaté comme ci-dessus, mais avec une icône ajoutée :

Exemple de définition du module ResourceLoader : Dans cet exemple,  est un fichier d'initialisation qui démarre le composant , comme documenté avec ici.



Utiliser les mixins Codex Less
Certaines fonctionnalités de Codex sont mises en œuvre à l'aide de mixins Less. Par exemple, le composant Link est un mixin Less plutôt qu'un composant Vue, et l'utilisation d'icônes dans les composants CSS seulement nécessite d'utiliser un mixin Less (voir aussi la documentation ci-dessous pour l'Codex ).

L'utilisation des mixins Codex Less dans MediaWiki et les extensions fonctionne de manière très similaire à l'utilisation des jetons de conception : il suffit d'importer, ce qui rend tous les mixins Codex disponibles, ainsi que les jetons de conception.

Exemple de fichier Less utilisant un mixin : Notez que les exemples du site de documentation de Codex importent les jetons de  et ensuite le mixin pertinent de  mais cela ne fonctionne pas dans MediaWiki. Au lieu de cela, vous devez importer  comme indiqué dans l'exemple ci-dessus.



Utiliser le composants Codex uniquement CSS
Certains composants Codex ont des versions CSS seulement qui fonctionnent sans JavaScript. Vous pouvez vérifier qu'un composant possède une version CSS uniquement en recherchant ce composant dans la documentation de Codex, et voir s'il existe une section appelée version CSS uniquement. Par exemple, le composant Bouton possède une telle section. Cette section de documentation contient des exemples de l'apparence du HTML de ce composant.

Pour utiliser un composant CSS uniquement, procédez comme suit :


 * Générer le HTML du composant comme l'indique sa documentation
 * Charger le module, en utilisant
 * Certains composants nécessitent le chargement de styles supplémentaires au travers des mixins Less. Si vous en avez besoin, créez votre propre module ResourceLoader avec les styles requis, et chargez-le avec  aussi bien

<span id="Simple_example">

Exemple simple
<span id="Complex_example">

Exemple plus complexe
Dans  : Dans  : Dans  :

<span id="Migrating_from_MediaWiki_UI_to_Codex">

Migrer de l'interface utilisateur MediaWiki vers Codex
Lorsque vous remplacez l'interface utilisateur obsolète de MediaWiki par Codex, il est recommandé d'utiliser les composants CSS uniquement du paquet, ou dans certains cas les jetons   et les mixins Less à la place.

Veuillez consulter l'article Migrer l'interface utilisateur MediaWiki pour les informations détaillées.

<span id="Codex_release_cadence">

Fréquence de diffusion de Codex
Une nouvelle version de Codex est diffusée un mardi sur deux. Le jour où la nouvelle version est créée, nous fournissons également un correctif du noyau MediaWiki pour utiliser cette nouvelle version. Comme nous le faisons le mardi, la mise à jour du noyau sera déployée la semaine suivante (la prochaine fois que le train de déploiement est réactivé). Vous pouvez voir tous les labels Codex sur Gerrit ou un calendrier des labels sur GitHub. Pour plus d'informations sur ce qui est contenu dans chaque version, voir le journal des modifications.

Voir aussi le Calendrier des versions de l'équipe des systèmes de conception

<span id="Where_to_find_the_latest_version_of_Codex">

Où trouver la dernière version de Codex
Le site officiel de documentation est maintenant basé sur la dernière version de Codex (qui est celui du noyau de MediaWiki).