v11.21

Refonte du Layout

Cette verrsion réimplémente le Layout/Scrollable (et les choses qui y sont liées comme le Header, le ScrollspyContainer et l'AdvancedSearch) pour implémenter tous les comportement "sticky" avec des position: sticky en CSS au lieu de calculer des positions à la main en Javascript pour tout faire.

En particulier :

• Le Header n'est plus posé en double, c'est le même Header qui reste entre le header déplié (s'il y en a un) et le Header sticky. Si vous posez un HeaderContent, il scrollera maintenant avec le reste de la page et il passera sous le HeaderTopRow. Les HeaderActions seront posées sous le HeaderContent comme aujourd'hui et scrolleront pour rester "sticky" à leur place sur le header sticky. Il n'y a donc plus de notion de canDeploy/header plié ou déplié.

• Le menu de gauche du Scrollspy (et de l'AdvancedSearch pour les facettes) est un composant dédié appelé LateralMenu qui se pose directement à côté (avec un display: flex à priori), au lieu d'avoir un portal qui remonte le poser dans le Scrollable (Layout), et il est entièrement géré en CSS. Cela vous laisse donc par exemple la possibilité de changer complètement la mise en page du Scrollspy (par exemple pour mettre le menu au dessus au lieu d'à gauche).

  Le MenuComponent du Scrollspy par défaut contient désormais le LateralMenu, donc si vous voulez le surcharger et garder son positionnement à gauche vous devrez aussi poser un LateralMenu
  Les facettes de l'AdvancedSearch sont maintenant toujours posées en sticky à gauche avec un LateralMenu (enfin sauf si avec facetBoxPosition à none ou action-bar. D'ailleurs, vous pouvez maintenant facilement le mettre à droite en inversant le sens du flex qui le contient.

• Le "top row" (donc Summary + ActionBar) de la recherche avancée est désormais "sticky" par défaut, et un nouveau hook useStickyClip, utilisé par la recherche avancée du coup, permet de faire en sorte que les résultats soient bien "coupés" lorsqu'ils passent sous la "top row" (au lieu d'apparaitre derrière). tableFor peut aussi le faire avec les headers de colonnes, mais ce n'est pas le cas par défaut (à cause du box-shadow qui est posé par défaut en CSS qui fait que c'est moche 😄 )

• Tous les calculs en Javascript n'ont pas été retirés, car on a toujours besoin de déterminer le top des divers position: sticky. Par défaut, pour les composants qui ont des comportements sticky, il sera calculé comme avant avec la hauteur du header + --content-padding-top, mais vous pouvez le surcharger avec le prop overrideOffsetTop dans le Scrollspy, AdvancedSearch et tableFor.

• Ah, et le Panel est désormais dans le module layout au lieu du module forms, désolé ça va faire beaucoup d'imports à changer... 🥺

Cette version intègre également la documentation complète du module layout, maintenant qu'il a été refait tout beau ✨
Vous pourrez donc y voir ce que donnent les évolutions ainsi présentées dans cette release note 🙂

Résumé des breaking changes

• Les imports de Panel viennent désormais de @focus4/layout au lieu de @focus4/forms
• Le HeaderScrolling n'a plus de prop canDeploy (elle ne sert plus à rien)
• Le HeaderContent est affiché différemment
• Les menus latéraux du ScrollspyContainer et de l'AdvancedSearch ont un nouveau design (et AdvancedSearch n'a plus de facetBoxPosition: "sticky" car elle est toujours sticky maintenant)
• Vous ne pouvez plus utiliser le ScrollableContext (qui est désormais exposé depuis @focus4/layout) pour poser un menu latéral, il faut le faire avec le composant LateralMenu. Si vous l'utilisiez pour faire une surcharge bizarre de la taille du header, vous pouvez maintenant la passer directement au ScrollspyContainer.

Fil d'Ariane

Pour répondre à la demande populaire, un composant de fil d'Ariane a été ajouté dans le module layout, qui s'intègre nativement avec le routeur et les traductions i18n.

Il est utilisé dans le starter kit et possède évidemment sa propre page de documentation 😉