What’s new in the Microsoft Fluent UI library for Blazor version 1.6
Extended .NET support
We’ve updated the project to not only compile with the latest version of .NET 6 but also with the new .NET 7 (generally available as of today!). If you would examine the NuGet package, you’ll see that as of this version there are two DLL’s available:
Depending on the Framework version you choose when creating a new project, the correct version of the Fluent UI library will automatically be chosen when you add this package to your project.
There is unfortunately no good way yet to use version specific code in .razor
files (like you can in C# with #if preprocessor directives). This means we are not using any of the specific new Blazor functionality like @bind:after
at the moment. We are working with the ASP.NET team to see how a better experience can be offered for this moving forward.
Icon updates
We’ve updated the Fluent UI System Icons to the latest available version (1.1.186). A lot of new icons have been added and updated since the 1.5.3 release of our library.
To make it easier to use the FluentIcon
component in your own application, you can now get a ready-to-paste component declaration from the demo environment. It works like this:
- Go to https://aka.ms/fluentui-blazor/Icon
- Type a search term, select a size and select whether you want filled and/or regular variants and click on ‘Search’. For example:
- In the results, click on the icon card you want to get a component declaration for which you can paste in you own
.razor
file. You will get a notification of the copy action:
- Now, where you want to use this icon, paste from the clipboard. In this example it will insert
<FluentIcon Name="@FluentIcons.Washer" Size="IconSize.Size32" Filled=true />
. Of course, you can edit/change this to your specific needs after pasting.
We hope this makes it a bit easier to choose from the set of over 12.5k available icons. Oh, and if you clone this repository and would like to know how you can update to later releases of the Fluent UI System Icons yourself, we’ve added instructions on how to do that in the ‘Update Icons.md’ file which you can find in the root of the repository
AOT compilation fix
Having all these icons available in an easy-to-use format, means you need to have some sort of structure in your code that is read and exposed to the developers at run time. This is done by a source generator which spits out a huge List
. This however did not play nice with AOT compilation (see Ahead Of Time in the docs). The dotnet publish
command would just error out.
Investigation led us to this List as being the culprit of the error. In this release the structure has been changed to use a fixed-size array and with that we could successfully use AOT compilation again.
Other changes
Since our last minor release (1.5.0), we’ve done some bug fixing. We also made some other more noteworthy changes. Most notably, a lot of work has been put into the demo site and the component documentation. To sum these up:
- The design has been tuned to work better on mobile and tablet devices (with a special layout for Surface Duo devices!).
- We added (a lot) more comments to the source code and use this information for displaying the API documentation. With this change that documentation will now always stay up-to-date automatically.
- We added highlight functionality to the code samples and added a copy button to make it easier to re-use a sample in your own project.
- We checked each and every component and enumeration against the FAST and Fluent UI Web Components to make sure all parameters and enums are available and correct.
- We split out every example to a separate file and added more structure to the Pages folder by moving each sample page to its own folder.
Looking ahead
While working on this release, we’ve also been working hard on other things. More specifically, version 2 of this library. Why a new major version you might ask. That’s because we are making some big (and breaking) changes. To name a few:
- Integrating the ASP.NET Team’s QuickGrid. Almost all of its functionality will be available in a Fluent UI design (breaking current
FluentGrid
implementations). - Completely redo
FluentCombobox
,FluentListbox
andFluentSelect
as current implementations do not work well (breaking current implementations of these components).
More will be documented in an upcoming post. We do not have a firm timeline on V2 yet. If you want to try it out right now, a first beta package is available on NuGet. We will release updates to this regularly and make it generally available once we believe it is ready. We can certainly use your help in testing out all the new functionality and reporting issues on where we have not done it completely right yet. Thanks in advance!