What's new for the Microsoft Fluent UI Blazor libraries 3.6 and 4.5

We have new releases! Version 3.6 for .NET 6 and 7 and version 4.6 for .NET 8 are here. Happy to report that a huge number of issues has been fixed for both versions (both by us and by contributors). Let's dive into the details...

New: AppBar component (4.5 only)

Based on the work done by the .NET Aspire team (this library powers the .NET Aspire Dashboard!) a new FluentAppBar component has been added. The AppBar shows AppBarItems in a vertical fashion just like the one you'll find in Teams and the (new) Outlook. It automatically shows '...' in the bottom when the number of applications is larger then the available vertical space. You can control whether that popover shows a search bar or not.

Changes, updates and additions that apply to both versions

We are not listing all the changes in this post but just the most prominent ones. To see the full list  changes, we have GitHub release pages:

• version 3.6
• version 4.5

 

Demo site: Search for components

With almost 70 components in the library, it can sometimes get a bit hard to find the right documentation and example page. To help you navigate the site, we've added a component search function to the header (in desktop view only).

Grid: Spacing and margins

The FluentGrid became wider when the value for the Spacing parameter was increased. This has been fixed.

Before:

After:

Menu and Popover: Add Threshold parameters

Both the Menu and Popover component internally use the AnchoredRegion component to 'attach' their output to antoher element. The AnchoredRegion component exposes the VerticalThershold and HorizontalThreshold parameters to set the minimum space needed to render the attachment in the preferred location. This allows to create an automatic 'reflow' in case there is not enough space available. The video below shows a Popover which is displayed below a button. It automatically switches to be shown above the button if it doesn't fit anymore when resizing the window. In the 'before' situation, it would remain in the smae location and would get cutoff on resizing.

With this change it is now possible to set the thresholds for both the Menu and Popover components. See the video below for the effect.

DataGrid: Add a Filtered property and visual indicator to PropertyColumn

When using multiple filters in a DataGrid, it was not easy to see if a filter was applied for a specific column. A FilterDismiss icon will now be shown when a filter is being applied on a column.

MenuButton: Added overlay and more appearance options

• A FluentOverlay has been added so clicking outside the menu closes it
• A ButtonAppearance parameter has been added to make changing the button appearance possible

Example have been added to the demo site to show this. Example of the overlay being used:

Card: Add a MinimalStyle parameter

By default the FluentCard component is a visual container and design system provider. Cards are snapshots of content that are typically used in a group to present collections of related information. Thus, by design, the FluentCard component includes all the styles required for a good representation of the other components included in it. This adds a large number of styles such as justify-content; align-items; gap; width; and over 80 other CSS variables. The amount of code generated can become quite important, especially if you use this component a lot of times, for example in a large list.

To prevent this, you can now use the MinimalStyle parameter. This will remove all the default styles from the FluentCard component. and apply a currated set of styles throug an isolated CSS. This will allow you to use the FluentCard component as a simple container with only the styles needed to draw the box-shadow (and some other required style rules).

Example usage

<FluentCard MinimalStyle="true">
    <p>Just some content in a card (with a button that does not do anything).</p>

    <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
    <p>No Width or Height has been specified.</p>
</FluentCard>

Code generated

<div class="fluent-card-minimal-style">
  <p>Just some content in a card (with a button that does not do anything).</p>
  <fluent-button type="button" appearance="accent" class="accent">Hello</fluent-button>
  <p>No Width or Height has been specified.</p>
</div>

Default FluentCard code generated

Tooltip: Additional behavior added

[FluentTooltip] Add the HideTooltipOnCursorLeave property

We have added a HideTooltipOnCursorLeave parameter to the FluentTooltip component. You can now choose to use the default behavior:

Or use a new behavior:

The behavior can also be set through the global configuration:

builder.Services.AddFluentUIComponents(configuration =>
{
    configuration.HideTooltipOnCursorLeave = true;
});

Icons: updated to Fluent UI System Icons v1.1.230

What's new (Name / Size(s) / Variant(s))

• Checkmark Circle Warning / 16, 20, 24 / Filled & Regular
• Cloud Arrow Right / 16, 20, 24 / Filled & Regular
• Document Arrow Down / 24 / Filled & Regular
• Document Signature / 16, 20, 24, 28, 32, 48 / Filled & Regular
• Home Garage / 20, 24 / Filled & Regular
• Image Split / 20, 24 / Filled & Regular
• Laptop / 48 / Filled & Regular
• Line Flow Diagonal Up Right / 16, 20, 24, 32 / Filled & Regular
• Mail Arrow Clockwise / 16, 20, 24 / Filled & Regular
• Person Passkey / 16, 20, 24, 28, 32, 48 / Filled & Regular
• Person Prohibited / 32 / Filled & Regular
• Person Ribbon / 24 / Filled & Regular
• Plant Cattail / 20, 24 / Filled & Regular
• Storage / 16, 28, 32, 48 / Filled & Regular
• Video Clip Wand / 16, 20, 24 / Filled & Regular
• Window Fingerprint / 16, 20, 24, 28, 32, 48 / Filled & Regular

What's updated (Name / Size(s) / Variant(s))

• Video Add / 20, 24 / Filled & Regular

No release notes were made available for the versions between 1.1.226 and this one

Special thanks to @StevenRasmussen, @lus, @bruno-garcia, @CV-souryu, @Hona, @digitaldirk, @c0g1t8, @thebarrettlo, @weskroesbergen, @joriverm and @NickHirras for their contributions!