diff --git a/README.md b/README.md index 9475d47049..d88654d985 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Microsoft Fluent UI Blazor components +# Microsoft Fluent UI Blazor library [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![.NET C#](https://img.shields.io/badge/.NET-C%23-blue)](https://docs.microsoft.com/en-us/dotnet/csharp/) @@ -14,7 +14,7 @@ This package is for use in .NET 8 and 9 Blazor projects. If you are using **now ## Introduction -The `Microsoft.FluentUI.AspNetCore` family of packages provides a set of [Blazor](https://blazor.net) components, tools and utilities which are used to build applications that have a Fluent design (i.e. have the look and feel of modern Microsoft applications). +The `Microsoft.FluentUI.AspNetCore` family of packages provides a set of Razor components for [Blazor](https://blazor.net) applications, tools and utilities which are used to build applications that have a Fluent design (i.e. have the look and feel of modern Microsoft applications). Some of the components in the library are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent. To get up and running with the library, see the **Getting Started** section below. @@ -120,7 +120,7 @@ We have additional packages available that include the complete Fluent UI System Please refer to the [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information. ## Usage -With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. +With the package installed, you can begin using the Fluent UI Blazor library components in the same way as any other Razor component. ### Add Imports @@ -131,7 +131,7 @@ After the package is added, you need to add the following in your `_Imports.raz ``` ### Quick Start -This is literally all you need in your views to use Fluent UI Blazor components. +This is literally all you need in your views to use Fluent UI Blazor library in your application. ```xml @@ -141,7 +141,7 @@ This is literally all you need in your views to use Fluent UI Blazor components. ``` ## Configuring the Design System -The Fluent UI Blazor components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically +The Fluent UI Razor components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "design tokens". The library exposes all design tokens, which you can use both from code as in a declarative way in your `.razor` pages. The different ways of working with design tokens are described in the [design tokens](https://www.fluentui-blazor.net/DesignTokens) page. ## Blazor Hybrid @@ -171,7 +171,7 @@ Please see the [DataGrid](https://www.fluentui-blazor.net/DataGrid) page for mor ## Additional resources -* The Microsoft Fluent UI Blazor components [documentation and demo site](https://www.fluentui-blazor.net) +* The Microsoft Fluent UI Blazor library [documentation and demo site](https://www.fluentui-blazor.net) ## Support The Microsoft Fluent UI Blazor library is an open source project and is **not** an official part of ASP.NET Core, which means it’s **not** officially diff --git a/examples/Demo/Client/wwwroot/index.html b/examples/Demo/Client/wwwroot/index.html index 85ae414d1c..594be4c1ed 100644 --- a/examples/Demo/Client/wwwroot/index.html +++ b/examples/Demo/Client/wwwroot/index.html @@ -4,7 +4,7 @@ - + Fluent UI Blazor Documentation & Demo site diff --git a/examples/Demo/Server/Pages/_Layout.cshtml b/examples/Demo/Server/Pages/_Layout.cshtml index 4fa4256a74..b22bbd51de 100644 --- a/examples/Demo/Server/Pages/_Layout.cshtml +++ b/examples/Demo/Server/Pages/_Layout.cshtml @@ -7,7 +7,7 @@ - + Fluent UI Blazor Demo site diff --git a/examples/Demo/Shared/App.razor.cs b/examples/Demo/Shared/App.razor.cs index 1ebc425405..e1881e30e1 100644 --- a/examples/Demo/Shared/App.razor.cs +++ b/examples/Demo/Shared/App.razor.cs @@ -1,9 +1,13 @@ +// ------------------------------------------------------------------------ +// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. +// ------------------------------------------------------------------------ + namespace FluentUI.Demo.Shared; public partial class App { public static string PageTitle(string page) { - return $"{page} - FluentUI Blazor Components"; + return $"{page} - Fluent UI Blazor library"; } public const string MESSAGES_NOTIFICATION_CENTER = "NOTIFICATION_CENTER"; diff --git a/examples/Demo/Shared/Pages/Design/DesignThemePage.razor b/examples/Demo/Shared/Pages/Design/DesignThemePage.razor index 555fb70204..50410279df 100644 --- a/examples/Demo/Shared/Pages/Design/DesignThemePage.razor +++ b/examples/Demo/Shared/Pages/Design/DesignThemePage.razor @@ -163,7 +163,7 @@

