diff --git a/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DataGrid/custom-colored-header.txt b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DataGrid/custom-colored-header.txt index 4dbdea19d..437b268aa 100644 --- a/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DataGrid/custom-colored-header.txt +++ b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DataGrid/custom-colored-header.txt @@ -1,5 +1,6 @@ + + +
+ Email: + @context.Email +
+ \ No newline at end of file diff --git a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridDemo.razor b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridDemo.razor index b7075837a..406d48adf 100644 --- a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridDemo.razor +++ b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridDemo.razor @@ -1595,6 +1595,9 @@ Column width for the expand chevron column. Defaults to a compact button width. + + Additional CSS classes applied to the header cell. Use it to match the header styling of the grid's other columns. + Whether this column is pinned to an edge of the scrollable viewport. diff --git a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridStylingDemo.razor b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridStylingDemo.razor index cb34fe031..537cc5abc 100644 --- a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridStylingDemo.razor +++ b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DataGridStylingDemo.razor @@ -325,12 +325,14 @@

Colored Header

Apply a distinct background colour to the header row using - HeaderClass on each column. + HeaderClass on each column, including + BbDataGridExpandColumn. TailwindMerge automatically resolves conflicting classes with the base header styles.

+ + +
+ Email: + @context.Email +
+ diff --git a/src/BlazorBlueprint.Components/Components/ColorPicker/BbColorPicker.razor b/src/BlazorBlueprint.Components/Components/ColorPicker/BbColorPicker.razor index 2419cde62..31078ca66 100644 --- a/src/BlazorBlueprint.Components/Components/ColorPicker/BbColorPicker.razor +++ b/src/BlazorBlueprint.Components/Components/ColorPicker/BbColorPicker.razor @@ -30,7 +30,7 @@ @* Hue Slider *@ -
+
@@ -43,7 +43,7 @@ @* Alpha Slider *@ @if (ShowAlpha) { -
+
@@ -105,7 +105,7 @@ @if (ShowPresets) {
- Presets + Presets
@foreach (var preset in EffectivePresets) { diff --git a/src/BlazorBlueprint.Components/Components/DataGrid/BbDataGridExpandColumn.razor.cs b/src/BlazorBlueprint.Components/Components/DataGrid/BbDataGridExpandColumn.razor.cs index f57b64ed4..b76806b81 100644 --- a/src/BlazorBlueprint.Components/Components/DataGrid/BbDataGridExpandColumn.razor.cs +++ b/src/BlazorBlueprint.Components/Components/DataGrid/BbDataGridExpandColumn.razor.cs @@ -25,6 +25,13 @@ public partial class BbDataGridExpandColumn : ComponentBase, IDataGridCol [Parameter] public ColumnPinning Pinned { get; set; } = ColumnPinning.None; + /// + /// Additional CSS classes for the header cell. Applied last, so they override the + /// default width and padding. + /// + [Parameter] + public string? HeaderClass { get; set; } + /// /// 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 : ComponentBase, IDataGridCol string? IDataGridColumn.CellClass => null; - string? IDataGridColumn.HeaderClass => null; + string? IDataGridColumn.HeaderClass => HeaderClass; bool IDataGridColumn.NoWrap => false; diff --git a/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt b/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt index 62164a613..01edb5303 100644 --- a/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt +++ b/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt @@ -1078,6 +1078,7 @@ ### BbDataGridExpandColumn`1 (BlazorBlueprint.Components) - DetailRows : RenderFragment + - HeaderClass : String - Pinned : ColumnPinning - Width : String - ParentGrid : BbDataGrid [CascadingParameter] diff --git a/tests/BlazorBlueprint.Tests/DataGrid/ExpandColumnTests.cs b/tests/BlazorBlueprint.Tests/DataGrid/ExpandColumnTests.cs new file mode 100644 index 000000000..30f177c64 --- /dev/null +++ b/tests/BlazorBlueprint.Tests/DataGrid/ExpandColumnTests.cs @@ -0,0 +1,32 @@ +using BlazorBlueprint.Components; +using BlazorBlueprint.Primitives.DataGrid; +using Xunit; + +namespace BlazorBlueprint.Tests.DataGrid; + +/// +/// The grid styles every header through . The expand +/// column used to answer null there, so its header could not be styled to match the rest (#597). +/// +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 column = new BbDataGridExpandColumn { HeaderClass = "bg-primary" }; +#pragma warning restore BL0005 + + Assert.Equal("bg-primary", column.HeaderClass); + } + + [Fact] + public void HeaderClassIsNullByDefault() + { + IDataGridColumn column = new BbDataGridExpandColumn(); + + Assert.Null(column.HeaderClass); + } +}