FluentUI.Blazor v5 RC4

Annonce de Fluent UI Blazor v5 RC4 — Charts, Notifications, Templates, FluentLabelInfo et plus encore

Nous sommes ravis d’annoncer la quatrième Release Candidate de la bibliothèque Fluent UI Blazor v5 ! Depuis la RC3, l’équipe a continué à pousser sur la branche dev-v5 avec un tout nouveau package Charts, deux adaptateurs DataGrid dédiés à OData et Entity Framework, un nouveau composant FluentLabelInfo, un nouveau composant FluentValidationMessage, une refonte complète des services Toast / Notification, un ensemble inédit de templates de projet (Blazor Web App, MAUI Hybrid, …), ainsi qu’une longue liste d’améliorations sur FluentAutocomplete, FluentPopover, FluentTimePicker, FluentDatePicker, FluentMenu, FluentGrid, FluentPaginator, FluentField, FluentSelect, FluentToast et bien d’autres.

Visitez notre site de démonstration.

Nouveau package : Microsoft.FluentUI.AspNetCore.Components.Charts

Les Charts sont là ! La RC4 introduit un tout nouveau package Charts, distribué sous forme de NuGet séparé afin que vous ne l’incluiez que lorsque vous en avez besoin. L’ensemble initial de graphiques disponibles en v5 couvre les scénarios les plus courants :

• Donut chart
• Funnel chart
• Horizontal bar chart
• Horizontal stacked bar chart

Les composants partagent une API cohérente basée sur une source de données fortement typée et les tokens de thème Fluent UI, de sorte que les graphiques suivent automatiquement la palette de couleurs de votre application, le thème clair/sombre et la densité.

@using Microsoft.FluentUI.AspNetCore.Components.Charts

<FluentDonutChart ChartData="@Data"
                  ChartTitle="Ventes par région"
                  Width="320" Height="320" />

@code
{
    DonutDataPoint[] Data { get; set; } =
    [
        new DonutDataPoint { Legend = "Europe", Data = 42 },
        new DonutDataPoint { Legend = "Amérique du Nord", Data = 28 },
        new DonutDataPoint { Legend = "Asie", Data = 22 },
        new DonutDataPoint { Legend = "Autre", Data = 8 },
    ];
}

Installation :

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

Nouveaux packages : adaptateurs DataGrid OData & Entity Framework

Pour garder la bibliothèque principale légère, les adaptateurs FluentDataGrid pour OData et Entity Framework sont désormais livrés sous forme de deux packages NuGet dédiés :

• Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter
• Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

Cela permet de réduire la taille du package principal pour les applications qui n’en ont pas besoin, tout en offrant une intégration de premier ordre avec IQueryable pour les services OData ou les DbContext EF Core.

Nouveau composant : FluentLabelInfo

FluentLabelInfo affiche un libellé suivi d’une petite icône d’information. Cliquer sur l’icône ouvre un popover qui explique le champ — parfait pour fournir une aide contextuelle à côté des champs de saisie sans surcharger le formulaire avec des paragraphes descriptifs.

<FluentLabelInfo InfoText="Ceci est un exemple d'information pour un InfoLabel."
                 InfoActionLink="https://dotnet.microsoft.com/">
    Libellé d'exemple
</FluentLabelInfo>

<FluentTextInput Label="Libellé d'exemple"
                 LabelInfo="@(LabelInfo.WithText("Ceci est un exemple d'information pour un InfoLabel.")
                                       .WithActionLink("https://dotnet.microsoft.com"))" />

Points forts :

• Icône, titre et contenu personnalisables — le popover peut accueillir n’importe quel balisage via ChildContent.
• Textes par défaut localisables — les textes intégrés « More info » / « Close » peuvent être surchargés via le mécanisme de localisation standard.
• Paramètre MaxWidth — limite la largeur du popover pour garder les longues descriptions lisibles.

Nouveau composant : FluentValidationMessage

FluentValidationMessage est l’équivalent Fluent UI du composant ValidationMessage<T> intégré à Blazor. Il s’accroche au EditContext et affiche les erreurs de validation avec le même style et la même densité que le reste des composants de formulaire Fluent UI, afin que les messages d’erreur ne dénotent plus à l’intérieur d’un FluentField.

<EditForm Model="@Model">
    <DataAnnotationsValidator />
    <FluentValidationSummary />

    <FluentTextInput Name="identifier" 
                     @bind-Value="Identifier" 
                     Label="Identifiant"
                     Required="true" />
</EditForm>

Nouveau NotificationService (anciennement MessageBarService)

La RC4 introduit un INotificationService unifié permettant d’afficher des notifications in-app (barres de message) depuis n’importe où dans votre application — depuis un service, un handler ou un composant — sans avoir à câbler manuellement un FluentMessageBarProvider.

Le service a été initialement livré sous le nom IMessageBarService puis renommé en INotificationService pour un nom plus idiomatique et pour laisser la place à de futurs canaux (toasts, dialogs, …).

