[DataGrid] Do not use 'display: flex' on table header cells (#3760)

* When not using `HeaderCellAsButtonWithMenu`, don't use display:flex on the header cell. Instead add a specific div in rendering the header content

* Tests: update verified files

Author: vnbaaij

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -5246,13 +5246,13 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.MaximumFileSize">
             <summary>
             Gets or sets the maximum size of a file to be uploaded (in bytes).
-            Default value is 10 MB.
+            Default value is 10 MiB.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.BufferSize">
             <summary>
             Gets or sets the sze of buffer to read bytes from uploaded file (in bytes).
-            Default value is 10 KB.
+            Default value is 10 KiB.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.Accept">

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -17,7 +17,7 @@
         {
             string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
 
-            <FluentKeyCode Only="new[] { KeyCode.Ctrl, KeyCode.Enter }" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;"  StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
+            <FluentKeyCode Only="new[] { KeyCode.Ctrl, KeyCode.Enter }" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
 
                 @if (AnyColumnActionEnabled)
                 {
@@ -96,74 +96,76 @@
             {
                 wdelta = "56px";
             }
-
-            @if (Align == Align.Start || Align == Align.Center)
-            {
-                @if (Grid.ResizeType is not null)
+            <div style="display: flex;">
+                @if (Align == Align.Start || Align == Align.Center)
                 {
-                    @OptionsButton()
-                }
-                else
-                {
-                    @if (ColumnOptions is not null)
+                    @if (Grid.ResizeType is not null)
                     {
-                        @FilterButton()
+                        @OptionsButton()
+                    }
+                    else
+                    {
+                        @if (ColumnOptions is not null)
+                        {
+                            @FilterButton()
+                        }
                     }
                 }
-            }
 
-            @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
-            {
-                <FluentKeyCode Only="new [] { KeyCode.Ctrl, KeyCode.Enter}" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
-                    <FluentButton Appearance="Appearance.Stealth" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip">
+                @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
+                {
+                    <FluentKeyCode Only="new[] { KeyCode.Ctrl, KeyCode.Enter }" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
+                        <FluentButton Appearance="Appearance.Stealth" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip">
                             <div class="col-title-text" title="@tooltip">@Title</div>
 
-                        @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
-                        {
-                            if (Grid.SortByAscending == true)
+                            @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
                             {
-                                <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: 0.5;" />
+                                if (Grid.SortByAscending == true)
+                                {
+                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: 0.5;" />
+                                }
+                                else
+                                {
+                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: 0.5;" />
+                                }
                             }
-                            else
+                            @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType is not null)
                             {
-                                <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: 0.5;" />
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
                             }
-                        }
-                        @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType is not null)
-                        {
-                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
-                        }
                         </FluentButton>
-                </FluentKeyCode>
-            }
-            else
-            {
-                <div class="col-title" style="@($"width: calc(100% - {wdelta});")">
-                    <div class="col-title-text" title="@tooltip" >@Title
-                        @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue )
-                        {
-                            <span style="padding: 0 5px;">
-                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
-                            </span>
-                        }
-                    </div>
-                </div>
-            }
-
-            @if (Align == Align.End)
-            {
-                @if (Grid.ResizeType is not null)
-                {
-                   @OptionsButton()
+                    </FluentKeyCode>
                 }
                 else
                 {
-                    @if (ColumnOptions is not null)
+                    <div class="col-title" style="@($"width: calc(100% - {wdelta});")">
+                        <div class="col-title-text" title="@tooltip">
+                            @Title
+                            @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue)
+                            {
+                                <span style="padding: 0 5px;">
+                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
+                                </span>
+                            }
+                        </div>
+                    </div>
+                }
+
+                @if (Align == Align.End)
+                {
+                    @if (Grid.ResizeType is not null)
                     {
-                        @FilterButton()
+                        @OptionsButton()
+                    }
+                    else
+                    {
+                        @if (ColumnOptions is not null)
+                        {
+                            @FilterButton()
+                        }
                     }
                 }
-            }
+            </div>
 
         }
     }
