PayGreen/paygreen-ui v1.2.0

Amélioration de composants de Menu, de couleurs et de textes + ajout d'icons et refacto de media queries

on GitHub

Par @OliviaGometz dans #166, #168, #169, #170 et #171 💪

Media queries

• Retrait du vieux système de media queries du thème (tous nos projets qui les utilisaient ont une MR de MAJ PG UI avec le passage sur le nouveau système, donc ça servait plus à rien). Ce que ça change côté intégration (pour les projets PayGreen, ça a déjà été géré partout) : il faut chercher les theme.query et les remplacer par theme.screen, et retirer les parenthèses. Ce qui donne :

Avant ❌ :

@media (${props => props.theme.query.min.lg})

Après ✔️ :

@media ${props => props.theme.screen.min.lg}

Couleurs du thème

• Ajout des couleurs senary et septenary (respectivement doré et bleu "jean" par défaut).
• Amélioration du gradientShade du vert primary qui était trop clair (le dégradé était trop pâle pour permettre une bonne lisibilité, la teinte a donc été foncée).

Badge

• Passage du colorType en reverse sur le Badge embarqué dans un Logo avec un isWhite={true} (ça permet d'avoir un truc plus cohérent visuellement, et c'est automatique). Ce qui change à l'intégration : plus besoin de passer de colorType sur le Badge (le Logo le gère tout seul en fonction de son isWhite).

Composants de Menu (pour les sites vitrines)

• Création d'un composant MenuMobile propre (au lieu de l'utilisation d'une <div className="main-nav"> à l'intérieur du MenuGroup), qui embarque ses propres styles et ses propres props. Il contient les composants MenuHamburger et UserIcon par exemple (ce sont les contrôles d'ouverture des MenuPrimary et MenuSecondary sur mobile), ainsi que le Logo/bouton de retour vers l'accueil, qui est le seul élément qui reste affiché dans ce composant sur desktop.
• Application du topStyle sur mobile (avant, il n'était visible que sur desktop, mais maintenant ça fonctionne aussi sur mobile et c'est cute)
• Automatisation des props blockWidth, hasBaseline et isWhite des Logo embarqués dans le MenuMobile : ces props sont définies dans le composant MenuMobile, plus besoin de s'en occuper !
• Passage de props aux enfants du MenuGroup plutôt que d'écraser le style (ça permet notamment d'avoir un Logo avec un Badge qui s'adapte bien au style topStyle du MenuGroup, et globalement ça évite de réinventer la roue pour des composants qui embarquent déjà tous les styles dont on a besoin).
• Retrait de la props hasTopStyle sur le composant Header (il n'a plus de props du tout, désormais) : il n'embarque plus aucune ombre, et n'a donc pas besoin de gérer le fait d'être ou non en topStyle.
• Ajout d'une ombre sur le MenuTertiary (maintenant, il doit la gérer tout seul puisque le Header ne le fait plus pour lui).

Ce qui devra être changé côté intégration :

• Composant Header : retirer le hasTopStyle (il est devenu inutile).
• Composant Logo contenu dans un MenuGroup : plus besoin de mettre un blockWidth (props inutile).
• Remplacer les <div className="main-nav"> par le composant MenuMobile (impératif sinon ça ne marchera plus ! ⚠️). Il n'y a aucune props à lui ajouter puisqu'il est contenu dans un MenuGroup.

Icons

• Gestion du disabled sur les Icons (ils ont désormais un style approprié quand ils sont désactivés sans qu'aucune manipulation ne soit faite par l'intégrateur).
• Modification de l'icon Plug (qui ressemblait à un Unplug, donc ça a été modifié)
• Ajout de l'icon Unplug (l'ancien icon Plug)
• Ajout de l'icon Earth
• Ajout de l'icon Start

⚠️ Si vous aviez utilisé l'icon Plug pour signaler une déconnexion, par exemple (si vous l'utilisiez comme un Unplug, en fait), remplacez-le par le nouvel icon Unplug.

Title et Text

• Ajout de la props isResponsive sur les composants Text et Title, à true par défaut : il est donc désormais possible de "neutraliser" la minimisation de la taille des Text et Title sur petit écran en la forçant à false.
• Les Title xxs, xs et sm sont désormais minimisés par défaut sur mobile, afin de garder un bon rapport entre la taille des titres et des textes.