Make MenuProvider message more prominent and also add it to the MenuB…

…utton page
microsoft · Oct 11, 2024 · 1a74d00 · 1a74d00
1 parent b076428
commit 1a74d00
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git 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
@@ -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"  />