add Classes and Styles parameters to BitBasicList #11019

Author: msynk

src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor

@@ -50,14 +50,17 @@
 
     @if (LoadMore && _loadMoreFinished is false)
     {
-        <button class="bit-bsl-lmb" @onclick="() => PerformLoadMore(false)">
+        <button @onclick="() => PerformLoadMore(false)"
+                style="@Styles?.LoadMoreButton"
+                class="bit-bsl-lmb @Classes?.LoadMoreButton">
             @if (LoadMoreTemplate is not null)
             {
                 @LoadMoreTemplate(_isLoadingMore)
             }
             else
             {
-                <div class="bit-bsl-lmt">
+                <div style="@Styles?.LoadMoreText"
+                     class="bit-bsl-lmt @Classes?.LoadMoreText">
                     @if (_isLoadingMore)
                     {
                         <span>...</span>

src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor.cs

@@ -1,4 +1,6 @@
-namespace Bit.BlazorUI;
+using System.Drawing;
+
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitBasicList provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.
@@ -19,6 +21,11 @@ public partial class BitBasicList<TItem> : BitComponentBase
 
 
 
+    /// <summary>
+    /// Custom CSS classes for different parts of the list.
+    /// </summary>
+    [Parameter] public BitBasicListClassStyles? Classes { get; set; }
+
     /// <summary>
     /// The custom content that will be rendered when there is no item to show.
     /// </summary>
@@ -110,6 +117,11 @@ public partial class BitBasicList<TItem> : BitComponentBase
     /// </summary>
     [Parameter] public RenderFragment<TItem>? RowTemplate { get; set; }
 
+    /// <summary>
+    /// Custom CSS styles for different parts of the list.
+    /// </summary>
+    [Parameter] public BitBasicListClassStyles? Styles { get; set; }
+
     /// <summary>
     /// Enables virtualization in rendering the list.
     /// </summary>
@@ -138,8 +150,15 @@ public async Task RefreshDataAsync()
 
     protected override string RootElementClass => "bit-bsl";
 
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => Classes?.Root);
+    }
+
     protected override void RegisterCssStyles()
     {
+        StyleBuilder.Register(() => Styles?.Root);
+
         StyleBuilder.Register(() => (FullSize || FullWidth) ? "width:100%" : string.Empty);
         StyleBuilder.Register(() => (FullSize || FullHeight) ? "height:100%" : string.Empty);
 

src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicListClassStyles.cs

@@ -0,0 +1,19 @@
+namespace Bit.BlazorUI;
+
+public class BitBasicListClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the root element of the list.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the LoadMore button of the list.
+    /// </summary>
+    public string? LoadMoreButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the LoadMore text of the list.
+    /// </summary>
+    public string? LoadMoreText { get; set; }
+}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor

@@ -8,6 +8,7 @@
 <DemoPage Name="BasicList"
           Description="BitBasicList provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management."
           Parameters="componentParameters"
+          SubClasses="componentSubClasses"
           GitHubUrl="Lists/BasicList/BitBasicList.razor"
           GitHubDemoUrl="Lists/BasicList/BitBasicListDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/BasicList/BitBasicListDemo.razor.cs

@@ -4,6 +4,15 @@ public partial class BitBasicListDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "Classes",
+            Type = "BitBasicListClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS classes for different parts of the list.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles",
+        },
         new()
         {
             Name = "EmptyContent",
@@ -124,6 +133,15 @@ public partial class BitBasicListDemo
             Description = "The template to render each row.",
         },
         new()
+        {
+            Name = "Styles",
+            Type = "BitBasicListClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS styles for different parts of the list.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles",
+        },
+        new()
         {
             Name = "Virtualize",
             Type = "bool",
@@ -139,6 +157,40 @@ public partial class BitBasicListDemo
         },
     ];
 
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        new()
+        {
+            Id = "class-styles",
+            Title = "BitBasicListClassStyles",
+            Description = "",
+            Parameters =
+            [
+                new()
+                {
+                    Name = "Root",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the root element of the list.",
+                },
+                new()
+                {
+                    Name = "LoadMoreButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the LoadMore button of the list.",
+                },
+                new()
+                {
+                    Name = "LoadMoreText",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the LoadMore text of the list.",
+                },
+            ]
+        }
+    ];
+
 
 
     private readonly List<Person> lotsOfPeople = [.. Enumerable.Range(0, 8000).Select(i => new Person