From 221ef9685da4bb601ef9849c3b16af49bdff2455 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 8 Dec 2025 15:41:51 +0100 Subject: [PATCH 1/4] Port #4383 to v5 --- .../FluentUI.Demo.Client/DebugPages/IssueTester.md | 10 ++++++++++ .../Documentation/Components/IssueTester.razor | 1 + src/Core/Components/DataGrid/FluentDataGrid.razor | 3 ++- src/Core/Components/DataGrid/FluentDataGrid.razor.css | 1 - src/Core/Components/DataGrid/FluentDataGrid.razor.ts | 9 ++++++--- .../Components/DataGrid/FluentDataGridCell.razor.cs | 2 +- .../Components/DataGrid/FluentDataGridCell.razor.css | 2 +- .../Microsoft.FluentUI.AspNetCore.Components.csproj | 5 ++++- 8 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor diff --git a/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md b/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md new file mode 100644 index 0000000000..ec806cd141 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md @@ -0,0 +1,10 @@ +--- +title: Issue Tester +category: 90|Labs +icon: Beaker +route: /Test/IssueTester +--- + +Provides an easy entry point for testing out issue report related code in the demo environment. + +{{ IssueTester }} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor new file mode 100644 index 0000000000..5f282702bb --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 5648048ff1..4d706cf1fc 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -208,7 +208,8 @@ @if (ResizableColumns) { -
+ var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;"; +
} } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css index dc08949a64..c6e8928a24 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.css @@ -67,7 +67,6 @@ .fluent-data-grid .resize-handle { position: absolute; - top: 5px; right: 0; left: unset; bottom: 0; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.ts b/src/Core/Components/DataGrid/FluentDataGrid.razor.ts index 00501799bf..7fc770ddc9 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.ts +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.ts @@ -218,8 +218,11 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid { const resizedivs = header.querySelectorAll('.actual-resize-handle'); resizedivs.forEach(div => div.remove()); + // get the top of the first resize-handle + const resizeTop = (header.querySelector('.resize-handle') as HTMLElement)?.offsetTop ?? 2; + // add a new resize div - const div = createDiv(resizeHandleHeight, isRTL); + const div = createDiv(resizeHandleHeight, resizeTop, isRTL); header.appendChild(div); setListeners(div, isRTL); }); @@ -302,10 +305,10 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid { }); } - function createDiv(height: number, isRTL: boolean) { + function createDiv(height: number, top: number, isRTL: boolean) { const div = document.createElement('div'); div.className = 'actual-resize-handle'; - div.style.top = '5px'; + div.style.top = top + 'px'; div.style.position = 'absolute'; div.style.cursor = 'col-resize'; div.style.userSelect = 'none'; diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index f28abfabda..5a5bb247c9 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -46,7 +46,7 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati .AddStyle("height", $"{Grid.ItemSize.ToString(CultureInfo.InvariantCulture):0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize) .AddStyle("height", $"{((int)Grid.RowSize).ToString(CultureInfo.InvariantCulture)}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null) && InternalGridContext.TotalItemCount > 0) .AddStyle("height", "100%", Grid.MultiLine) - .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default) + .AddStyle("min-height", "40px", Owner.RowType != DataGridRowType.Default) .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(CultureInfo.InvariantCulture), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService) .AddStyle(Owner.Style) .Build(); diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css index e2c8fe59d4..1a657f4346 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css @@ -51,7 +51,7 @@ font-weight: 600; text-align: center; position: relative; - padding: 5px 1px; + padding: 0px 1px; } .fluent-data-grid .col-sort-button { diff --git a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj index 0565cb189c..2ad804cd57 100644 --- a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj +++ b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj @@ -122,7 +122,7 @@ - + @@ -153,4 +153,7 @@ CS1591 + + + From a8458a754e9ed3e681e545f61555350410dbb14b Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 8 Dec 2025 15:46:50 +0100 Subject: [PATCH 2/4] Update verified files --- ...FluentDataGrid_ColumnOptionsUISettings.verified.razor.html | 2 +- ....FluentDataGrid_ColumnResizeUISettings.verified.razor.html | 2 +- ...ts.FluentDataGrid_ColumnSortUISettings.verified.razor.html | 2 +- ...ntDataGridTests.FluentDataGrid_Default.verified.razor.html | 2 +- ...entDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html | 2 +- ...ntDataGridTests.FluentDataGrid_IsFixed.verified.razor.html | 2 +- ...aGridTests.FluentDataGrid_StickyHeader.verified.razor.html | 2 +- ...Tests_MultiSelect_Customized_Rendering.verified.razor.html | 4 ++-- ...electColumnTests_MultiSelect_Rendering.verified.razor.html | 4 ++-- ...lectColumnTests_SingleSelect_Rendering.verified.razor.html | 4 ++-- ...lumnTests_SingleStickySelect_Rendering.verified.razor.html | 4 ++-- 11 files changed, 15 insertions(+), 15 deletions(-) diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html index bd729e4c31..ca6d65618a 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html index bd729e4c31..ca6d65618a 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html index bd729e4c31..ca6d65618a 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html index bd729e4c31..ca6d65618a 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html index 58eec53350..6c616e99d1 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
-
+
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html index 9784195a45..82eab1cdaa 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html @@ -2,7 +2,7 @@ -
+
Name
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html index 70fb97a685..3b11ad9775 100644 --- a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html +++ b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html @@ -2,10 +2,10 @@ - -
+
➖
 +
Name
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html index f28a1e8485..4204fb1a14 100644 --- a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html +++ b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html @@ -2,14 +2,14 @@ - -
+ +
Name
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html index 79a6523419..3e338b2060 100644 --- a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html +++ b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html index 7cdd0fbab2..cfd70acfb7 100644 --- a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html +++ b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html @@ -2,8 +2,8 @@ - - +
+
Name
From ca0885147d816c2838955560a1d369332d7d9568 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Wed, 10 Dec 2025 15:14:55 +0100 Subject: [PATCH 3/4] Remove IssueTester work. We'll do that later --- .../FluentUI.Demo.Client/DebugPages/IssueTester.md | 10 ---------- .../Documentation/Components/IssueTester.razor | 1 - 2 files changed, 11 deletions(-) delete mode 100644 examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md delete mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor diff --git a/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md b/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md deleted file mode 100644 index ec806cd141..0000000000 --- a/examples/Demo/FluentUI.Demo.Client/DebugPages/IssueTester.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Issue Tester -category: 90|Labs -icon: Beaker -route: /Test/IssueTester ---- - -Provides an easy entry point for testing out issue report related code in the demo environment. - -{{ IssueTester }} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor deleted file mode 100644 index 5f282702bb..0000000000 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/IssueTester.razor +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From c0983888eeef35fdd2bc1d3a2a074c6d69e21f26 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Wed, 10 Dec 2025 22:33:07 +0100 Subject: [PATCH 4/4] Process comments --- src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj index 2ad804cd57..0565cb189c 100644 --- a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj +++ b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj @@ -122,7 +122,7 @@ - + @@ -153,7 +153,4 @@ CS1591 - - -