@@ -181,23 +183,23 @@
     {
         return
             @<FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
-                <FluentIcon Value="@(new CoreIcons.Regular.Size20.ChevronDown())" Color="Color.Neutral" Width="20px" Style="opacity: 0.5;" />
-            </FluentButton>;
+            <FluentIcon Value="@(new CoreIcons.Regular.Size20.ChevronDown())" Color="Color.Neutral" Width="20px" Style="opacity: 0.5;" />
+        </FluentButton>;
     }
 
     private RenderFragment FilterButton()
     {
         return
             @<FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
-                @if (Filtered.GetValueOrDefault())
-            {
+        @if (Filtered.GetValueOrDefault())
+        {
                 <FluentIcon Value="@(new CoreIcons.Regular.Size20.FilterDismiss())" />
-            }
-            else
-            {
+        }
+        else
+        {
                 <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" />
-            }
+        }
 
-            </FluentButton>;
+        </FluentButton>;
     }
 }

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

@@ -79,7 +79,6 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
-        .AddStyle("display", "flex", ShouldHaveDisplayFlex())
         .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0)
         .AddStyle(Owner.Style)
         .Build();
@@ -126,25 +125,4 @@ internal async Task HandleOnCellKeyDownAsync(KeyboardEventArgs e)
 
     public void Dispose() => Owner.Unregister(this);
 
-    private bool ShouldHaveDisplayFlex()
-    {
-
-        var isHeaderCell = CellType == DataGridCellType.ColumnHeader;
-
-        if (!isHeaderCell)
-        {
-            return false;
-        }
-
-        var isButtonWithMenu = Grid.HeaderCellAsButtonWithMenu;
-        var isResizable = Grid.ResizableColumns;
-        var isNotResizableWithOptions = !Grid.ResizableColumns && Column?.ColumnOptions is not null;
-        var isSelectColumn = Column?.GetType() == typeof(SelectColumn<TGridItem>);
-        //var isColumnNull = Column is null;
-        var isSortable = (Column?.Sortable.HasValue ?? false) && Column?.Sortable.Value == true;
-        var isSortByNull = Column?.SortBy is null;
-        var isColumnsCountGreaterThanZero = Grid._columns.Count > 0;
-
-        return isHeaderCell && !isButtonWithMenu && (isResizable || isNotResizableWithOptions) && !isSelectColumn && isColumnsCountGreaterThanZero && (!isSortable || isSortByNull);
-    }
 }

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

@@ -3,18 +3,22 @@
   <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; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
-        <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
-          <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
-            <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
-            <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
-              <path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
-            </svg>
-          </fluent-button>
-        </span>
+        <div style="display: flex;" b-pxhtqoo8qd="">
+          <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
+            <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
+              <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+              <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
+                <path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
+              </svg>
+            </fluent-button>
+          </span>
+        </div>
       </th>
       <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" 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 style="display: flex;" b-pxhtqoo8qd="">
+          <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
+            <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+          </div>
         </div>
       </th>
     </tr>

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

@@ -3,18 +3,22 @@
   <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; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
-        <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
-          <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
-            <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
-            <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
-              <path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
-            </svg>
-          </fluent-button>
-        </span>
+        <div style="display: flex;" b-pxhtqoo8qd="">
+          <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
+            <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
+              <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+              <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
+                <path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
+              </svg>
+            </fluent-button>
+          </span>
+        </div>
       </th>
       <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" 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 style="display: flex;" b-pxhtqoo8qd="">
+          <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
+            <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+          </div>
         </div>
       </th>
     </tr>

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

@@ -3,18 +3,22 @@
   <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; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
-        <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
-          <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
-            <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
-            <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
-              <path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
-            </svg>
-          </fluent-button>
-        </span>
+        <div style="display: flex;" b-pxhtqoo8qd="">
+          <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
+            <fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
+              <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+              <svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
+                <path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
+              </svg>
+            </fluent-button>
+          </span>
+        </div>
       </th>
       <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" 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 style="display: flex;" b-pxhtqoo8qd="">
+          <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
+            <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+          </div>
         </div>
       </th>
     </tr>