docs(button): add demo for IconOnly parameter

Author: desmondinho

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs

@@ -25,7 +25,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexAlert ), PageStatus.New ) )
 			.Add( new( nameof( LumexAvatar ), PageStatus.New ) )
 			.Add( new( nameof( LumexBadge ), PageStatus.New ) )
-			.Add( new( nameof( LumexButton ) ) )
+			.Add( new( nameof( LumexButton ), PageStatus.Updated ) )
 			.Add( new( nameof( LumexCard ) ) )
 			.Add( new( nameof( LumexCheckbox ) ) )
 			.Add( new( nameof( LumexCheckboxGroup ) ) )

docs/LumexUI.Docs.Client/Pages/Components/Button/Button.razor

@@ -36,7 +36,7 @@
             Customize the appearance of the button by applying
             different colors that suit your application's theme and design.
         </p>
-        <LumexUI.Docs.Client.Pages.Components.Button.PreviewCodes.Colors />
+        <Colors />
     </DocsSection>
 
     <DocsSection Title="Variants">
@@ -54,6 +54,14 @@
         </p>
         <WithIcons />
     </DocsSection>
+
+    <DocsSection Title="Icon Only">
+        <p>
+            You can also display a button without text by passing the <Code>IconOnly</Code>
+            parameter and the desired icon as <Code>ChildContent</Code>.
+        </p>
+        <IconOnly />
+    </DocsSection>
 </DocsSection>
 
 <DocsSection Title="Custom Styles">
@@ -78,6 +86,7 @@
             new("Colors"),
             new("Variants"),
             new("Icons"),
+            new("Icon Only"),
         ]),
         new("Custom Styles"),
         new("API")

docs/LumexUI.Docs.Client/Pages/Components/Button/Examples/IconOnly.razor

@@ -0,0 +1,8 @@
+<div class="flex items-center gap-4">
+    <LumexButton IconOnly="@true" Color="@ThemeColor.Danger">
+        <LumexIcon Icon="@Icons.Rounded.Favorite" />
+    </LumexButton>
+    <LumexButton IconOnly="@true" Color="@ThemeColor.Warning">
+        <LumexIcon Icon="@Icons.Rounded.PhotoCamera" />
+    </LumexButton>
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Button/PreviewCodes/IconOnly.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Button.Code.IconOnly")">
+    <LumexUI.Docs.Client.Pages.Components.Button.Examples.IconOnly />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Usage.razor

@@ -1,26 +1,11 @@
-@using LumexUI.Services
-
-@inject IPopoverService PopoverService
-
-<LumexButton OnClick="@TriggerAsync"
-             data-popoverref="@_popoverId">
-    Open Popover
-</LumexButton>
-
-<LumexPopover Id="@_popoverId">
+<LumexPopover>
+    <LumexPopoverTrigger>
+        <LumexButton>Open Popover</LumexButton>
+    </LumexPopoverTrigger>
     <LumexPopoverContent>
         <div class="px-1 py-2">
             <div class="text-small font-bold">Oh, hi there!</div>
             <div class="text-tiny">I am the popover content</div>
         </div>
     </LumexPopoverContent>
-</LumexPopover>
-
-@code {
-    private string _popoverId = "popover-usage";
-
-    private Task TriggerAsync()
-    {
-        return PopoverService.TriggerAsync(_popoverId);
-    }
-}
+</LumexPopover>