[DataGrid] Tweak display: flex and DataGridDisplayMode.Table (#3156)

* Fix #3151, #3152

* Update WhatsNew
Fix tests

* Fix test

.editorconfig

@@ -26,6 +26,13 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 spelling_exclusion_path = spelling.dic
+dotnet_style_operator_placement_when_wrapping = beginning_of_line
+tab_width = 4
+indent_size = 4
+end_of_line = crlf
+dotnet_style_coalesce_expression = true:warning
+dotnet_style_null_propagation = true:warning
+dotnet_style_prefer_is_null_check_over_reference_equality_method = true:suggestion
 
 # C# files
 [*.cs]
@@ -57,7 +64,7 @@ dotnet_style_parentheses_in_other_operators = never_if_unnecessary:error
 dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity:error
 
 # Modifier preferences
-dotnet_style_require_accessibility_modifiers = for_non_interface_members:error
+dotnet_style_require_accessibility_modifiers = never:error
 
 # Require var all the time.
 csharp_style_var_for_built_in_types = true:suggestion
@@ -296,6 +303,8 @@ dotnet_naming_style.begins_with_i.capitalization = pascal_case
 dotnet_analyzer_diagnostic.category-Usage.severity = none
 csharp_style_prefer_method_group_conversion = true:silent
 csharp_style_prefer_top_level_statements = true:silent
+csharp_style_prefer_primary_constructors = true:suggestion
+csharp_prefer_system_threading_lock = true:suggestion
 
 #### Tests Projects ####
 [/tests/**/*.cs]

WHATSNEW.md

@@ -1,3 +1,10 @@
+## V4.11.2
+
+### Components
+- \[DataGrid\] Add SingleSticky selection mode ([#3150](https://github.com/microsoft/fluentui-blazor/pull/3150))
+- \[DataGrid\] Tweak `display: flex` and DataGridDisplayMode.Table ([#3156](https://github.com/microsoft/fluentui-blazor/pull/3156))
+- \[Tabs\] Remove 40px height compensation for some cases ([#3149](https://github.com/microsoft/fluentui-blazor/pull/3149))
+
 ## V4.11.1
 
 ### Components

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1,2 +1 @@
-@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
-<DataGridTypical />
+

examples/Demo/Shared/wwwroot/docs/WhatsNew.md

@@ -1,3 +1,10 @@
+## V4.11.2
+
+### Components
+- \[DataGrid\] Add SingleSticky selection mode ([#3150](https://github.com/microsoft/fluentui-blazor/pull/3150))
+- \[DataGrid\] Tweak `display: flex` and DataGridDisplayMode.Table ([#3156](https://github.com/microsoft/fluentui-blazor/pull/3156))
+- \[Tabs\] Remove 40px height compensation for some cases ([#3149](https://github.com/microsoft/fluentui-blazor/pull/3149))
+
 ## V4.11.1
 
 ### Components

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -809,8 +809,8 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
     {
         return new CssBuilder(Class)
            .AddClass(ColumnJustifyClass(column))
-           .AddClass("col-sort-asc", _sortByAscending)
-           .AddClass("col-sort-desc", !_sortByAscending)
+           .AddClass("col-sort-asc", _sortByAscending && column.IsActiveSortColumn)
+           .AddClass("col-sort-desc", !_sortByAscending && column.IsActiveSortColumn)
            .Build();
     }
 

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -74,11 +74,12 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn<TGridItem> && Owner.RowType == DataGridRowType.Default)
         .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn<TGridItem> && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
         .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)
-        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
+        .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)
+        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default && CellType == DataGridCellType.ColumnHeader)
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
         .AddStyle("height", "100%", InternalGridContext.TotalItemCount == 0 || (Grid.EffectiveLoadingValue && Grid.Items is null) || Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
-        .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns)
+        .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column!.Sortable.HasValue && !Column!.Sortable.Value)))
         .AddStyle(Owner.Style)
         .Build();
 

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html

@@ -2,12 +2,12 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html

@@ -2,12 +2,12 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html

@@ -2,12 +2,12 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-       <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html

@@ -2,12 +2,12 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html

@@ -2,10 +2,10 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="cursor: pointer; margin-left: 12px;" blazor:onclick="26" blazor:onkeydown="27">➖</div>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html

@@ -2,14 +2,14 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="47" blazor:onkeydown="48">
           <title>Some rows are selected.</title>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
         </svg>
       </th>
-      <th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html

@@ -2,8 +2,8 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
-      <th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>