1024pix
[BREAKING][DESIGN] Utiliser les composants MS au lieu de FontAwesome (PIX-14433)
:boom: BREAKING_CHANGES
Changement des signatures pour les composants permettant l'usage d'icone custom
iconPrefix => plainIcon icon => iconName pour plus de cohérence entre les usages des composants.
:christmas_tree: Problème
Nous utilisons encore les icon FA alors que nous avons notre composant PixIcon
:gift: Proposition
Utiliser PixIcon partout où FaIcon est utilisé
:star2: Remarques
- [x] migration FaIcon => PixIcon
Correction des Composants CSS
- [x] PixIconButton
- [x] PixBanner
- [x] PixReturnTo
- [x] PixMessage
- [x] PixLabel PixLabelWrapped
- [x] Pix*Select
- [x] PixInput*
- [x] PixIndicatorCard
- [x] PixCollapsible
- [x] PixToggle
- [x] PixButton
- [x] PixTooltip
- [x] PixPagination
- [x] PixModal
- [x] PixSidebar
:santa: Pour tester
Vérifier que les composants modifié ont les bon icônes
Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr731.review.pix.fr Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr731/environment
- PixIconButton 👍
- PixBanner 👍
- PixReturnTo 👍
- PixMessage 👍
- PixLabel PixLabelWrapped - je ne vois pas d'usage d'icône dans le label
- Pix*Select 👍
- PixInput* - C'est la check et l'état neutral dans la checkbox ? je n'arrives pas à inspect cet élèment. OK pour inputs > input
- PixIndicatorCard - changer l'icône info (tooltips) filaire par une icône fill/pleine
- PixCollapsible - icon invisible 🫣
- PixToggle - icon cassé sur la hauteur et mauvaise couleur de l'icône
- PixButton - bizarre la largeur du bouton est fixe, normalement la taille doit être définit par le padding et la longeur du texte, l'ajout de l'icône devrait changer la longeur du bouton.
- PixTooltip : problème de couleur noir sur noir de l'icône ainsi que de taille de l'icône
- PixPagination problème de spacing entre l'input et le texte qui suit. c'est dû au changement d'icône ?
- PixModal 👍
- PixSidebar 👍
- PixLabel PixLabelWrapped - je ne vois pas d'usage d'icône dans le label
Usage dans les radio button / checkbox avec les variant Tile.
- PixPagination problème de spacing entre l'input et le texte qui suit. c'est dû au changement d'icône ?
Il est déjà actuellement là sur
- PixTooltip : problème de couleur noir sur noir de l'icône ainsi que de taille de l'icône
ce n'est pas la tooltip qui porte la couleur de l'icone. c'est le layout qui donnera la couleur. je n'ai volontairement pas définit de couleur pour
- PixButton - bizarre la largeur du bouton est fixe, normalement la taille doit être définit par le padding et la longeur du texte, l'ajout de l'icône devrait changer la longeur du bouton.
les icones FA était des icones dont les bordures était collé à la view box. ce qui n'est pas le cas avec les svg MS. il y a un fond perdu sur chaque icone. ce qui influ sur la largeur du button.
c'était un problème de configuration de la stories avec bouton .
L'icône campaign paraît plus petite que les autres icônes dans le composant PixBanner
Tandis qu'avant c'était de la même taille.
Vu dans la doc du searchInput https://ui-pr731.review.pix.fr/?path=/docs/others-searchinput--docs
Vu sur l'icône d'un lien externe sur PixBanner, l'icône n'est pas aligné avec le texte. https://ui-pr731.review.pix.fr/?path=/docs/notification-banner--docs
La PR fait beaucoup plus que mettre des PixIcon dans les composants, la migration sur les applis sera à faire avec beaucoup de vigilance.
L'icône campaign paraît plus petite que les autres icônes dans le composant PixBanner
Tandis qu'avant c'était de la même taille.
Oui. C'est la manière dont sont composés les icon MS. Le design est notifié de ca.
@xav-car
C'est top ! :) quelques retours sur :
PixIndicatorCard : On ne peut pas dixer une taille plus large de base dans le composant pour l'icône pour ne pas avoir à le gérer de manière locale à chaque utilisation ? Si oui, 2.5 rem plutôt que 1.5 rem c'est trop petit pour la proportions de la carte. Localement la couleur c'est ok car on aura plus besoin d'avoir la main pour que le contraste soit ok et couvrir tout les besoins.
PixCollapsible : la taille du chevron me semble très grande sur la page "default" alors que dans la doc la taille est bonne. ON peut se fier à la doc plutôt ?
PixTooltips : fixer la couleur sur le noir ce sera tjr blanc et la taille sera toujours le lineheight hauteur de la font.
@xav-car
C'est top ! :) quelques retours sur :
PixIndicatorCard : On ne peut pas dixer une taille plus large de base dans le composant pour l'icône pour ne pas avoir à le gérer de manière locale à chaque utilisation ? Si oui, 2.5 rem plutôt que 1.5 rem c'est trop petit pour la proportions de la carte. Localement la couleur c'est ok car on aura plus besoin d'avoir la main pour que le contraste soit ok et couvrir tout les besoins.
PixCollapsible : la taille du chevron me semble très grande sur la page "default" alors que dans la doc la taille est bonne. ON peut se fier à la doc plutôt ?
PixTooltips : fixer la couleur sur le noir ce sera tjr blanc et la taille sera toujours le lineheight hauteur de la font.
Tooltip => fix en cours PixCollapsible => certainement un souci de cache navigateur. la taille est ok sur le doc et default chez nous PixIndicatorCard => fix en cours
:tada: This PR is included in version 47.0.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
