In this post I'll give an overview of what's new and changed in version 1.2.0 of the Microsoft FluentUI for Blazor package. Both from an end-user as from a potential contributor/code aficionado perspective. In short, the end-user changes and additions:

  • Project templates 
  • Generic FluentSelect, FluentListbox and FluentCombobox Repository and code changes
  • Bug fixes

And the repository and code changes:

  • Use lastest .NET 6 packages
  • Codespaces support
  • .NET 6 / C# 10 changes

Project templates

Technically this is not a feature of the 1.2.0 version but it has been released in tandem. We are pleased to announce a new addition to the Microsoft Fast FluentUI Blazor Family! And we named it Microsoft.Fast.Templates.FluentUI. The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps that mimic the out-of-the-box Blazor templates but have the FluentUI components already set up.

Once you've dowloaded the package from NuGet, you install it by using the standard dotnet commandline tool and the following command:

dotnet new -i {path to package}

After installing the templates you can create a new project from either the CLI or by creating a new project in Visual studio 2022. For creating a project form the CLI you run the following command (in the folder of your choice):

dotnet new fluentuiblazorserver -o {your project name} 

Or

dotnet new fluentuiblazorwebassembly -o {your project name} 

In Visual Studio you can create a new project by selecting the FluentUI Blazor Server App or FluentUI Blazor WebAssembly App template in the 'File->New->Project'-dialog. It looks like this:

The templates create a copy of the standard Blazor templates but with the FluentUI package already set up and with all the Bootstrap styling removed. All components that have a corresponding FluentUI counterpart have been replaced by those. The pages you get after creating a project with the Blazor Server template will look like this:

 result from using the Blazor Server template

Generic FluentSelect, FluentListbox and FluentCombobox

In the previous versions the FluentSelect, FluentListbox and FluentCombobox components where only bindable to string values. With this version the have been made generic so now you can bind to any type you want. I also added functionality to make the components get their <FluentOption> items from a generic Option list. This means you can now do things like this:

<h2>From list of string items</h2>
<FluentSelect Items=@options  />

<h2>From list of int items</h2>
<FluentSelect Items=@options2 />

@code{
    List<Option<string>> options = new()
    {
            { new Option<string> { Key = "1", Value = "One" }},
            { new Option<string> { Key = "2", Value = "Two", Selected = true }},
            { new Option<string> { Key = "3", Value = "Three" }}
    };

    List<Option<int>> options2 = new()
    {
            { new Option<int> { Key = 1, Value = 1, Disabled = true }},
            { new Option<int> { Key = 2, Value = 2 }},
            { new Option<int> { Key = 3, Value = 3 }}
    };
}

You can see that the Type for the <FluentSelect> components does not have to be specified. It is automatically being inffered from the Type parameter of the Option list

Bux fixes

The following issues have been fixedin this release:

  • FluentDataGridCell AdditionalAttributes doesn't actually implement addtional attribute(s) (#149)
  • Design system accent-base-color not fit accent-fill-rest (#144)

Repository and code changes

We have made some changes to the repository and the source code that are not that interesting for an end-user but might be for a potential contributor and other code aficinadios.

Use latest .NET 6 packages

The projects have been changed so that they always reference the latest available .NET 6 packages.

Codespaces support

Support for codespaces has been added so you can:

  • Make edits to the project's source code.
  • Build and run directly from the cloud and test changes.

Also some common tasks have been added to the tasks.json file. Press Ctrl+Shift+P and choose a run task to run any of the tasks directly from VSCode. The following tasks have been added:

  • Build library - Builds the library
  • Run samples - Prompts to choose sample (Server/Client) and based on the selection the sample will be run.

.NET 6 / C# 10 changes

All source code has been changed to use the new C# 10 namespace declaration style (file scoped namespaces). The projects have been changed to enable Implicit usings. and all unused usings have been removed. As a last "modernization" step, we moved all code from .razor files to .razor.cs files to have a clear separation between the markup and the code, make it easier to add comments, etc.

That's it for this release. Hope this helps!

Comments


Comments are closed