Annonce de Fluent UI Blazor v5 RC5 — AreaChart, DataGrid maître/détail, Overflow et plus encore

Nous sommes ravis d’annoncer la cinquième Release Candidate de la bibliothèque Fluent UI Blazor v5 ! Depuis la RC4, l’équipe s’est concentrée sur les derniers scénarios structurants avant la version finale : un nouveau FluentAreaChart, les lignes maître/détail de FluentDataGrid, une refonte de FluentOverflow, une navigation mieux intégrée à Blazor, ainsi que de nombreuses améliorations de performances, d’accessibilité et de rendu statique.

Cette RC met également à jour Fluent UI Web Components et les System Icons, renforce les composants de formulaire, améliore FluentLayout et corrige plusieurs cas limites rencontrés avec la virtualisation, les boîtes de dialogue, le mode RTL ou les événements clavier.

Visitez notre site de démonstration.

Nouveau graphique : FluentAreaChart

Le package Microsoft.FluentUI.AspNetCore.Components.Charts, introduit avec la RC4, accueille désormais FluentAreaChart. Ce graphique permet de représenter l’évolution d’une ou plusieurs séries sous forme de courbes dont la surface est remplie.

Cette contribution introduit également une infrastructure commune pour les axes, légendes, info-bulles et dimensions. Les composants Donut, Funnel, Horizontal Bar et Gantt en profitent eux aussi, ce qui rend le comportement et l’apparence des graphiques plus cohérents.

Installation :

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Charts --prerelease

DataGrid : lignes maître/détail

La principale nouveauté de FluentDataGrid est la prise en charge des lignes de détail extensibles. Une ligne peut désormais afficher un contenu complémentaire juste sous ses cellules : formulaire d’édition, historique, sous-tableau ou toute autre vue Razor.

Le contenu est fourni par un template RowDetails. L’ouverture et la fermeture peuvent être déclenchées depuis la grille ou pilotées par code. Un exemple dédié montre aussi comment charger les détails à la demande, afficher un indicateur de progression et conserver le résultat en cache.

Le paramètre HasRowDetails permet de décider, ligne par ligne, si le bouton d’extension doit être affiché. Cette distinction est utile lorsque seules certaines entrées possèdent des informations complémentaires.

DataGrid : performances, virtualisation et hiérarchies

