[TECH] Améliorer le debug des polices d'écriture (PIX-5249)

[yannbertrand]

🎄 Problème

Avec l'usage historique de SCSS, il n'est pas évident de savoir pourquoi une police d'écriture est utilisée. Une fois compilé, on se retrouve avec un ensemble de propriétés relatives aux polices assez peu utiles pour l'usager de Pix UI, notamment la font-family.

🎁 Proposition

Ajouter une couche d'abstraction sur la font-family utilisée, ainsi "Nunito", Arial, sans-serif devient var(--pix-font-family-title) pour faciliter le debug.

🌟 Remarques

J'aurai bien indiqué que ces nouvelles "variables" sont "privées" car elles ne sont pas censée être utilisées directement, mais le linter m'ennuie :

Expected custom property name "--_pix-font-family-title" to be kebab-case  custom-property-pattern

🎅 Pour tester

Vérifier que les polices sont bien rendues dans la doc des typographies et qu'au debug on retrouve une variable plutôt que des valeurs finales.

[pix-bot-github]

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr569.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr569/environment

[xav-car]

mettre un commentaire au dessus // this is private attribut ( use only on placeholder %pix-title / %pix-body)

[yannbertrand]

mettre un commentaire au dessus // this is private attribut ( use only on placeholder %pix-title / %pix-body)

Est-ce que tu penses que rajouter un underscore au début et ajouter un eslint ignore serait utile aussi ?

[xav-car]

mettre un commentaire au dessus // this is private attribut ( use only on placeholder %pix-title / %pix-body)

Est-ce que tu penses que rajouter un underscore au début et ajouter un eslint ignore serait utile aussi ?

je pense que c'est pas necessaire. après ce sera au reviewer de faire attention. Rien n'empêchera d'utiliser celle avec _ tout de même. (si on va chercher la property. on verra le commentaire donc cela me parait suffisant seulement le commentaire).

[yannbertrand]

je pense que c'est pas necessaire. après ce sera au reviewer de faire attention. Rien n'empêchera d'utiliser celle avec _ tout de même. (si on va chercher la property. on verra le commentaire donc cela me parait suffisant seulement le commentaire).

Finalement j'ai fait les deux, pour sécuriser au max ^^ (pour ma part j'ai du mal à remonter jusqu'à l'implem de Pix UI quand je travaille côté Pix :()

[pix-service-auto-merge]

🎉 This PR is included in version 44.3.8 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