Microsoft Fluent UI Blazor

To use the newest (potentially unstable) versions of Fluent UI Blazor, you must add a special NuGet feed. These builds are published to this feed whenever a commit is pushed to the main or dev branches.

Warning: These packages are preliminary versions and are not intended for production use. They are intended for testing the latest features and bug fixes.

Note: Although the feed name is dotnet9, the packages contain .NET 8 DLLs and can be used in projects targeting .NET 8.

dotnet nuget add source --name dotnet9 https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json

To enable features like Toasts, Dialogs, Tooltips, and Message Bars, you must add the corresponding provider components to the end of your MainLayout.razor file. You can omit any providers you do not intend to use.

<FluentToastProvider />
<FluentDialogProvider />
<FluentTooltipProvider />
<FluentMessageBarProvider />
<FluentMenuProvider />

Organize your test logic into three distinct phases to separate setup from execution and verification:

• Arrange: Set up the objects and necessary state.
• Act: Execute the specific method or action being tested.
• Assert: Verify that the outcome matches the expected result.

This pattern prevents intermixing assertions with execution code and improves readability.

[Fact]
public void Add_EmptyString_ReturnsZero()
{
   // Arrange
   var stringCalculator = new StringCalculator();

   // Act
   var actual = stringCalculator.Add("");

   // Assert
   Assert.Equal(0, actual);
}

The OData adapter allows you to pass DataServiceQuery properties directly to the Items parameter of a FluentDataGrid. The grid recognizes these IQueryable instances and resolves queries asynchronously for efficiency. You can also apply LINQ operators (like .Where()) supported by DataServiceQuery to filter data before passing it to the grid.

@inject DataServiceContext MyServiceContext

<FluentDataGrid Items="@MyServiceContext.People">
    ...
</FluentDataGrid>

@* Example with LINQ filtering *@
<FluentDataGrid Items="@MyServiceContext.Documents.Where(d => d.CategoryId == currentCategoryId)">
    ...
</FluentDataGrid>

The FluentUI Blazor project utilizes a Verify method to implement snapshot testing. This method generates a .received.html file representing the current component output, which is then compared against a predefined .verified.html file. This is useful for testing complex HTML structures that are difficult to assert using standard string matching.

<!-- Example of a .verified.html file used for comparison -->
<div class="stack-horizontal">
    <div class="my-toolbar">
        <fluent-button appearance="neutral">Button 1</fluent-button>
        <fluent-button appearance="neutral">Button 2</fluent-button>
    </div>
</div>

To ensure test intent is explicit, name your tests using a three-part structure:

1. The name of the method being tested.
2. The scenario being tested.
3. The expected behavior.

Example: Add_SingleNumber_ReturnsSameNumber

[Fact]
public void Add_SingleNumber_ReturnsSameNumber()

When submitting a pull request (PR), follow these requirements:

1. Rebase your branch: Always rebase your branch from master. Do not use git merge or the GitHub merge button.
2. PR Naming Convention: Use the format [component name] Description (no period at the end).
   • Omit the word "Fluent" from the component name.
   • Do not include issue numbers in the title.
3. Linking Issues: To automatically close an issue when the PR is merged, use the fix #issuenumber syntax in the description.
4. Documentation/Visuals: For UI changes, include before and after screenshots in the PR description to provide context.

To use emojis, first add the following using statement to your _Imports.razor file to create a namespace alias:

@using Emoji = Microsoft.FluentUI.AspNetCore.Components.Emoji;

Then, use the <FluentSystemEmoji /> component in your Blazor components. The emoji selection follows a specific naming hierarchy: Emojis.[EmojiGroup].[EmojiStyle].[EmojiSkintone].[EmojiName].

<FluentSystemEmoji Emoji="@(Emojis.PeopleBody.Color.Default.Artist)" />

The Reboot stylesheet provides a consistent CSS baseline for Fluent UI Blazor components. To use it, add the link to the <head> section of your App.razor, index.html, or _Layout.cshtml.

Note: If your site is hosted at a different base path, you may need to remove the leading / from the href.

<link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />

To use Fluent UI Emojis in your Blazor application, install the Microsoft.FluentUI.AspNetCore.Components.Emoji NuGet package using the dotnet CLI.

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji