What’s new in the Microsoft Fluent UI library for Blazor version 1.5

We have a nice set of changes and additions for this summer edition of the Fluent UI component library for Blazor. Not just new components, but also support for more event handling, support for more bindings, new and updated icons, and changes in the demo environment. Here is everything we added or changed in version 1.5:

• New component: FluentSearch
• New component: FluentCalendar
• New and updated icons

And some more ‘under the hood’ changes:

• Added an example showing inheriting to bind to the oninput event
• Changed enum names to match Web Components names
• Used FluentIcon instead of SVGs in example pages
• Added support for more event handling
• Added support for more bindings
• Other changes

New component: FluentSearch

A new addition to the Fluent UI Web Components is the FluentSearchcomponent (example here). Of course we’ve brought this over to the Blazor component set as well. It looks like this:

New component: FluentCalendar

Another addition to the Web Components is the FluentCalendar component (example here). It has been added to the Blazor set and will, in the future, be used as part of a date picker component. It looks like this:

Note: At the moment there is still a bug in the display of the calendar when the week has a start day other than Sunday (as can be seen above). This will be fixed in a later update.

The changes and additions described below are a bit more low-level and more for developers than for end-users of the library.

New and updated icons

The FluentIcon component uses the Fluent UI System Icons collection. We have updated and imported all the icons from version 1.1.176.

Example of inheriting to bind to oninput event

All the Input related components, like FluentTextField, FluentTextArea and FluentNumberField are set up to do binding on the onchange event. In most situations this is fine but sometimes you might need a binding to occur within an oninput event. This is possible by inheriting the component in question and changing/adding some of the parameters in the .razor file. An example of this is now provided in the FluentNumberFieldOnInput.razor file in the examples/FluentUI.Demo.Shared/Shared/ folder.

Change enum names to match Web Components

There have been some massive improvements to the FAST documentation. This makes a lot of information much more discoverable. Because of this we wanted to make some changes on the Blazor side as well so we have re-implemented most of the enum types. Initially we added these with very generic names like Direction and Orientation. Based on these new docs, we concluded that these should have names much more related to the components they are being used in (i.e. FlipperDirection and TabsOrientation). We have updated all the enumerations concerned and marked all the old ones as obsolete. These 'wrong' enums will be removed in a later version of the library.

Use FluentIcon instead of SVGs in example pages

A lot of the examples in the demo sites were still using plain inline SVGs when showing an icon. These have all been changed to use the (recently introduced) FluentIcon component.

Support for more event handling

The new docs also showed that there are events available on components which we were not yet handling on the Blazor side. Examples of these are change events on the Accordion and Tabs components. The complete list of Blazor components with new event handling are:

All of the ...EventArgs above, besides the HorizontalScrollEventArgs, are coded in a way that they contain the actual affected component as a parameter. This means you can call any method or work with any parameter the component supports in the event handling code.

Here’s an example of this kind of event handling:

More examples of event handling can be found in the Pages folder under examples/FluentUI.Demo.Shared/ folder

Support for more bindings

We have also added support for some more bindings:

• FluentTabs : Bind the ActiveId parameter to the id of the active tab
• FluentTreeView : Bind the CurrentSelected parameter to the currently selected tree item
• FluentCalendar : Bind the SelectedDates parameter to the List of DateOnly of selected dates
• FluentAccordion* : Bind the ActiveId parameter to the id of the active accordion item

* not fully implemented yet. We are waiting for the necessary changes in the underlying web components implementation.

Here’s an example of a binding with the FluentCalendar component:

More examples of the bindings can be found in the Pages folder under examples/FluentUI.Demo.Shared/ folder.

Other changes

Some other (smaller) changes we have made to the library are:

• Added Disabled and Text parameters to FluentTab
• Added Heading parameter to FluentAccordionItem
• AddedTextparameter to FluentTreeItem
• Fixed working the ActiveIndicator parameter on FluentTabs
• Added DisabledSelectable parameter to FluentCalendar (defaults to true)
• Added OutOfMonthSelectable parameter to FluentCalendar (defaults to true)

What’s next?

We are already thinking about what we could add, change and update in the next couple of releases. Please chime in with your own ideas on our GitHub Discussions or Discord channel. For sure, a (major) new release will arrive after we have updated our Blazor wrappers to the upcoming Fluent UI Web Components v3 release (no firm dates yet). We are also hard at work on improving the documentation. We are going through each and every component and if we find things like parameters or events that are present in the Web Components or underlying FAST Foundation but missing on the Blazor side, we will add them of course. This will most likely be done with minor version releases like 1.5.1, 1.5.2, etc. We will continue to keep you up to date as these versions ship.

---