Plusieurs changements rendent la grille plus rapide et plus robuste :

  • Cellules non interactives plus légères (#5023) — lorsque l’interactivité Fluent n’est pas nécessaire, la grille rend une cellule HTML native. Cette optimisation réduit sensiblement les allocations et le coût de rendu des grandes grilles.
  • Virtualisation et chargement des données (#4972) — le chargement initial est mieux synchronisé avec Virtualize et les requêtes annulées sont gérées plus proprement, évitant des chargements en double ou devenus obsolètes.
  • Tri des données hiérarchiques (#4982) — le tri conserve désormais la structure parent/enfant au lieu d’aplatir la hiérarchie.
  • Utilisation dans un FluentDrawer ou un FluentDialog (#4983) — correction d’un affichage fugitif des menus de colonnes lors du traitement des événements.
  • Interop de réorganisation sécurisée (#5066) — l’initialisation JavaScript n’est planifiée que si ReorderableColumns est activé, et les points d’entrée JS tolèrent désormais une grille détachée ou non initialisée. Cela évite notamment de casser un circuit Blazor Server pendant un nouveau rendu.

La grille utilise aussi davantage d’attributs HTML pour exprimer ses états et ses comportements, à la place de classes CSS internes (#5075). Attention lors de la migration : si votre application surcharge les anciennes classes internes du DataGrid, ces sélecteurs CSS devront être adaptés.

Enfin, la documentation des colonnes et les exemples ont été réorganisés afin de faciliter la découverte des nombreuses possibilités du composant (#5034).

Refonte de FluentOverflow

FluentOverflow repose désormais sur le Web Component <fluent-overflow> (#4961). Le calcul des éléments qui débordent s’effectue directement côté navigateur, avec moins d’allers-retours entre JavaScript et .NET lors d’un redimensionnement. FluentAppBar utilise lui aussi ce nouveau mécanisme.

La nouvelle implémentation ajoute :

  • MaxRenderedItems, pour limiter le nombre d’éléments renvoyés dans le menu de débordement tout en conservant le nombre total ;
  • des éléments fixes, avec les modes fixed="fixed" et fixed="ellipsis" ;
  • un événement de débordement fournissant notamment le nombre d’éléments masqués et l’index du premier élément concerné.

Cette refonte contient des breaking changes :

  • MoreButtonTemplate devient MoreTemplate ;
  • l’ancien composant FluentOverflowItem disparaît au profit d’attributs placés directement sur les éléments enfants.

Consultez le guide de migration avant de mettre à jour une barre d’actions ou une FluentAppBar personnalisée.

Liens et navigation Blazor

FluentAnchorButton et FluentLink utilisent maintenant la navigation Blazor pour les URL internes de même origine. Une navigation dans l’application ne provoque donc plus automatiquement un rechargement complet de la page.

Le nouveau paramètre ForceLoad permet de retrouver explicitement le comportement natif du navigateur :

<FluentLink Href="/orders">Commandes</FluentLink>

<FluentAnchorButton Href="/reports" ForceLoad="true">
    Recharger le rapport
</FluentAnchorButton>

Quand ForceLoad vaut false, sa valeur par défaut, les fonctionnalités de navigation de Blazor sont privilégiées. Avec true, la ressource est rechargée depuis le serveur.

Dans le même esprit, un FluentNavItem désactivé ne rend plus son attribut href. L’élément ne peut ainsi plus être activé accidentellement au clavier ou par un outil d’assistance.

Le nouveau paramètre RenderWhen de FluentMenu accepte un prédicat et diffère la création du menu jusqu’à ce que celui-ci retourne true. Il devient possible d’éviter de remplir inutilement le DOM avec des menus volumineux qui ne seront peut-être jamais ouverts.

<FluentMenu Trigger="menu-trigger"
            RenderWhen="@(() => RenderMenu)">
    <FluentMenuList>
        <FluentMenuItem>Modifier</FluentMenuItem>
        <FluentMenuItem>Archiver</FluentMenuItem>
    </FluentMenuList>
</FluentMenu>

@code {
    private bool RenderMenu { get; set; }
}

Lorsque la condition devient vraie, le menu est rendu puis ouvert. Cette approche est particulièrement intéressante dans les listes contenant un menu contextuel pour chaque ligne.

Valeurs par défaut héritées

Le mécanisme DefaultValues sait maintenant appliquer une configuration enregistrée sur une classe de base à ses composants dérivés. Une valeur spécifique déclarée sur le composant concret garde la priorité.

builder.Services.AddFluentUIComponents(configuration =>
{
    configuration.DefaultValues
        .For<FluentChartBase>()
        .Set(component => component.RoundedCorners, true);

    configuration.DefaultValues
        .For<FluentDonutChart>()
        .Set(component => component.RoundedCorners, false);
});

La validation rejette aussi plus tôt les propriétés non modifiables et les valeurs incompatibles, ce qui rend les erreurs de configuration plus explicites au démarrage.

Formulaires et validation

Les champs de formulaire bénéficient d’une série d’améliorations fonctionnelles et visuelles :

  • Style du contrôle interne (#5061) — FluentTextInput, FluentTextArea et FluentNumberInput exposent ControlStyle, qui applique un style à l’élément .control situé dans le Shadow DOM. La constante FluentTextInput.HidePasswordToggle permet notamment de masquer le bouton natif d’affichage du mot de passe.
  • Libellé accessible des champs texte (#5071) — FluentField propage son libellé sous forme d’aria-label au contrôle interne de FluentTextInput, FluentTextArea et FluentNumberInput. Les champs requis incluent aussi une indication localisée.
  • Accessibilité de FluentSelect (#5074) — le contrôle interne reçoit désormais son nom accessible et son état aria-expanded, ce qui améliore son annonce par les lecteurs d’écran.
  • FluentRadioGroup et validation (#5063) — les changements de valeur notifient correctement le EditContext; les marges parasites des boutons radio et le contour de validation ont également été corrigés.
  • Messages de validation multiples (#5016) — plusieurs erreurs associées à un même champ ne sont plus affichées les unes par-dessus les autres.
  • Largeur de FluentTimePicker (#5062) — l’input interne occupe maintenant toute la largeur disponible. Le Web Component conserve toutefois une largeur minimale de 160 pixels.

La validation HTML native du navigateur devient par ailleurs optionnelle (#4989). Par défaut, une application peut conserver l’expérience de validation Blazor et Fluent UI sans afficher en parallèle les bulles natives du navigateur ; celles-ci peuvent être réactivées via la configuration globale de la bibliothèque lorsque le scénario le nécessite.

Enfin, FluentAutocomplete ne déclenche plus deux fois les callbacks associés, notamment @bind:after, après une sélection (#4981). Le composant ignore désormais l’événement dupliqué produit lorsque Blazor réapplique au DOM une sélection inchangée.

Accessibilité

Les composants boutons disposent maintenant d’un rôle explicite adapté à leur fonction (#5073). FluentButton, FluentAnchorButton, FluentCompoundButton et plusieurs boutons déclencheurs exposent ainsi role="button" ou role="link" selon le cas.

Le DataGrid reçoit lui aussi plusieurs ajustements d’accessibilité (#5029) : stratégie de libellés ARIA améliorée, attributs plus précis sur les menus et prise en charge des info-bulles d’en-tête. Ces changements facilitent la compréhension de la grille au clavier et avec un lecteur d’écran.

FluentLayout : rendu statique et impression

FluentLayout détecte désormais son point de rupture mobile directement dans le balisage et s’initialise automatiquement, y compris en rendu statique (#5054). Cette évolution réduit la dépendance aux appels d’interop au démarrage et fournit aussi l’identifiant du dialogue hamburger sous forme de valeur en cascade. Le travail sur FluentNav en rendu entièrement statique se poursuit séparément.

L’impression est également corrigée (#5070). Une feuille de style @media print masque les zones de navigation, l’en-tête, le pied de page et les panneaux latéraux, puis replace le contenu principal dans un flux adapté à l’impression sur plusieurs pages.

La hauteur CSS de l’en-tête est maintenant recalculée correctement lorsque les éléments du layout s’enregistrent (#4977), ce qui garantit une valeur fiable pour --layout-header-height.

MessageBar, Popover, Drawer et Text

  • FluentMessageBar — ResultTiming (#4994) : l’appelant peut choisir si le résultat asynchrone est produit lorsque la barre devient visible ou seulement lorsqu’elle est fermée. Les helpers non bloquants évitent d’attendre la fermeture lorsque ce n’est pas nécessaire.
  • FluentPopover en mode RTL (#5014) : les calculs d’alignement tiennent maintenant compte de la direction droite-à-gauche.
  • FluentDrawer de taille moyenne (#4988) : le style correspondant à la taille Medium est désormais correctement appliqué.
  • FluentText.As (#5017) : le paramètre est recentré sur son rôle sémantique et permet de choisir l’élément HTML rendu pour le texte, tout en conservant le composant Fluent comme hôte.
  • Templates de projet (#5015) : plusieurs problèmes signalés dans les templates Blazor Web App ont été corrigés et les exemples ont été alignés sur les API de la v5.

Événements clavier plus robustes

Les événements clavier synthétiques ou partiels peuvent contenir des propriétés JavaScript absentes, alors que leur équivalent .NET n’accepte pas toujours null. SafeKeyboardEvent normalise désormais ces données avant leur envoi à .NET (#5051).

Les chaînes, booléens et nombres manquants reçoivent une valeur sûre. Cela évite les exceptions de désérialisation rencontrées notamment avec certains mécanismes de remplissage automatique ou des événements créés par script, sans modifier le comportement de preventDefault et stopPropagation.

Web Components, applications Hybrid et dépendances

  • Fluent UI Web Components 3.0.0 (#4984), puis 3.0.2 (#5067) — la RC5 intègre les derniers correctifs du socle Web Components v3.
  • Hooks de démarrage Hybrid (#5079) — les fonctions beforeStart et afterStarted sont de nouveau exportées pour les hôtes BlazorWebView, notamment .NET MAUI, WPF et Windows Forms.
  • Model Context Protocol SDK 2.0.0 (#5055) — le serveur MCP de la documentation est aligné sur la version 2 du SDK et sur le schéma récent du registre. Ce changement concerne l’outillage et non les composants distribués aux applications.

Icônes Fluent UI System Icons 1.1.334

Les classes d’icônes ont été régénérées à partir de Fluent UI System Icons 1.1.334 (#5083). Cette mise à jour apporte de nouvelles variantes et tailles, notamment pour les familles ChatMultiple, CircleHint, Clover, Incognito, Sparkle, Weather, Rotate, Trend, Ticket et Wifi, tout en actualisant le tracé de plusieurs icônes existantes.

Documentation, qualité et site de démonstration

  • Le site de documentation affiche une NewsBar dynamique pour communiquer les annonces importantes, avec des notifications pouvant être fermées par l’utilisateur (#4973).
  • La documentation et sa présentation ont été nettoyées, notamment le guide de migration, les liens et le formatage (#4990).
  • Le package Charts dispose d’une couverture de tests unitaires étendue et d’une infrastructure de tests partagée (#4978).

À essayer maintenant

Ressource Lien
NuGet Microsoft.FluentUI.AspNetCore.Components --prerelease
Charts Microsoft.FluentUI.AspNetCore.Components.Charts --prerelease
Adaptateur OData Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter --prerelease
Adaptateur EF Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter --prerelease
Templates Microsoft.FluentUI.AspNetCore.Templates --prerelease
Documentation https://v5.fluentui-blazor.net
GitHub https://github.com/microsoft/fluentui-blazor
Guide de migration Migration vers v5

Cette cinquième Release Candidate consolide la v5 autour de scénarios concrets : grilles riches et performantes, composants accessibles, navigation fluide et rendu fiable dans les différents modes Blazor. Si vous utilisez FluentOverflow ou personnalisez les classes CSS internes du DataGrid, prenez le temps de vérifier les changements de migration avant la mise à jour.

Comme toujours, n’hésitez pas à ouvrir des issues sur GitHub et à contribuer. Un immense merci à toutes les personnes qui ont testé la RC4, signalé des problèmes et soumis des pull requests.

Happy Blazoring!