What's new for the Microsoft Fluent UI Blazor library version 3.0.0
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 v2 | FluentDataGrid v3 |
---|---|
RowsData | Items |
RowsDataProvider | ItemsProvider |
RowsDataSize | ItemSize |
RowsDataKey | ItemKey |
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 theFluentIcon
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):
- CounterBadge
- PresenceBadge
- Calendar*
- CodeEditor
- DatePicker
- Dialog**
- DragDrop
- Highlighter
- InputFile
- Label
- MessageBox**
- NavMenu
- Overflow
- Overlay
- Panel**
- Popover
- SplashScreen**
- TimePicker
- Toast**
*) 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