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. In short everything added/changed in version 1.5: 

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

And some more 'under the hood' changes

• Example of inheriting a component to bind to oninput event
• Change enum names to match Web Components 
• Use FluentIcon instead of SVGs in example pages
• Support for more event handling
• Support for more bindings
• Other changes

New component: <FluentSearch>

A new addition to the Fluent UI Web Components is the Search component. 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 Calendar component. 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.

Below changes and additions 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 component 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 and we have re-implemented most of the enums. 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:

Component	Event name	Arguments
<FluentTabs>	OnTabChange	TabChangeEventArgs
<FluentTreeView>	OnSelectedChange	TreeChangeEventArgs
<FluentTreeView>	OnExpandedChange	TreeChangeEventArgs
<FluentCalendar>	OnDateSelected	CalendarSelectEventArgs
<FluentAccordion>*	OnAccordionItemChange	AccordionChangeEventArgs
<FluentDialog>	ondismiss	-
<FluentTooltip>	ondismiss	-
<FluentMenu>	onmenuchange	-
<FluentHorizontalScroll>	onscrollstart	HorizontalScrollEventArgs
<FluentHorizontalScroll>	onscrollend	HorizontalScrollEventArgs
<FluentDataGridRow>	OnRowFocus	DataGridRowFocusedEventArgs

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.

An example of this kind of event handling:

<FluentTreeView OnExpandedChange="HandleOnExpandedChanged">
    <FluentTreeItem Text="Root item 1">
        <FluentTreeItem Text="Flowers">
            <FluentTreeItem Disabled="true" Text="Daisy" />
            <FluentTreeItem Text="Sunflower" />
            <FluentTreeItem Text="Rose" />
        </FluentTreeItem>
        <FluentTreeItem Text="Nested item 2" />
        <FluentTreeItem Text="Nested item 3" />
    </FluentTreeItem>
    <FluentTreeItem Text="Root item 2" >
        <FluentDivider></FluentDivider>
        <FluentTreeItem Text="Flowers">
             <FluentTreeItem Disabled="true" Text="Daisy" />
            <FluentTreeItem Text="Sunflower" />
            <FluentTreeItem Text="Rose" />
        </FluentTreeItem>
        <FluentTreeItem Text="Nested item 2" />
        <FluentTreeItem Text="Nested item 3" />
    </FluentTreeItem>
    <FluentTreeItem Text="Root item 3 - Leaf Erikson" />
</FluentTreeView>
 
<p>Current expanded/collapsed tree item is @currentAffected?.Text</p>

@code {
    FluentTreeItem? currentAffected;
    
    private void HandleOnExpandedChanged(FluentTreeItem item)
    {
        currentAffected = item;
    }
}

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<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 web components script.

An example of a binding with the FluentCalendar component:

<h2>Selected dates</h2>
<p>
    <FluentCalendar DisabledDates=@disabledDates @bind-SelectedDates =@selectedDates></FluentCalendar>
</p>
<p>Dates Selected:</p>
<ul>
@foreach(DateOnly date in selectedDates)
{
    <li>@date.ToString("yyyy-MM-dd")</li>
}
</ul>
 
@code {
    static int currentYear = DateTime.Now.Year;
    static int currentMonth = DateTime.Now.Month;
 
    static int daysInMonth = DateTime.DaysInMonth(currentYear, currentMonth) + 1;
    static Random random = new();
 
    List<DateOnly> disabledDates = new();
    List<DateOnly> selectedDates = new();
 
    protected override void OnInitialized()
    {
        for (int i = 0; i < 3; i++)
        {
            disabledDates.Add(new DateOnly(currentYear, currentMonth, random.Next(1, daysInMonth)));
            selectedDates.Add(new DateOnly(currentYear, currentMonth, random.Next(1, daysInMonth)));
        };
    }
}

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 of ActiveIndicator parameter on <FluentTabs>
• Add DisabledSelectable parameter to <FluentCalendar> (defaults to true)
• Add 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 let you know of course when those will be released.