Color Picker presets gap and DataGrid expand column HeaderClass (#598, #597)

demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DataGrid/custom-colored-header.txt

@@ -1,5 +1,6 @@
 <BbDataGrid TData="Person" Items="@people" InitialPageSize="5">
     <Columns>
+        <BbDataGridExpandColumn HeaderClass="bg-primary text-primary-foreground" />
         <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Name)" Sortable
             HeaderClass="bg-primary text-primary-foreground" />
         <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Department)" Sortable
@@ -9,4 +10,10 @@
         <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Status)"
             HeaderClass="bg-primary text-primary-foreground" />
     </Columns>
+    <DetailTemplate>
+        <div class="text-sm">
+            <span class="font-medium text-muted-foreground">Email:</span>
+            <span class="ml-2">@context.Email</span>
+        </div>
+    </DetailTemplate>
 </BbDataGrid>

demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridDemo.razor

@@ -1595,6 +1595,9 @@
                 <ApiParameter Name="Width" Type="string?" Default="48px">
                     Column width for the expand chevron column. Defaults to a compact button width.
                 </ApiParameter>
+                <ApiParameter Name="HeaderClass" Type="string?">
+                    Additional CSS classes applied to the header cell. Use it to match the header styling of the grid's other columns.
+                </ApiParameter>
                 <ApiParameter Name="Pinned" Type="ColumnPinning" Default="None">
                     Whether this column is pinned to an edge of the scrollable viewport.
                 </ApiParameter>

demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridStylingDemo.razor

@@ -325,12 +325,14 @@
                 <h3 class="text-lg font-medium">Colored Header</h3>
                 <p class="text-sm text-muted-foreground">
                     Apply a distinct background colour to the header row using
-                    <code class="bg-muted px-1 py-0.5 rounded">HeaderClass</code> on each column.
+                    <code class="bg-muted px-1 py-0.5 rounded">HeaderClass</code> on each column, including
+                    <code class="bg-muted px-1 py-0.5 rounded">BbDataGridExpandColumn</code>.
                     TailwindMerge automatically resolves conflicting classes with the base header styles.
                 </p>
             </div>
             <BbDataGrid TData="Person" Items="@people" InitialPageSize="5">
                 <Columns>
+                    <BbDataGridExpandColumn HeaderClass="bg-primary text-primary-foreground" />
                     <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Name)" Sortable
                         HeaderClass="bg-primary text-primary-foreground" />
                     <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Department)" Sortable
@@ -340,6 +342,12 @@
                     <BbDataGridPropertyColumn TData="Person" TProp="string" Property="@(p => p.Status)"
                         HeaderClass="bg-primary text-primary-foreground" />
                 </Columns>
+                <DetailTemplate>
+                    <div class="text-sm">
+                        <span class="font-medium text-muted-foreground">Email:</span>
+                        <span class="ml-2">@context.Email</span>
+                    </div>
+                </DetailTemplate>
             </BbDataGrid>
             <CodeBlock Source="Components/DataGrid/custom-colored-header.txt" />
         </div>

src/BlazorBlueprint.Components/Components/ColorPicker/BbColorPicker.razor

@@ -30,7 +30,7 @@
             </div>
 
             @* Hue Slider *@
-            <div class="bb:space-y-2">
+            <div>
                 <div @ref="_hueRef"
                      class="bb:relative bb:h-3 bb:w-full bb:rounded-md bb:cursor-pointer bb:touch-none"
                      style="background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);">
@@ -43,7 +43,7 @@
             @* Alpha Slider *@
             @if (ShowAlpha)
             {
-                <div class="bb:space-y-2">
+                <div>
                     <div @ref="_alphaRef"
                          class="bb:relative bb:h-3 bb:w-full bb:rounded-md bb:cursor-pointer bb:touch-none"
                          style="background: linear-gradient(to right, transparent, @CurrentColorWithoutAlpha), url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 fill-opacity=%22.1%22><rect x=%220%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%23000%22/><rect x=%228%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%23000%22/></svg>');">
@@ -105,7 +105,7 @@
             @if (ShowPresets)
             {
                 <div class="bb:space-y-2">
-                    <span class="bb:text-xs bb:text-muted-foreground">Presets</span>
+                    <span class="bb:block bb:text-xs bb:text-muted-foreground">Presets</span>
                     <div class="bb:flex bb:flex-wrap bb:gap-1">
                         @foreach (var preset in EffectivePresets)
                         {

src/BlazorBlueprint.Components/Components/DataGrid/BbDataGridExpandColumn.razor.cs

@@ -25,6 +25,13 @@ public partial class BbDataGridExpandColumn<TData> : ComponentBase, IDataGridCol
     [Parameter]
     public ColumnPinning Pinned { get; set; } = ColumnPinning.None;
 
+    /// <summary>
+    /// Additional CSS classes for the header cell. Applied last, so they override the
+    /// default width and padding.
+    /// </summary>
+    [Parameter]
+    public string? HeaderClass { get; set; }
+
     /// <summary>
     /// Template for rendering detail rows when a row is expanded.
     /// Detail rows use the same column structure as the parent grid,
@@ -69,7 +76,7 @@ public partial class BbDataGridExpandColumn<TData> : ComponentBase, IDataGridCol
 
     string? IDataGridColumn<TData>.CellClass => null;
 
-    string? IDataGridColumn<TData>.HeaderClass => null;
+    string? IDataGridColumn<TData>.HeaderClass => HeaderClass;
 
     bool IDataGridColumn<TData>.NoWrap => false;
 

tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt

@@ -1078,6 +1078,7 @@
 
 ### BbDataGridExpandColumn`1 (BlazorBlueprint.Components)
   - DetailRows : RenderFragment<TData>
+  - HeaderClass : String
   - Pinned : ColumnPinning
   - Width : String
   - ParentGrid : BbDataGrid<TData> [CascadingParameter]

tests/BlazorBlueprint.Tests/DataGrid/ExpandColumnTests.cs

@@ -0,0 +1,32 @@
+using BlazorBlueprint.Components;
+using BlazorBlueprint.Primitives.DataGrid;
+using Xunit;
+
+namespace BlazorBlueprint.Tests.DataGrid;
+
+/// <summary>
+/// The grid styles every header through <see cref="IDataGridColumn{TData}.HeaderClass"/>. The expand
+/// column used to answer <c>null</c> there, so its header could not be styled to match the rest (#597).
+/// </summary>
+public class ExpandColumnTests
+{
+    private sealed class Row;
+
+    [Fact]
+    public void HeaderClassReachesTheGrid()
+    {
+#pragma warning disable BL0005 // Set directly to check the column interface without mounting a grid.
+        IDataGridColumn<Row> column = new BbDataGridExpandColumn<Row> { HeaderClass = "bg-primary" };
+#pragma warning restore BL0005
+
+        Assert.Equal("bg-primary", column.HeaderClass);
+    }
+
+    [Fact]
+    public void HeaderClassIsNullByDefault()
+    {
+        IDataGridColumn<Row> column = new BbDataGridExpandColumn<Row>();
+
+        Assert.Null(column.HeaderClass);
+    }
+}