How about almost 30 new components! And complete re-implementations of the Icon and Emoji components and logic. And, of course, (some breaking) changes and fixes to the rest of the already existing extensive set of components. Let's dive in, we got a lot to cover.

Breaking changes

We decided to make some API changes for this version. To help to make the transition to this new version a bit easier, we've published an Upgrade Guide on the documentation site.

One of the things we have broken is the FluentDataGrid component. As you may know, this is a QuickGrid in disguise and we have aligned the underlying code even more to the productized version that will ship with .NET 8. Where we previously aligned parameter names to the fluent-datagrid web component, we have now aligned to the QuickGrid naming. This should make integrating/copying QuickGrid examples into your own environment easier and will also make it easier for us to keep the code up-to-date moving forward. The changes in parameter names are:

FluentDataGrid v2FluentDataGrid v3
RowsDataItems
RowsDataProviderItemsProvider
RowsDataSizeItemSize
RowsDataKeyItemKey

Another breaking change is found in the Align enumeration. Where we previously used the values Left and Right, these have now been changed to Start and End. This to make working with those easier/more consistent in an RTL-based application.

FluentBadge now uses a Color \ BackgroundColor combination to determine the fill values.

FluentCalendar no longer wraps the fluent-calendar web component. It's functionality was too limited. Not all parameters are supported in the updated version.

StackHorizontalAlignment/StackVerticalAlignment have been renamed to just HorizontalAlignment/VerticalAlignment as there are now more components using these enumarations.

We've completely re-built the Icon en Emoji components and logic. If you are using either of those in your application, every occurrence will need to be changed. See further below for more information.

 

Base component changes

We lifted the Id parameter up from FluentInputBase to FluentComponentBase. This means every derived component (which are almost all of them) now exposes an Id parameter. To not pollute the rendered HTML too much, we are not always automatically generating a value for the the id. We only do that for cases where it is needed or makes sense. For cases where you were previously adding a native id attribute to components, you can now replace those with an Id parameter. Another change in FluentComponentBase is the renaming of the BackReference parameter to the more appropriate ParentReference. We also added a Data parameter (of type object) to the base component. You can use this to attach any kind of data to a component.

All FluentInputBase derived components now support an Immediate (parameter) mode. Where previously you would need to implement a sort of copy of a component to get oninput behavior, this can now be switched on with this simple boolean parameter.

Re-implementation of Icon and Emoji

The Icon and Emoji components and logic have been completely re-written. The previous setup with a <ProjectGroup> in the project file and generated configuration classes worked well, but was cumbersome at the same time. Not to mention that the library's core project file was growing very large and slowed down builds.

For the new components we decided to decouple the assets from the library package and provide additional separate packages for both the icon and emoji resources. The components, and icons that are used by the library itself, are still part of the package. Adding the icons or emojis packages is enough to make the resources available to your code.

We use the framework's trimming capabilities to slim down what resources get published. Usually this leave just some very small DLL's that only contain the resources that are actually being used in your application.

We still have support for both the complete Fluent UI System Icons and the Fluent Emoji libraries.

Getting Started

To use the Fluent UI System Icons in your application, you will need to install the Fluent Icons NuGet package in the project you want to use the icons. To use the Fluent UI Emoji in your application, you need to install the Fluent Emoji NuGet package.

FluentIcon component

To use the icons, you add a FluentIcon component in your code like this:

<FluentIcon Icon="Icons.Regular.Size24.Save" />

Note: Icon names are structured like this: Icons.[IconVariant].[IconSize].[IconName]

Following this structure in combination with Visual Studio's IntelliSense makes it easier to find the icon you need.

There are several other ways of using the FluentIcon component with the Icon class:

  • Using an icon instance. 
    <FluentIcon Value="@(new Icons.Regular.Size24.Save())" />
  • Using the Icon.FromImageUrl method to use your ow images as icons. 
    <FluentIcon Value="@(Icon.FromImageUrl("/Blazor.png"))" />
  • Using the ToMarkup method. This generates the SVG code without using the FluentIcon features.

