Make Icons demo page more intuitive

examples/Demo/Shared/Pages/Icon/IconExplorer.razor

@@ -16,16 +16,16 @@
                   Items="@(Enum.GetValues<IconVariant>())"
                   @onchange="@(x => HandleVariant(x))" />
 
-    <FluentSelect TOption="Color" 
-                  Id="Color" 
-                  @bind-SelectedOption="IconColor" 
+    <FluentSelect TOption="Color"
+                  Id="Color"
+                  @bind-SelectedOption="IconColor"
                   @onchange="@(x => HandleColor(x))"
                   Items="@(Enum.GetValues<Color>())"
                   OptionValue="x=> x.ToAttributeValue()"
                   OptionSelected="x => x == IconColor"
                   OptionDisabled="x => x == Color.Custom" />
-        
-    <FluentIcon Value="@(new Icons.Regular.Size24.ArrowCircleRight())" OnClick="@HandleSearch" />
+
+    <FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())" OnClick="@HandleSearch" />
 </div>
 
 @* Results *@
@@ -45,19 +45,17 @@
         else
         {
             <div style="width: 100%; line-height: var(--type-ramp-plus-4-line-height);">
-                <strong>@IconsCount</strong> icons found.
-                @if (IconsCount > MAX_ICONS)
-                {
-                    <em>Only the first @MAX_ICONS results are shown.</em>
-                }
-                <br />
+                <FluentPaginator State="@PaginationState" CurrentPageIndexChanged="@HandleCurrentPageIndexChanged" />
+            </div>
+
+            <div style="width: 100%; line-height: var(--type-ramp-plus-4-line-height);">
                 <small>
                     Click on upper right clipboard icon in a card to copy a ready to paste <code>FluentIcon</code>
                     component declaration to the clipboard.
                 </small>
             </div>
-    
-            @foreach (var item in IconsFound)
+
+            @foreach (var item in IconsForCurrentPage)
             {
                 <FluentCard Class="card">
                     <FluentIcon Class="copy" Icon="@Icons.Regular.Size16.Clipboard" Color="@Color.Accent" OnClick="()=>HandleClick(item)" />

examples/Demo/Shared/Pages/Icon/IconExplorer.razor.cs

@@ -6,13 +6,15 @@ namespace FluentUI.Demo.Shared.Pages.Icon;
 
 public partial class IconExplorer
 {
-    private const int MAX_ICONS = 200;
     private bool SearchInProgress = false;
     private readonly SearchCriteria Criteria = new();
     private Color IconColor = Color.Accent;
-    private IEnumerable<IconInfo> IconsFound = Array.Empty<IconInfo>();
+    private IconInfo[] IconsFound = Array.Empty<IconInfo>();
     private int IconsCount = 0;
     private IJSObjectReference? _jsModule;
+    private PaginationState PaginationState = new PaginationState {  ItemsPerPage = 25 };
+    private IEnumerable<IconInfo> IconsForCurrentPage =>
+        IconsFound.Skip(PaginationState.CurrentPageIndex * PaginationState.ItemsPerPage).Take(PaginationState.ItemsPerPage);
 
     [Inject]
     private IJSRuntime JSRuntime { get; set; } = default!;
@@ -28,26 +30,28 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
     private async Task HandleSearch()
     {
-        if (Criteria.SearchTerm.Length < 2)
-        {
-            SearchInProgress = false;
-            IconsCount = 0;
-            return;
-        }
-
         SearchInProgress = true;
         await Task.Delay(1);
 
         var icons = Icons.AllIcons
-                         .Where(i => i.Name.Contains(Criteria.SearchTerm, StringComparison.InvariantCultureIgnoreCase)
-                                  && i.Variant == Criteria.Variant
-                                  && i.Size == Criteria.Size);
+            .Where(i => i.Variant == Criteria.Variant)
+            .Where(i => i.Size == Criteria.Size);
+
+        if (!string.IsNullOrWhiteSpace(Criteria.SearchTerm))
+        {
+            icons = icons.Where(i => i.Name.Contains(Criteria.SearchTerm, StringComparison.InvariantCultureIgnoreCase));
+        }
 
         IconsCount = icons.Count();
-        IconsFound = icons.Take(MAX_ICONS).ToArray();
+        IconsFound = icons.ToArray();
 
         SearchInProgress = false;
-        await Task.Delay(1);
+        await PaginationState.SetTotalItemCountAsync(IconsCount);
+    }
+
+    private void HandleCurrentPageIndexChanged()
+    {
+        StateHasChanged();
     }
 
     public async Task HandleColor(ChangeEventArgs args)

src/Core/Components/Pagination/FluentPaginator.razor.cs

@@ -10,15 +10,20 @@ public partial class FluentPaginator : FluentComponentBase, IDisposable
 {
     private readonly EventCallbackSubscriber<PaginationState> _totalItemCountChanged;
 
+    [Parameter]
+    public EventCallback<int> CurrentPageIndexChanged { get; set; }
+
     /// <summary>
     /// Specifies the associated <see cref="PaginationState"/>. This parameter is required.
     /// </summary>
-    [Parameter, EditorRequired] public PaginationState State { get; set; } = default!;
+    [Parameter, EditorRequired]
+    public PaginationState State { get; set; } = default!;
 
     /// <summary>
     /// Optionally supplies a template for rendering the page count summary.
     /// </summary>
-    [Parameter] public RenderFragment? SummaryTemplate { get; set; }
+    [Parameter]
+    public RenderFragment? SummaryTemplate { get; set; }
 
     /// <summary>
     /// Constructs an instance of <see cref="FluentPaginator" />.
@@ -37,8 +42,14 @@ public FluentPaginator()
     private bool CanGoBack => State.CurrentPageIndex > 0;
     private bool CanGoForwards => State.CurrentPageIndex < State.LastPageIndex;
 
-    private Task GoToPageAsync(int pageIndex)
-        => State.SetCurrentPageIndexAsync(pageIndex);
+    private async Task GoToPageAsync(int pageIndex)
+    { 
+        await State.SetCurrentPageIndexAsync(pageIndex);
+        if (CurrentPageIndexChanged.HasDelegate)
+        {
+            await CurrentPageIndexChanged.InvokeAsync(State.CurrentPageIndex);
+        }
+    }
 
     /// <inheritdoc />
     protected override void OnParametersSet()