Pour que les barres de message créées par le service soient rendues, vous devez ajouter au moins un composant FluentMessageBarProvider dans votre application (typiquement dans MainLayout.razor, ou dans toute page où vous souhaitez que les messages apparaissent).

<FluentMessageBarProvider Section="MAIN" />

@inject INotificationService Notifications

// Affiche une barre de message de type Succès
await NotificationService.ShowSuccessBarAsync("MAIN", "Ceci est une barre de message de succès")

Refonte du service Toast

Le service Toast a été refondé en s’appuyant sur le même modèle de notification que INotificationService, et prend désormais en charge les notifications non bloquantes.

@inject INotificationService Notifications

// Affiche un Toast de succès
await NotificationService.ShowSuccessToastAsync("Enregistré");

// Affiche un Toast de progression
var ProgressResult = await NotificationService.ShowProgressToastAsync("Traitement en cours...");

// Utilise la référence conservée pour interagir avec le toast plus tard
await ProgressResult.Instance.CloseAsync();

Nouveaux templates de projet

Un ensemble complet de templates de projet Fluent UI Blazor est désormais disponible, vous permettant de générer une application prête à l’emploi en une seule commande :

dotnet new install Microsoft.FluentUI.AspNetCore.Templates
dotnet new fluentblazor     -n MyApp       # Blazor Web App
dotnet new fluentblazorwasm -n MyApp.Wasm  # Blazor WebAssembly Standalone
dotnet new fluentblazormaui -n MyApp.Maui  # .NET MAUI Hybrid

Les templates intègrent déjà les providers Fluent UI (FluentLayout, theming, toast, dialog, notification, overlay), ainsi qu’une page de démarrage utilisable comme référence.

Autres améliorations

FluentAutocomplete a bénéficié d’une série ciblée de correctifs et d’améliorations ergonomiques :

FluentPopover & FluentMenu

• FluentPopover — réagit aux changements de viewport (#4884) — les popovers se repositionnent correctement lorsque le viewport est redimensionné, défilé ou pivoté.
• FluentPopover est désormais en position: fixed (#4918) — corrige les problèmes de découpage lorsque le popover est rendu à l’intérieur d’un conteneur défilant.
• FluentMenu — correction de la gestion des types et de la logique d’initialisation (#4921) — résout des cas limites lorsque le menu était ouvert avant la fin de l’initialisation de son déclencheur.

Inputs, Lists & DataGrid

• FluentSelect (combobox) — correction de la récupération du texte par défaut (#4894) — le texte affiché reflète désormais correctement la valeur liée dès le premier rendu.
• FluentTextArea — correction de la définition de la valeur initiale pendant le rendu (#4917).
• FluentOption — classe CSS personnalisable (#4911) — permet d’appliquer un style par option dans FluentSelect / FluentCombobox / FluentListbox.
• FluentPaginator — ne plus utiliser la couleur primaire pour les icônes par défaut (#4930) — améliore le contraste sur les arrière-plans teintés.

FluentTimePicker & FluentDatePicker

• FluentTimePicker — correction de la logique de génération des éléments et ajout de tests unitaires (#4890) — la liste des heures disponibles respecte désormais correctement les paramètres Min, Max et Step.
• FluentDatePicker — ajout des paramètres MinDate et MaxDate (#4955) — permet de restreindre le calendrier à une plage de dates donnée, avec la localisation correspondante.

<FluentDatePicker @bind-Value="@MyDate"
                  MinDate="DateTime.Today"
                  MaxDate="DateTime.Today.AddMonths(6)" />

Layout : FluentGrid & FluentField

• FluentGrid — refonte de l’espacement basé sur gap en CSS (#4922) — un espacement plus simple et plus prévisible entre les éléments, avec une prise en charge complète du paramètre Spacing sans marges négatives.
• FluentField — meilleure gestion de Width (#4942) — la largeur du champ est désormais propagée automatiquement à l’input interne.

Web Components & Rendu

• Mise à jour de @fluentui/web-components et des dépendances associées (#4916).
• L’enregistrement des composants vérifie désormais la prise en charge de customElements (#4932, suivi de #4935) — évite les erreurs JS dans les environnements où les custom elements ne sont pas disponibles.
• Styles enregistrés en tant qu’adopted stylesheets (#4971) — les styles Fluent UI survivent à la navigation enrichie dans les scénarios Blazor SSR et sont automatiquement réappliqués lorsque la page est morphée par Blazor.

À essayer maintenant

Cette quatrième Release Candidate nous rapproche fortement de la sortie finale de la v5. La surface d’API est désormais considérée comme stable et nous nous concentrons sur les finitions, les corrections et les derniers éléments suivis dans la TODO List dev-v5.

Comme toujours, n’hésitez pas à ouvrir des issues sur GitHub et à contribuer. Un immense merci à toutes les personnes qui ont testé la RC3, signalé des problèmes et soumis des pull requests — un remerciement tout particulier aux contributeurs de la communauté comme @MarvinKlein1508, @aclerbois et @vnbaaij pour leur implication continue.

Happy Blazoring!