Breaking change: The component's (previous) Name, Size and Variant parameters are no longer used.

Each and every example in the demo site has been updated to use this new component.

FluentEmoji component

To use the emoji, you add a FleuntEmoji component in your code like this:

<FluentSystemEmoji Emoji="Emojis.PeopleBody.Color.Default.Artist" />

Note: Names are structured like this: Emojis.[EmojiGroup].[EmojiStyle].[EmojiSkintone].[EmojiName]

Breaking change: The component's (previous) Name, Group, Style and Skintone parameters are no longer used.

All emoji examples in the demo site have been updated.

New components

In version 2 we introduced the 'Incubation Lab' as a test bed and playground for experimenting with new components. We've received a number of great contributions in the form of issues, discussions and pull request with fixes and additions. Thanks in part to these, we are happy to report most of these components have now been promoted and are now part of the library! The components can be divided in 2 groups: layout components and UI components:

Layout components

We now offer the following components to assist developers in building (page) layouts (each item links to the component's page in the demo site):

UI components

The following UI components have been added (each item links to the component's page in the demo site):

*) We have changed the FluentCalendar component to use our own implementation instead of wrapping the fluent-calendar web component as it's functionality was too limitted.

**) See below for more information

Still in the lab

There a 2 components that have not been promoted and are kept in the lab, namely the TableOfContents and the MarkdownSection components. For the TableOfContents component the reason is that integrating it in a site cannot be done with just installing the package. There is a bit of configuration needed in several parts of a site. We have described the needed steps on the documentation site.

For the MarkdownSection to work, we need a dependency on the excellent Markdig package. We do not want to force that dependency on our library users, so copying and using the component in your own app stays a deliberate choice from your side.

Dialogs and Toasts

DialogService

The DialogService is a service that is used to show dialogs, message boxes, panels and splash screens. The service can be injected into any page. Four dialog types are included to be hosted by the service out of the box. These are:

The links above show examples on how to use the DialogService, the dialog types. 

It is also possible to use custom content in a dialog. For this, you can create a component that implements the IDialogContentComponent<TContent> interface where TContent represents the type of content to be shown in the dialog. The demo site shows an example of this in the DialogService with EventCallback example.

The DialogService is automatically registered in the DI container within the AddFluentUIComponents() call.

ToastService

The ToastService can be injected into any page and is used to show different type of toasts, namely confirmation toast, communication toast, progress toasts and custom toasts.

For a component to be usable in a toast, it needs to implement IToastContentComponent<TContent> where TContent represent the type of content to be shown in the toast.

The ToastService is automatically registered in the DI container with the AddFluentUIComponents() call.

See the toast page for examples on how to use the ToastService and the different types of available toasts :

  • Confirmation toast
  • Communication toast
  • Progress toast

Many more changes and additions

There are many, many more changes and additions made throughout the library. To not make the post too long, we have not mentioned all of them here. We do think we captured all of them in the examples in the demo site.

Looking ahead

As part of the process of becoming independent from the FAST team and being closer aligned to the ASP.NET Core Blazor team, we will be doing a full rename of the library and the associated NuGet packages for the next major (v4) version. The new core library name will become:

Microsoft.FluentUI.AspNetCore.Components.

The Microsoft and FluentUI parts speak for themselves, we think. By adopting the AspNetCore.Components part, we will be in line with the standard ASP.NET Core Blazor component naming scheme. With using this base naming scheme, we also leave room for other possible future Fluent UI implementations that might get distributed by means of NuGet Packages. Think for example about implementations for WPF, WinForms, Avalonia, Uno, etc. We do not have knowledge of any plans/development/upcoming releases of any of these.

The v4 version will only support .NET 8 and up. We decided on that choice to be able to fully support and utilize new functionality and capabilities that have been introduced since .NET 6.0. Things we already have in mind: support for @bind:after, support full stack Blazor, support Sections and many more. If you are still using .NET 6 or 7 at the time this new version will be released, the v3 version of the library will still be available.

Comments


Comments are closed