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.
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:
Another breaking change is found in the
Align enumeration. Where we previously used the values
Right, these have now been changed to
End. This to make working with those easier/more consistent in an RTL-based application.
FluentBadge now uses a
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.
StackVerticalAlignment have been renamed to just
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
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.
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
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.
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.
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:
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
- Using an icon instance.
<FluentIcon Value="@(new Icons.Regular.Size24.Save())" />
- Using the
Icon.FromImageUrlmethod to use your ow images as icons.
<FluentIcon Value="@(Icon.FromImageUrl("/Blazor.png"))" />
- Using the
ToMarkupmethod. This generates the SVG code without using the
Breaking change: The component's (previous)
Variant parameters are no longer used.
Each and every example in the demo site has been updated to use this new 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:
Breaking change: The component's (previous)
Skintone parameters are no longer used.
All emoji examples in the demo site have been updated.
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:
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):
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.
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
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
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
TContent represent the type of content to be shown in the toast.
The ToastService is automatically registered in the DI container with the
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.
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:
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.