From 1a74d00f025803e14375c538e03d0907d120dbcb Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Fri, 11 Oct 2024 09:47:05 +0200
Subject: [PATCH] Make MenuProvider message more prominent and also add it to
 the MenuButton page

---
 examples/Demo/Shared/Pages/Menu/MenuPage.razor      | 13 ++++++-------
 .../Shared/Pages/MenuButton/MenuButtonPage.razor    | 11 +++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/examples/Demo/Shared/Pages/Menu/MenuPage.razor b/examples/Demo/Shared/Pages/Menu/MenuPage.razor
index d21e7bab8b..ba0cffdbfe 100644
--- a/examples/Demo/Shared/Pages/Menu/MenuPage.razor
+++ b/examples/Demo/Shared/Pages/Menu/MenuPage.razor
@@ -35,16 +35,15 @@
     Fluent UI design system.
 </p>
 
-<div>
-    <div><strong>FluentMenuProvider</strong></div>
+<div class="demopanel" style="padding: 1rem; margin-bottom: 1rem;">
+    <h5>FluentMenuProvider</h5>
     <p>
-        With version 4.9.4 of the library, we introduced a <code>FluentMenuProvider</code>. The <code>FluentMenu</code> component has been updated to use this provider.
-        The <code>&lt;FluentMenuProvider /&gt;</code> is a new component to be placed at the <b>bottom</b> of your HTML page (like the other <b>Providers</b>),
-        which renders all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear <b>on top</b> other components.
+        With version 4.9.4 of the library, we introduced the <code>FluentMenuProvider</code> component. The Menu component has been updated to use this provider.
+        The <code>&lt;FluentMenuProvider /&gt;</code> needs to be placed at the <b>bottom</b> of your HTML page (just like the other <b>...Providers</b> components).
+        It will renders all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear <b>on top</b> other components.
     </p>
     <p>
-        You can disable this feature by adding the <code>UseMenuService="false"</code> attribute.
-        In this case, the menu is drawn at the location of your HTML code.
+        You can disable this feature by adding the <code>UseMenuService</code> parameter (with a value of "false") to you FluentMenu component. In this case, the menu will be rendered at the location it is placed at in the page.
     </p>
 </div>
 
diff --git a/examples/Demo/Shared/Pages/MenuButton/MenuButtonPage.razor b/examples/Demo/Shared/Pages/MenuButton/MenuButtonPage.razor
index fc9954c9d0..6e6dbe2e47 100644
--- a/examples/Demo/Shared/Pages/MenuButton/MenuButtonPage.razor
+++ b/examples/Demo/Shared/Pages/MenuButton/MenuButtonPage.razor
@@ -10,6 +10,17 @@
    an <code>Items</code> parameter as well as manually as the <code>ChildContent</code> (at the same time).
 </p>
 
+<div class="demopanel" style="padding: 1rem; margin-bottom: 1rem;">
+    <h5>FluentMenuProvider</h5>
+    <p>
+        With version 4.9.4 of the library, we introduced the <code>FluentMenuProvider</code> component. The MenuButton component has been updated to use this provider.
+        The <code>&lt;FluentMenuProvider /&gt;</code> needs to be placed at the <b>bottom</b> of your HTML page (just like the other <b>...Providers</b> components).
+        It will renders all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear <b>on top</b> other components.
+    </p>
+
+</div>
+
+
 <h2 id="example">Example</h2>
 
 <DemoSection Component="typeof(MenuButtonAccentColor)" Title="MenuButton to select accent color"  />