Technically, this loading-theme component adds a hidden-body class (visibility: hidden; background-color: #272727;) to the body tag during the loading time - of all FluentUI Blazor components. + of all FluentUI components. Once they are integrated into the browser, this class is removed and the content is displayed.

diff --git a/examples/Demo/Shared/Pages/FluentComponentBasePage.razor b/examples/Demo/Shared/Pages/FluentComponentBasePage.razor index 101251d766..e22a3eebe5 100644 --- a/examples/Demo/Shared/Pages/FluentComponentBasePage.razor +++ b/examples/Demo/Shared/Pages/FluentComponentBasePage.razor @@ -10,7 +10,7 @@

FluentComponentBase

- FluentComponentBase is the abstract base class all other Fluent UI Blazor components inherit from. + FluentComponentBase is the abstract base class all other Fluent UI Razor components inherit from.

You can not create or use a FluentComponentBase on a page or in another component but it adds the following parameters to every derived component.

These parameters are not shown in the component overviews of the derived components pages diff --git a/examples/Demo/Shared/Pages/FluentInputBasePage.razor b/examples/Demo/Shared/Pages/FluentInputBasePage.razor index 7ef6c2bdb4..bbb35a48bd 100644 --- a/examples/Demo/Shared/Pages/FluentInputBasePage.razor +++ b/examples/Demo/Shared/Pages/FluentInputBasePage.razor @@ -5,7 +5,7 @@

FluentInputBase<TValue>

- FluentInputBase<TValue> is the abstract base class all Fluent UI input handling Blazor components inherit from. + FluentInputBase<TValue> is the abstract base class all Fluent UI input handling components inherit from.

You can not create or use a FluentInputBase<TValue> on a page or in another component but it adds diff --git a/examples/Demo/Shared/Pages/FormsOverviewPage.razor b/examples/Demo/Shared/Pages/FormsOverviewPage.razor index 680a204e06..b96d1ef3a3 100644 --- a/examples/Demo/Shared/Pages/FormsOverviewPage.razor +++ b/examples/Demo/Shared/Pages/FormsOverviewPage.razor @@ -105,21 +105,21 @@

Binding

- The Fluent UI Blazor input components all support binding, just like the standard Blazor input components do. See the + The Fluent UI input components all support binding, just like the standard Blazor input components do. See the documentation on the Learn site for more information.

Validation

- The Fluent UI Blazor input components work with validation in the same way the standard Blazor input components do. We provide 2 extra + The Fluent UI input components work with validation in the same way the standard Blazor input components do. We provide 2 extra components to make it possible to show validation messages which follow the Fluent Design guidelines:

See the documentation on the Learn site - for more information on the standard components. As the Fluent UI Blazor components are based on the standard components, the same documentation applies. + for more information on the standard components. As the Fluent UI Razor components are based on the standard components, the same documentation applies.

diff --git a/examples/Demo/Shared/Pages/Home/Home.razor b/examples/Demo/Shared/Pages/Home/Home.razor index 82943236a3..260fdcbffc 100644 --- a/examples/Demo/Shared/Pages/Home/Home.razor +++ b/examples/Demo/Shared/Pages/Home/Home.razor @@ -9,7 +9,7 @@

Welcome!

- The Fluent UI Blazor library provides a robust and extensive set of Blazor components. Some of those + The Fluent UI Blazor library provides a robust and extensive set of Razor components for Blazor applications. Some of those components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or just make it easier to work with Fluent in general.

@@ -69,7 +69,7 @@

Manual setup

- To start using the Fluent UI Blazor components from scratch, you first need to install the main Nuget package + To start using the Fluent UI Blazor library from scratch, you first need to install the main NuGet package in the project you want to use the components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:

dotnet add package Microsoft.FluentUI.AspNetCore.Components @@ -83,7 +83,7 @@

Scripts

- As mentioned, we wrap the Fluent UI Web Components for some of our compnents. The needed script is included in the library and will + As mentioned, we wrap the Fluent UI Web Components for some of our components. The needed script is included in the library and will be loaded for you automatically by using Blazor's built-in capabilities. You do not need to download or pull the script from a CDN manually.

@@ -107,8 +107,8 @@ -

Using the Fluent UI Blazor components

-

With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:

+

Using the Fluent UI Blazor library

+

With the package installed, you can begin using the components from the Fluent UI Blazor library in the same way as any other Razor component. Just be sure to add the following using statement to your views:

@@using Microsoft.FluentUI.AspNetCore.Components @@ -149,7 +149,7 @@

Configuring the Design System

- The Fluent UI Blazor components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while + The Fluent UI Razor components are using FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "Design Tokens".

diff --git a/examples/Demo/Shared/wwwroot/docs/CodeSetup.md b/examples/Demo/Shared/wwwroot/docs/CodeSetup.md index e2516442c9..9bc093c566 100644 --- a/examples/Demo/Shared/wwwroot/docs/CodeSetup.md +++ b/examples/Demo/Shared/wwwroot/docs/CodeSetup.md @@ -23,7 +23,7 @@ dotnet new fluentblazorwasm --name MyApplication When using Visual Studio, you can also use the **New Project** dialog to create a new project. The templates will be available under the **Blazor** category. ### Manual Install -To start using the **Fluent UI Blazor components** from scratch, you first need to install the main [Nuget package](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/) in the project you want to use the library and its components. +To start using the **Fluent UI** library and Razor components from scratch, you first need to install the main [NuGet package](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/) in the project you want to use the library and its components. You can use the NuGet package manager in your IDE or use the following command when using a CLI: ```shell @@ -123,7 +123,7 @@ We have additional packages available that include the complete **Fluent UI Syst Please refer to the [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information. ## Usage -With the package installed, you can begin using the **Fluent UI Blazor components** in the same way as any other Blazor component. +With the package installed, you can begin using the **Fluent UI** Razor components in the same way as any other Razor component. ### Add Imports @@ -134,7 +134,7 @@ After the package is added, you need to add the following in your `_Imports.raz ``` ### Quick Start -This is literally all you need in your views to use Fluent UI Blazor components. +This is literally all you need in your views to use Fluent UI library components in your Blazor application. ```xml @@ -144,7 +144,7 @@ This is literally all you need in your views to use Fluent UI Blazor components. ``` ## Configuring the Design System -The **Fluent UI Blazor** components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically +The **Fluent UI** library components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "design tokens". The library exposes all design tokens, which you can use both from code as in a declarative way in your `.razor` pages. The different ways of working with design tokens are described in the [design tokens](https://www.fluentui-blazor.net/DesignTokens) page. ### For Right-To-Left languages diff --git a/examples/Demo/Shared/wwwroot/docs/DesignTokens.md b/examples/Demo/Shared/wwwroot/docs/DesignTokens.md index 34af0d1e6e..437c2e5a6a 100644 --- a/examples/Demo/Shared/wwwroot/docs/DesignTokens.md +++ b/examples/Demo/Shared/wwwroot/docs/DesignTokens.md @@ -1,6 +1,6 @@ ## Design Token support -The Fluent UI Blazor Components enable design customization and personalization, while automatically maintaining accessibility. This is +The Fluent UI library's components enable design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "Design Tokens". In total there are over 160 distinct design tokens defined in the library and you can use all of these from Blazor, both from C# code as in a declarative way in your `.razor` pages. @@ -9,7 +9,7 @@ information on how Design Tokens are implemented in the web components script. ## Styling web components with Design Tokens -Many of the Fluent UI Blazor components wrap the web components which are designed to be stylistically flexible, allowing dramatic changes to visual design with minimal code changes. This is possible through the extensive use of Design Tokens and an [adaptive color system](#adaptive-color-system). +Many of the Fluent UI library components wrap the web components which are designed to be stylistically flexible, allowing dramatic changes to visual design with minimal code changes. This is possible through the extensive use of Design Tokens and an [adaptive color system](#adaptive-color-system). ### Fluent UI Web Components Design Tokens diff --git a/examples/Demo/Shared/wwwroot/docs/ProjectSetup.md b/examples/Demo/Shared/wwwroot/docs/ProjectSetup.md index a11ebf022b..6816ede314 100644 --- a/examples/Demo/Shared/wwwroot/docs/ProjectSetup.md +++ b/examples/Demo/Shared/wwwroot/docs/ProjectSetup.md @@ -1,6 +1,6 @@ # Setup your project to use Fluent UI Icons and/or Emoji assets -The Fluent UI Icons and Emoji's are available as a separate Nuget package. This is done to keep the size of the main library as small as possible. +The Fluent UI Icons and Emoji's are available as a separate NuGet package. This is done to keep the size of the main library as small as possible. If you do not want to use icons and/or emoji in your project, you do not need to install these packages. >**If you are upgrading from a previous version of the library, please see the [Upgrade Guide](https://www.fluentui-blazor.net/UpgradeGuide) for more information.** @@ -8,7 +8,7 @@ If you do not want to use icons and/or emoji in your project, you do not need to ## Getting Started with icons To start using the **Fluent UI System Icons**, you will need -to install the official [Nuget package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) +to install the official [NuGet package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) in the project you would like to use the library and components. You can use the following command: ```shell @@ -23,7 +23,7 @@ To use the icons, you will need to add the following using statement to your `_I @using Microsoft.Fast.Components.FluentUI ``` -Then you can use the icons in your Blazor components like this: +Then you can use the icons in your Blazor application like this: > **Note:** Names are structured as follows: `Icons.[IconVariant].[IconSize].[IconName]`. @@ -55,7 +55,7 @@ To use the emoji's, you will need to add the following using statement to your ` @using Microsoft.Fast.Components.FluentUI ``` -Then you can use the emoji's in your Blazor components like this: +Then you can use the emoji's in your Blazor application like this: > **Note:** Names are structured as follows: `Emojis.[EmojiGroup].[EmojiStyle].[EmojiSkintone].[EmojiName]`. @@ -69,4 +69,4 @@ Then you can use the emoji's in your Blazor components like this: Please see the [Code Setup](https://www.fluentui-blazor.net/CodeSetup) page to lean more about the neccesary changes to your `Program.cs` file. ## Can I include the library in a Razor Class Library (RCL) project? -Yes, it should work without any changes to your project. \ No newline at end of file +Yes, it should work without any changes to your project. diff --git a/examples/Demo/Shared/wwwroot/docs/Templates.md b/examples/Demo/Shared/wwwroot/docs/Templates.md index 6dfd30fd0e..cc9a26f642 100644 --- a/examples/Demo/Shared/wwwroot/docs/Templates.md +++ b/examples/Demo/Shared/wwwroot/docs/Templates.md @@ -5,7 +5,7 @@ To make it easier to start a project that uses the Fluent UI Web Components for - Fluent .NET Aspire Starter app -All of these templates mimic their standard Blazor template counterpart but have the Fluent UI Blazor components already fully set up. If you choose to add sample pages when creating a project, all components have been replaced with Fluent UI components (and a few extra have been added). All Bootstrap styling is removed of course as well. +All of these templates mimic their standard Blazor template counterpart but have the Fluent UI Blazor library already fully set up. If you choose to add sample pages when creating a project, all components have been replaced with Fluent UI components (and a few extra have been added). All Bootstrap styling is removed of course as well. If you want to use the Icon component with applications based on the templates, we have already included and set up the Icon package for you. The full collection of approximately 12 thousand icons in different variants and sizes can be browsed and searched from the [Icon](https://www.fluentui-blazor.net/Icon) page. diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew-Archive.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew-Archive.md index 375cba507f..56f9facd94 100644 --- a/examples/Demo/Shared/wwwroot/docs/WhatsNew-Archive.md +++ b/examples/Demo/Shared/wwwroot/docs/WhatsNew-Archive.md @@ -1,4 +1,4 @@ -## V3.2.2 +## V3.2.2 - Fix [#859](https://github.com/microsoft/fluentui-blazor/issues/859) and [#884](https://github.com/microsoft/fluentui-blazor/issues/859): Fix NavMenu for real by moving `` tag up in the rendering tree ### Update Fluent UI System icons to 1.1.221 @@ -535,7 +535,7 @@ unpredictable results. > **If you are upgrading from an earlier version please remove the script from your `index.html` or `_Layout.cshtml` file.** -We made this change to make certain you'll always get the version of the script that works best with the Blazor components. It also eliminates the risk of having +We made this change to make certain you'll always get the version of the script that works best with our components. It also eliminates the risk of having multiple versions of the script being used on a page. On top of all this, it also makes installation of the package in your new projects easier. ## Readme and docs updates diff --git a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj index 4068f04ebf..b2d637684d 100644 --- a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj +++ b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj @@ -3,10 +3,10 @@ net8.0;net9.0;net10.0 Microsoft.FluentUI.AspNetCore.Components -

A set of Blazor components wrapping Microsoft’s official Fluent UI Web Components. They implement the latest state of the Fluent design language, are built on FAST and work in every major browser. + A Blazor component library leveraging Microsoft’s Fluent Design System UI. Use the look of modern Microsoft products in your Blazor applications Fluent UI, Blazor, Web Components, .NET8 - Microsoft Fluent UI Web Components for Blazor - A set of Blazor components wrapping Microsoft’s official Fluent UI Web Components. They implement the latest state of the Fluent design language, are built on FAST and work in every major browser. + Microsoft Fluent UI Razor Components for Blazor + A Blazor component library leveraging Microsoft’s Fluent Design System. Use the look of modern Microsoft products in your Blazor applications. README.md icon.png diff --git a/src/Templates/Microsoft.FluentUI.AspNetCore.Templates.csproj b/src/Templates/Microsoft.FluentUI.AspNetCore.Templates.csproj index 98511cce13..11d199c96d 100644 --- a/src/Templates/Microsoft.FluentUI.AspNetCore.Templates.csproj +++ b/src/Templates/Microsoft.FluentUI.AspNetCore.Templates.csproj @@ -4,7 +4,7 @@ Microsoft Content © Microsoft Corporation. All rights reserved. - Project templates for creating a Fluent UI Blazor Web app, Blazor WebAssembly Standalone app, Blazor Hybrid and Web App or .NET Aspire Starter app. These templates are pure copies of the original templates but use the Fluent UI Blazor Components ibrary for building the user interface (UI). + Project templates for creating a Fluent UI Blazor Web app, Blazor WebAssembly Standalone app, Blazor Hybrid and Web App or .NET Aspire Starter app. These templates are pure copies of the original templates but use the Fluent UI Blazor library for building the user interface (UI). true false MIT