From df9a43c22d8a1138592509c4a6a6ba0690260e19 Mon Sep 17 00:00:00 2001
From: Denis VOITURON <dvoituron@outlook.com>
Date: Fri, 19 Dec 2025 15:09:02 +0100
Subject: [PATCH] Make Title in FluentMessageBar plain text only

The Title property now accepts only plain strings and no HTML markup.
For custom or formatted titles, use the ChildContent property.
Updated code and docs to clarify usage and provide examples.
---
 .../GetStarted/Migration/MigrationFluentMessageBar.md      | 7 ++++++-
 src/Core/Components/MessageBar/FluentMessageBar.razor      | 2 +-
 src/Core/Components/MessageBar/FluentMessageBar.razor.cs   | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentMessageBar.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentMessageBar.md
index b3af64a9a9..aedd821093 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentMessageBar.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentMessageBar.md
@@ -9,10 +9,15 @@ hidden: true
 
 ### Renamed properties 🔃
   The `FadeIn` property has been renamed to `Animation`.
-  
+
 ### Removed properties💥
   The `IconColor` property has been removed. Use `Icon.WithColor()` method instead.
 
   The `Intent.Custom` property has been removed. Don't use the `Intent` property and set `Icon` and `ChildContent` instead to customize the message bar.
 
   The `Type` property has been removed. Use the `Layout` property instead to choose the position of the actions and to display the `TimeStamp`.
+
+### Changed properties ⚠️
+
+  The `Title` property is a string and cannot contain markup anymore. Use the `ChildContent` property to customize the title content.
+  Example: `<ChildContent><span class="title">Customized <b>title</b></span></ChildContent>`  
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor b/src/Core/Components/MessageBar/FluentMessageBar.razor
index 543ee953f8..b322ef2f0b 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor
@@ -19,7 +19,7 @@
 
             @if (!string.IsNullOrEmpty(Title))
             {
-                <span class="title">@((MarkupString)Title)</span>
+                <span class="title">@Title</span>
             }
         </AddTag>
 
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
index 863ef26ed7..4a805395fc 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
@@ -70,6 +70,8 @@ public FluentMessageBar(LibraryConfiguration configuration) : base(configuration
 
     /// <summary>
     /// Gets or sets the most important info to be shown in the message bar.
+    /// You cannot format this string using HTML tags (bold, italic, etc.).
+    /// If you need to format the content, use the <see cref="ChildContent"/> parameter.
     /// </summary>
     [Parameter]
     public string? Title { get; set; }