Skip to content

v11.14
Compare
Choose a tag to compare
@JabX JabX released this 29 Jan 14:43
· 183 commits to master since this release
v11.14.1
8eb7adc

Refonte de la gestion des icônes

Focus ne met plus "material-icons" en dur pour toute icône renseignée avec simplement un nom, ni "icon-{name}" pour une icône dite "personnalisée". Désormais, toutes les icônes sont définies comme ayant un name et une className, et un className par défaut est défini dans config.defaultIconClassName (qui est toujours "material-icons" en revanche).

Vous pouvez donc passer "home", ou {name: "home", className: "material-icons-outlined"}, ou encore {i18nKey: "focus.icons.list.showAll"} à toute propriété de composant qui prend une icône. Si vous utilisez une clé i18n, library a été remplacé par className, mais la clé doit toujours pointer sur un objet {name, className?}.

L'API de <FontIcon> a évolué pour suivre ce changement :

<FontIcon>home</FontIcon>
<FontIcon iconClassName="material-icons-outlined">home</FontIcon>
<FontIcon iconI18nKey="focus.icons.list.showAll" />

// ou vous pouvez utiliser la prop combinée `icon` qui prend directement un des 3 types de définition d'icône : 
<FontIcon icon={{className: "material-icons-round"}}>home</FontIcon>

La classe CSS de l'icône peut également être un template (si elle utilise {name}), dans le cas où vous avez besoin d'avoir une classe CSS différente par icône (si votre police ne convertit pas directement le nom comme Material Icons ou si vous n'avez pas de police).

Breaking changes

  • getIcon() n'existe plus, à remplacer par les nouvelles façons de décrire des icônes
  • Une icône custom ne pose plus 2 spans (celui du FontIcon + celui de l'icône custom en "icon-{name}", mais plus qu'un seul.

referenceStore.get

Vous pouvez enfin forcer la récupération d'une liste de référence en faisant await referenceStore.get("droit"), qui appellera le serveur si besoin. Il n'y a plus besoin de tricher avec des await when(() => referenceStore.droit.length > 0) !

useReferenceTracking (referenceStore.track)

Le tracking automatique de toutes les références dans les formulaires (withReferenceTracking / config.trackReferenceLoading) s'est révélé être une mauvaise idée (ça ne marche pas bien sur les pages qui ont plusieurs formulaires), il a donc été retiré (RIP janvier 2024 - janvier 2024).

A la place, vous pouvez désormais le faire explicitement via useReferenceTracking :

    const actions = useFormActions(entity, a => / * */):
    useReferenceTracking(actions.trackingId, referenceStore, "droit");

useReferenceTracking utilise une nouvelle API referenceStore.track qui permet d'ajouter un ou plusieurs IDs de suivi sur des listes de référence. Vous n'aurez à priori jamais besoin d'utiliser cette API directement.

Refonte de la documentation

Ce n'est pas encore tout à fait #195 en entier (il y a encore pas mal de boulot à faire dessus), mais cette release introduit une refonte de la documentation, qui contient en particulier un showcase de tous les composants de base, à peu près entièrement fonctionnel.

Les évolutions de la documentation se sont pour l'instant concentrées sur les évolutions récentes de Focus, donc attendez vous à voir de la documentation à jour sur tous les composants de la refonte toolbox/forms et sur les fonctionnalités de base (messages, requêtes, store de références). Et une page d'accueil à jour aussi 😄

La partie sur les formulaires, les listes, le CSS et la mise en page seront mises à jour plus tard, et incluront évidemment un bout de showcase 😉

Elle est toujours au même endroit

loading sur Button et IconButton

Vous pouvez désormais afficher un spinner à la place de l'icône dans un bouton. Vous pouvez regarder à quoi ça ressemble dans la doc 😉

Assets 2
Loading