From f6c2cc08e498f22b78cb03bcbed3442efcf5a64e Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 20 Jun 2024 23:16:02 +0200 Subject: [PATCH 01/11] Initial work of adding one-click resize --- ...crosoft.FluentUI.AspNetCore.Components.xml | 7 +++ .../DataGrid/Examples/DataGridTypical.razor | 47 +++++++++++---- .../Demo/Shared/Pages/Lab/IssueTester.razor | 2 + .../DataGrid/Columns/ColumnBase.razor | 60 ++++++++++++------- .../DataGrid/Columns/ColumnResize.razor | 18 ++++++ .../DataGrid/Columns/ColumnResize.razor.cs | 32 ++++++++++ .../Components/DataGrid/FluentDataGrid.razor | 30 ++++++++-- .../DataGrid/FluentDataGrid.razor.cs | 15 ++++- .../DataGrid/FluentDataGrid.razor.css | 6 ++ src/Core/Components/Icons/CoreIcons.cs | 5 ++ 10 files changed, 182 insertions(+), 40 deletions(-) create mode 100644 src/Core/Components/DataGrid/Columns/ColumnResize.razor create mode 100644 src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 31112d231f..0349ee0142 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1670,6 +1670,13 @@ manually. Size changes are not persisted. + + + To comply with WCAG 2.2, a one-click option should be offered to change column widths. We providesuch an option through the + ColumnOptions UI. This parameter allows you to enable or disable this resize UI. + Defualts to false. + + Optionally defines a value for @key on each rendered row. Typically this should be used to specify a diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 164d8bcea1..331dcad9d3 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -1,7 +1,7 @@ @inject DataSource Data - + Flag of @(context.Code) @@ -15,7 +15,12 @@ - + + +

@minMedals

+

@maxMedals

+ + @@ -32,6 +37,8 @@ IQueryable? items; PaginationState pagination = new PaginationState { ItemsPerPage = 10 }; string nameFilter = string.Empty; + int minMedals; + int maxMedals = 120; GridSort rankSort = GridSort .ByDescending(x => x.Medals.Gold) @@ -41,7 +48,27 @@ Func rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : null; Func rowStyle = x => x.Name.StartsWith("Au") ? "background-color: var(--highlight-bg);" : null; - IQueryable? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase)); + //IQueryable? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase)); + + IQueryable? FilteredItems + { + get + { + var result = items?.Where(c => c.Medals.Total <= maxMedals); + + if (result is not null && !string.IsNullOrEmpty(nameFilter)) + { + result = result.Where(c => c.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase)); + } + + if (result is not null && minMedals > 0) + { + result = result.Where(c => c.Medals.Total >= minMedals); + } + + return result; + } + } protected override async Task OnInitializedAsync() { @@ -67,12 +94,12 @@ private async Task ToggleItemsAsync() { if (_clearItems) - { - items = null; - } - else - { - items = (await Data.GetCountriesAsync()).AsQueryable(); - } + { + items = null; + } + else + { + items = (await Data.GetCountriesAsync()).AsQueryable(); + } } } diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester.razor b/examples/Demo/Shared/Pages/Lab/IssueTester.razor index 0e8d03c85c..3f0945b4a7 100644 --- a/examples/Demo/Shared/Pages/Lab/IssueTester.razor +++ b/examples/Demo/Shared/Pages/Lab/IssueTester.razor @@ -1 +1,3 @@ @page "/issue-tester" + + diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index b273076a44..a136c2e002 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -3,7 +3,7 @@ @namespace Microsoft.FluentUI.AspNetCore.Components @typeparam TGridItem @{ - InternalGridContext.Grid.AddColumn(this, InitialSortDirection, IsDefaultSortColumn); + Grid.AddColumn(this, InitialSortDirection, IsDefaultSortColumn); } @code { @@ -17,16 +17,23 @@ { string? tooltip = Tooltip ? Title : null; - @if (ColumnOptions is not null && (Align == Align.Start || Align == Align.Center)) + @if ((ColumnOptions is not null || Grid.ResizableWithColumnOptions) && (Align == Align.Start || Align == Align.Center)) { - @if (Filtered.GetValueOrDefault()) + @if (Grid.ResizableWithColumnOptions) { - + } else { - + if (Filtered.GetValueOrDefault()) + { + + } + else + { + + } } } @@ -34,24 +41,24 @@ if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) { - - -
@Title
+ + +
@Title
- @if (Grid.SortByAscending.HasValue && ShowSortIcon) - { - if (Grid.SortByAscending == true) - { - - } - else + @if (Grid.SortByAscending.HasValue && ShowSortIcon) { - + if (Grid.SortByAscending == true) + { + + } + else + { + + } } - } - - + + } else @@ -61,16 +68,23 @@ } - @if (ColumnOptions is not null && Align == Align.End) + @if ((ColumnOptions is not null || Grid.ResizableWithColumnOptions) && Align == Align.End) { - @if (Filtered.GetValueOrDefault()) + @if (Grid.ResizableWithColumnOptions) { - + } else { - + if (Filtered.GetValueOrDefault()) + { + + } + else + { + + } } } diff --git a/src/Core/Components/DataGrid/Columns/ColumnResize.razor b/src/Core/Components/DataGrid/Columns/ColumnResize.razor new file mode 100644 index 0000000000..1514975d81 --- /dev/null +++ b/src/Core/Components/DataGrid/Columns/ColumnResize.razor @@ -0,0 +1,18 @@ +@namespace Microsoft.FluentUI.AspNetCore.Components +@typeparam TGridItem + + + + @InternalGridContext.Grid.ResizeLabel + + + + + + + + + + + + diff --git a/src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs new file mode 100644 index 0000000000..8f24bad394 --- /dev/null +++ b/src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs @@ -0,0 +1,32 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure; + +namespace Microsoft.FluentUI.AspNetCore.Components; +public partial class ColumnResize +{ + [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; + + /// + /// Gets a reference to the enclosing . + /// + public FluentDataGrid Grid => InternalGridContext.Grid; + + [Parameter] + public string? Label{ get; set; } = "Resize"; + + + private async Task HandleShrinkAsync() + { + await Grid.SetColumnWidthAsync(-10); + } + + private async Task HandleGrowAsync() + { + await Grid.SetColumnWidthAsync(10); + } + + private async Task HandleResetAsync() + { + await Grid.ResetColumnWidthsAsync(); + } +} diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 2021c63008..8f390270fd 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -4,12 +4,17 @@ @inherits FluentComponentBase @typeparam TGridItem - @{ StartCollectingColumns(); } - @if (!_manualGrid) { + @{ + StartCollectingColumns(); + } + @if (!_manualGrid) + { @ChildContent } - @{ FinishCollectingColumns(); } + @{ + FinishCollectingColumns(); + } + @col.HeaderContent @if (col == _displayOptionsForColumn) { -
@col.ColumnOptions
+
+ + @col.ColumnOptions + @if (ResizableWithColumnOptions) + { + + } + + +
} @if (ResizableColumns) { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 1db0749077..216b38ba7d 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -69,6 +69,17 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve /// [Parameter] public bool ResizableColumns { get; set; } + /// + /// To comply with WCAG 2.2, a one-click option should be offered to change column widths. We providesuch an option through the + /// ColumnOptions UI. This parameter allows you to enable or disable this resize UI. + /// Defualts to false. + /// + [Parameter] + public bool ResizableWithColumnOptions { get; set; } = false; + + [Parameter] + public string ResizeLabel { get; set; } = "Resize column"; + /// /// Optionally defines a value for @key on each rendered row. Typically this should be used to specify a /// unique identifier, such as a primary key value, for each data item. @@ -659,7 +670,7 @@ public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args) //return Task.CompletedTask; } - private async Task SetColumnWidthAsync(float widthChange) + internal async Task SetColumnWidthAsync(float widthChange) { if (_gridReference is not null && Module is not null) { @@ -667,7 +678,7 @@ private async Task SetColumnWidthAsync(float widthChange) } } - private async Task ResetColumnWidthsAsync() + internal async Task ResetColumnWidthsAsync() { if (_gridReference is not null && Module is not null) { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css index 31694e4157..6b5f253235 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.css @@ -47,6 +47,12 @@ fluent-data-grid { opacity: 0.75; } +.resize-options { + display: flex; + width: 100%; + justify-content: center; + align-items: center; +} ::deep .col-width-draghandle { diff --git a/src/Core/Components/Icons/CoreIcons.cs b/src/Core/Components/Icons/CoreIcons.cs index 194aa7baea..1e35feb870 100644 --- a/src/Core/Components/Icons/CoreIcons.cs +++ b/src/Core/Components/Icons/CoreIcons.cs @@ -107,9 +107,11 @@ internal static partial class Regular [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage] internal static partial class Size24 { + public class Add : Icon { public Add() : base("Add", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowCircleDown : Icon { public ArrowCircleDown() : base("ArrowCircleDown", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowCircleUp : Icon { public ArrowCircleUp() : base("ArrowCircleUp", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowDownload : Icon { public ArrowDownload() : base("ArrowDownload", IconVariant.Regular, IconSize.Size24, "") { } } + public class ArrowReset : Icon { public ArrowReset() : base("ArrowReset", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowSortDown : Icon { public ArrowSortDown() : base("ArrowSortDown", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowSortUp : Icon { public ArrowSortUp() : base("ArrowSortUp", IconVariant.Regular, IconSize.Size24, "") { } } public class ArrowUpload : Icon { public ArrowUpload() : base("ArrowUpload", IconVariant.Regular, IconSize.Size24, "") { } } @@ -127,6 +129,7 @@ public class Flash : Icon { public Flash() : base("Flash", IconVariant.Regular, public class Info : Icon { public Info() : base("Info", IconVariant.Regular, IconSize.Size24, "") { } } public class Line : Icon { public Line() : base("Line", IconVariant.Regular, IconSize.Size24, "") { } } public class MoreHorizontal : Icon { public MoreHorizontal() : base("MoreHorizontal", IconVariant.Regular, IconSize.Size24, "") { } } + public class MoreVertical : Icon { public MoreVertical() : base("MoreVertical", IconVariant.Regular, IconSize.Size24, "") { } } public class Navigation : Icon { public Navigation() : base("Navigation", IconVariant.Regular, IconSize.Size24, "") { } } public class Person : Icon { public Person() : base("Person", IconVariant.Regular, IconSize.Size24, "") { } } public class PresenceAvailable : Icon { public PresenceAvailable() : base("PresenceAvailable", IconVariant.Regular, IconSize.Size24, "") { } } @@ -135,6 +138,8 @@ public class PresenceOffline : Icon { public PresenceOffline() : base("PresenceO public class PresenceOof : Icon { public PresenceOof() : base("PresenceOof", IconVariant.Regular, IconSize.Size24, "") { } } public class PresenceUnknown : Icon { public PresenceUnknown() : base("PresenceUnknown", IconVariant.Regular, IconSize.Size24, "") { } } public class QuestionCircle : Icon { public QuestionCircle() : base("QuestionCircle", IconVariant.Regular, IconSize.Size24, "") { } } + public class Subtract : Icon { public Subtract() : base("Subtract", IconVariant.Regular, IconSize.Size24, "") { } } + public class TableResizeColumn : Icon { public TableResizeColumn() : base("TableResizeColumn", IconVariant.Regular, IconSize.Size24, "") { } } } } } From ec1f70592cb460e99c158c5fa43581f2c44f68a9 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 21 Jun 2024 15:14:37 +0200 Subject: [PATCH 02/11] More tweaks. Introduce ResizeType, formatting and styling --- ...crosoft.FluentUI.AspNetCore.Components.xml | 22 ++++++- .../DataGrid/Examples/DataGridTypical.razor | 4 +- .../Examples/DataGridTypical.razor.css | 12 +++- .../DataGrid/Columns/ColumnBase.razor | 64 ++++++++----------- .../DataGrid/Columns/ColumnResize.razor | 18 ------ .../DataGrid/Columns/FluentColumnResize.razor | 33 ++++++++++ ...e.razor.cs => FluentColumnResize.razor.cs} | 5 +- .../Components/DataGrid/FluentDataGrid.razor | 9 ++- .../DataGrid/FluentDataGrid.razor.cs | 3 +- .../DataGrid/FluentDataGrid.razor.css | 1 + .../DataGrid/FluentDataGridCell.razor.css | 1 + src/Core/Enums/DataGridResizeType.cs | 17 +++++ 12 files changed, 126 insertions(+), 63 deletions(-) delete mode 100644 src/Core/Components/DataGrid/Columns/ColumnResize.razor create mode 100644 src/Core/Components/DataGrid/Columns/FluentColumnResize.razor rename src/Core/Components/DataGrid/Columns/{ColumnResize.razor.cs => FluentColumnResize.razor.cs} (82%) create mode 100644 src/Core/Enums/DataGridResizeType.cs diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 0349ee0142..93b82723fb 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1281,6 +1281,11 @@ Constructs an instance of . + + + Gets a reference to the enclosing . + + Represents a sort order specification used within . @@ -1670,7 +1675,7 @@ manually. Size changes are not persisted. - + To comply with WCAG 2.2, a one-click option should be offered to change column widths. We providesuch an option through the ColumnOptions UI. This parameter allows you to enable or disable this resize UI. @@ -12402,6 +12407,21 @@ Cell is a row header. + + + The type of in a . + + + + + Resize datagrid columns by discreet steps of 10 pixels + + + + + Resize datagrid columns by exact pixel values + + The type of in a . diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 331dcad9d3..177c49457d 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -1,7 +1,7 @@ @inject DataSource Data - + Flag of @(context.Code) @@ -15,7 +15,7 @@ - +

@minMedals

@maxMedals

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css index ae1eb8b29e..2aa0928d6d 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css @@ -1,6 +1,14 @@ -/* Ensure all the flags are the same size, and centered */ +/* Ensure all the flags are the same size, and centered */ .flag { height: 1rem; margin: auto; border: 1px solid var(--neutral-layer-3); -} \ No newline at end of file +} +.search-box { + min-width: 250px; + width: 100%; +} + + .search-box fluent-search { + width: 100%; + } diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index a136c2e002..cdcf37d0a5 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -17,25 +17,15 @@ { string? tooltip = Tooltip ? Title : null; - @if ((ColumnOptions is not null || Grid.ResizableWithColumnOptions) && (Align == Align.Start || Align == Align.Center)) + @if (Align == Align.Start || Align == Align.Center) { - - @if (Grid.ResizableWithColumnOptions) - { - - } - else - { - if (Filtered.GetValueOrDefault()) - { - - } - else - { - - } - } - + @if (Grid.ResizeType is not null || ColumnOptions is not null) + { + + + + + } } if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) @@ -56,7 +46,13 @@ } } - + @if (Grid.ResizeType is not null && ColumnOptions is not null) + { + @if (Filtered.GetValueOrDefault()) + { + + } + } @@ -65,28 +61,24 @@ {
@Title
+ @if (Grid.ResizeType is not null && ColumnOptions is not null) + { + @if (Filtered.GetValueOrDefault()) + { + + } + }
} - @if ((ColumnOptions is not null || Grid.ResizableWithColumnOptions) && Align == Align.End) + @if (Align == Align.End) { - - @if (Grid.ResizableWithColumnOptions) - { + @if (Grid.ResizeType is not null || ColumnOptions is not null) + { + - } - else - { - if (Filtered.GetValueOrDefault()) - { - - } - else - { - - } - } - + + } } } } diff --git a/src/Core/Components/DataGrid/Columns/ColumnResize.razor b/src/Core/Components/DataGrid/Columns/ColumnResize.razor deleted file mode 100644 index 1514975d81..0000000000 --- a/src/Core/Components/DataGrid/Columns/ColumnResize.razor +++ /dev/null @@ -1,18 +0,0 @@ -@namespace Microsoft.FluentUI.AspNetCore.Components -@typeparam TGridItem - - - - @InternalGridContext.Grid.ResizeLabel - - - - - - - - - - - - diff --git a/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor b/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor new file mode 100644 index 0000000000..b35b0235b0 --- /dev/null +++ b/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor @@ -0,0 +1,33 @@ +@namespace Microsoft.FluentUI.AspNetCore.Components +@typeparam TGridItem + + + + + @if (ResizeType == DataGridResizeType.Discreet) + { + @Grid.ResizeLabel + + + + + + + + + + + + } + else + { + + + @Grid.ResizeLabel + + + Apply + + } + + diff --git a/src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs b/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs similarity index 82% rename from src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs rename to src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs index 8f24bad394..0c9b3d0f6d 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResize.razor.cs +++ b/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs @@ -2,8 +2,9 @@ using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure; namespace Microsoft.FluentUI.AspNetCore.Components; -public partial class ColumnResize +public partial class FluentColumnResize { + private string? _width; [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; /// @@ -14,6 +15,8 @@ public partial class ColumnResize [Parameter] public string? Label{ get; set; } = "Resize"; + [Parameter] + public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discreet; private async Task HandleShrinkAsync() { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 8f390270fd..23b9f0a809 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -151,9 +151,14 @@
@col.ColumnOptions - @if (ResizableWithColumnOptions) + @if (ResizeType is not null ) { - + @if (@col.ColumnOptions is not null) + { + + } + + } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 216b38ba7d..9bc05ff651 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -75,7 +75,7 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve /// Defualts to false. ///
[Parameter] - public bool ResizableWithColumnOptions { get; set; } = false; + public DataGridResizeType? ResizeType { get; set; } [Parameter] public string ResizeLabel { get; set; } = "Resize column"; @@ -441,6 +441,7 @@ public Task ShowColumnOptionsAsync(ColumnBase column) StateHasChanged(); return Task.CompletedTask; } + public void SetLoadingState(bool loading) { Loading = loading; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css index 6b5f253235..f1748c39a4 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.css @@ -19,6 +19,7 @@ fluent-data-grid { .col-options { position: absolute; + min-width: 250px; top: 2.2rem; background: var(--neutral-layer-2); border: 1px solid var(--neutral-layer-3); diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css index 0610a58026..264ba28b3d 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css @@ -54,6 +54,7 @@ fluent-data-grid-cell { .column-header.col-justify-end ::deep .col-title-text, .column-header.col-justify-right ::deep .col-title-text { text-align: end; + padding-left: 4px; } .column-header.col-justify-end ::deep .col-sort-button, .column-header.col-justify-right ::deep .col-sort-button { diff --git a/src/Core/Enums/DataGridResizeType.cs b/src/Core/Enums/DataGridResizeType.cs new file mode 100644 index 0000000000..c08487fc5c --- /dev/null +++ b/src/Core/Enums/DataGridResizeType.cs @@ -0,0 +1,17 @@ +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +/// The type of in a . +/// +public enum DataGridResizeType +{ + /// + /// Resize datagrid columns by discreet steps of 10 pixels + /// + Discreet, + + /// + /// Resize datagrid columns by exact pixel values + /// + Exact, +} From 8588bf7d941548dbcc5e5542bc6358a49f06bc1e Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 25 Jun 2024 22:37:48 +0200 Subject: [PATCH 03/11] - DataGrid: Implement ResizeType (a11y req) - DataGridTypical: Add filter for total, add resize option --- ...crosoft.FluentUI.AspNetCore.Components.xml | 4 +- .../DataGrid/Examples/DataGridTypical.razor | 16 ++++- ...Resize.razor => ColumnResizeOptions.razor} | 14 ++--- ....razor.cs => ColumnResizeOptions.razor.cs} | 31 ++++++++-- .../Components/DataGrid/FluentDataGrid.razor | 5 +- .../DataGrid/FluentDataGrid.razor.cs | 16 +++-- .../DataGrid/FluentDataGrid.razor.js | 60 +++++++++++++++++-- src/Core/Components/Icons/CoreIcons.cs | 1 + src/Core/Components/Slider/FluentSlider.razor | 5 +- src/Core/Enums/DataGridResizeType.cs | 2 +- 10 files changed, 126 insertions(+), 28 deletions(-) rename src/Core/Components/DataGrid/Columns/{FluentColumnResize.razor => ColumnResizeOptions.razor} (55%) rename src/Core/Components/DataGrid/Columns/{FluentColumnResize.razor.cs => ColumnResizeOptions.razor.cs} (56%) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 748271c0e0..a083db279c 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1281,7 +1281,7 @@ Constructs an instance of . - + Gets a reference to the enclosing . @@ -12431,7 +12431,7 @@ The type of in a . - + Resize datagrid columns by discreet steps of 10 pixels diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 177c49457d..7fc2aa7f9e 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -17,8 +17,20 @@ -

@minMedals

-

@maxMedals

+ + 0 + 50 + 100 + 150 + +

+ + 0 + 50 + 100 + 150 + + diff --git a/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor similarity index 55% rename from src/Core/Components/DataGrid/Columns/FluentColumnResize.razor rename to src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor index b35b0235b0..4dcd909159 100644 --- a/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor @@ -4,7 +4,7 @@ - @if (ResizeType == DataGridResizeType.Discreet) + @if (ResizeType == DataGridResizeType.Discrete) { @Grid.ResizeLabel @@ -21,12 +21,12 @@ } else { - - - @Grid.ResizeLabel - - - Apply + + + + + + } diff --git a/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs similarity index 56% rename from src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs rename to src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index 0c9b3d0f6d..a704445717 100644 --- a/src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -2,7 +2,7 @@ using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure; namespace Microsoft.FluentUI.AspNetCore.Components; -public partial class FluentColumnResize +public partial class ColumnResizeOptions { private string? _width; [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; @@ -12,24 +12,47 @@ public partial class FluentColumnResize /// public FluentDataGrid Grid => InternalGridContext.Grid; + [Parameter] + public int Column { get; set; } + [Parameter] public string? Label{ get; set; } = "Resize"; [Parameter] - public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discreet; + public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discrete; + + protected override void OnParametersSet() + { + if (Column == 0) + { + throw new ArgumentException("Column must have a value greater than zero"); + } + } private async Task HandleShrinkAsync() { - await Grid.SetColumnWidthAsync(-10); + await Grid.SetColumnWidthDiscreteAsync(Column, -10); } private async Task HandleGrowAsync() { - await Grid.SetColumnWidthAsync(10); + await Grid.SetColumnWidthDiscreteAsync(Column, 10); } private async Task HandleResetAsync() { await Grid.ResetColumnWidthsAsync(); } + + private async Task HandleColumnWidthAsync() + { + + var valid = int.TryParse(_width, out var result); + if (valid) + { + await Grid.SetColumnWidthExactAsync(Column, result); + } + } + + } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 23b9f0a809..63ddeede00 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -132,13 +132,14 @@ @for (var colIndex = 0; colIndex < _columns.Count; colIndex++) { var col = _columns[colIndex]; + var oneBasedIndex = colIndex + 1; string CellId = Identifier.NewId(); if (_sortByColumn == col) col.ShowSortIcon = true; else col.ShowSortIcon = false; - } - + } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 5c88e4b85a..d0c492f23b 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -667,21 +667,29 @@ public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args) if (args.Value == "-") { - await SetColumnWidthAsync(-10); + await SetColumnWidthDiscreteAsync(null, -10); } if (args.Value == "+") { // Resize column up - await SetColumnWidthAsync(10); + await SetColumnWidthDiscreteAsync(null, 10); } //return Task.CompletedTask; } - internal async Task SetColumnWidthAsync(float widthChange) + internal async Task SetColumnWidthDiscreteAsync(int? columnIndex, float widthChange) { if (_gridReference is not null && Module is not null) { - await Module.InvokeVoidAsync("resizeColumn", _gridReference, widthChange); + await Module.InvokeVoidAsync("resizeColumnDiscrete", _gridReference, columnIndex, widthChange); + } + } + + internal async Task SetColumnWidthExactAsync(int columnIndex, int width) + { + if (_gridReference is not null && Module is not null) + { + await Module.InvokeVoidAsync("resizeColumnExact", _gridReference, columnIndex, width); } } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index bcdd501527..32e47c79b3 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js @@ -157,18 +157,26 @@ export function resetColumnWidths(gridElement) { gridElement.gridTemplateColumns = initialColumnsWidths; } -export function resizeColumn(gridElement, change) { +export function resizeColumnDiscrete(gridElement, column, change) { let headers = gridElement.querySelectorAll('.column-header.resizable'); if (headers.length <= 0) { return } - if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) { - return; + let headerBeingResized; + if (!column) { + + if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) { + return; + } + headerBeingResized = document.activeElement; + } + else { + headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]'); } const columns = []; - let headerBeingResized = document.activeElement; + let min = 50; headers.forEach(header => { @@ -201,3 +209,47 @@ export function resizeColumn(gridElement, change) { .map(({ header }) => header.size) .join(' '); } + +export function resizeColumnExact(gridElement, column, width) { + + let headers = gridElement.querySelectorAll('.column-header.resizable'); + if (headers.length <= 0) { + return + } + + let headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]'); + if (!headerBeingResized) { + return; + } + const columns = []; + + let min = 50; + + headers.forEach(header => { + if (header === headerBeingResized) { + min = headerBeingResized.querySelector('.col-options-button') ? 75 : 50; + + const newWidth = width; + + header.size = Math.max(min, newWidth) + 'px'; + } + else { + if (header.size === undefined) { + if (header.clientWidth === undefined || header.clientWidth === 0) { + header.size = min + 'px'; + } else { + header.size = header.clientWidth + 'px'; + } + } + } + + columns.push({ header }); + }); + + gridElement.gridTemplateColumns = columns + .map(({ header }) => header.size) + .join(' '); + + gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true })); + gridElement.focus(); +} diff --git a/src/Core/Components/Icons/CoreIcons.cs b/src/Core/Components/Icons/CoreIcons.cs index 1e35feb870..c3ef033ead 100644 --- a/src/Core/Components/Icons/CoreIcons.cs +++ b/src/Core/Components/Icons/CoreIcons.cs @@ -93,6 +93,7 @@ internal static partial class Regular [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage] internal static partial class Size20 { + public class Checkmark : Icon { public Checkmark() : base("Checkmark", IconVariant.Regular, IconSize.Size24, "") { } } public class ChevronDoubleLeft : Icon { public ChevronDoubleLeft() : base("ChevronDoubleLeft", IconVariant.Regular, IconSize.Size20, "") { } } public class ChevronDoubleRight : Icon { public ChevronDoubleRight() : base("ChevronDoubleRight", IconVariant.Regular, IconSize.Size20, "") { } } public class Dismiss : Icon { public Dismiss() : base("Dismiss", IconVariant.Regular, IconSize.Size20, "") { } } diff --git a/src/Core/Components/Slider/FluentSlider.razor b/src/Core/Components/Slider/FluentSlider.razor index 8fa23a77c8..df948dddc2 100644 --- a/src/Core/Components/Slider/FluentSlider.razor +++ b/src/Core/Components/Slider/FluentSlider.razor @@ -13,9 +13,10 @@ orientation="@Orientation.ToAttributeValue()" mode="@Mode.ToAttributeValue()" id="@Id" - @bind-value="@CurrentValueAsString" + @bind-value=@CurrentValueAsString disabled="@Disabled" name=@Name - required=@Required> + required=@Required + @onsliderchange="@ChangeHandlerAsync"> @ChildContent diff --git a/src/Core/Enums/DataGridResizeType.cs b/src/Core/Enums/DataGridResizeType.cs index c08487fc5c..769deb7993 100644 --- a/src/Core/Enums/DataGridResizeType.cs +++ b/src/Core/Enums/DataGridResizeType.cs @@ -8,7 +8,7 @@ public enum DataGridResizeType /// /// Resize datagrid columns by discreet steps of 10 pixels /// - Discreet, + Discrete, /// /// Resize datagrid columns by exact pixel values From cc83fe5fcf1f7b3f252e57a03cdb7f81204cd4e5 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 25 Jun 2024 22:48:47 +0200 Subject: [PATCH 04/11] Fix code style --- src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor | 2 -- .../Components/DataGrid/Columns/ColumnResizeOptions.razor.cs | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor index 4dcd909159..ae703b6deb 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor @@ -2,8 +2,6 @@ @typeparam TGridItem - - @if (ResizeType == DataGridResizeType.Discrete) { @Grid.ResizeLabel diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index a704445717..4c4851ccf8 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -53,6 +53,4 @@ private async Task HandleColumnWidthAsync() await Grid.SetColumnWidthExactAsync(Column, result); } } - - } From 8996ee45d3cae334ef17b18a90adc8c3040e393a Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 27 Jun 2024 21:15:23 +0200 Subject: [PATCH 05/11] Fix scrip renaming in Tabs --- src/Core/Components/Tabs/FluentTabs.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Core/Components/Tabs/FluentTabs.razor.cs b/src/Core/Components/Tabs/FluentTabs.razor.cs index 0ba66b7376..75d496d4b1 100644 --- a/src/Core/Components/Tabs/FluentTabs.razor.cs +++ b/src/Core/Components/Tabs/FluentTabs.razor.cs @@ -238,7 +238,7 @@ public async Task OverflowRaisedAsync(string value) private async Task ResizeTabsForOverflowButtonAsync() { var horizontal = Orientation == Orientation.Horizontal; - await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowResized", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG); + await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowResized", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG); } /// From 99b59bc0ce40aa39ca2323b16f421e9ad0adddf9 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 27 Jun 2024 23:37:45 +0200 Subject: [PATCH 06/11] Finish work --- .../DataGrid/Examples/DataGridTypical.razor | 35 ++++++++-------- .../DataGrid/Columns/ColumnBase.razor | 40 +++++++++++++++++-- .../Columns/ColumnResizeOptions.razor | 32 ++++++++++----- .../Columns/ColumnResizeOptions.razor.cs | 13 +++++- .../Components/DataGrid/FluentDataGrid.razor | 2 +- .../DataGrid/FluentDataGrid.razor.cs | 2 +- src/Core/Components/Icons/CoreIcons.cs | 3 ++ .../Components/Slider/FluentSlider.razor.cs | 1 - 8 files changed, 96 insertions(+), 32 deletions(-) diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 7fc2aa7f9e..87f8069bbf 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -1,14 +1,16 @@ @inject DataSource Data +

To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact

+

Remove the parameter completely to get the original behavior

- + Flag of @(context.Code)
- +
@@ -17,20 +19,21 @@ - - 0 - 50 - 100 - 150 - -

- - 0 - 50 - 100 - 150 - - +
+ + 0 + 50 + 100 + 150 + +

+ + 0 + 50 + 100 + 150 + +
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index cdcf37d0a5..7f0b6ed0b6 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -19,13 +19,30 @@ @if (Align == Align.Start || Align == Align.Center) { - @if (Grid.ResizeType is not null || ColumnOptions is not null) + @if (Grid.ResizeType is not null) { } + else + { + @if (ColumnOptions is not null) + { + + @if (Filtered.GetValueOrDefault()) + { + + } + else + { + + } + + + } + } } if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) @@ -73,12 +90,29 @@ @if (Align == Align.End) { - @if (Grid.ResizeType is not null || ColumnOptions is not null) + @if (Grid.ResizeType is not null) { - + } + else + { + @if (ColumnOptions is not null) + { + + @if (Filtered.GetValueOrDefault()) + { + + } + else + { + + } + + + } + } } } } diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor index ae703b6deb..73a950b96b 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor @@ -4,26 +4,40 @@ @if (ResizeType == DataGridResizeType.Discrete) { - @Grid.ResizeLabel + @Label - + - + - + } else { - - - - - + +
+ +
+ + + + + + } diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index 4c4851ccf8..210f9e30db 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -1,4 +1,5 @@ using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure; namespace Microsoft.FluentUI.AspNetCore.Components; @@ -16,7 +17,7 @@ public partial class ColumnResizeOptions public int Column { get; set; } [Parameter] - public string? Label{ get; set; } = "Resize"; + public string? Label{ get; set; } [Parameter] public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discrete; @@ -27,6 +28,8 @@ protected override void OnParametersSet() { throw new ArgumentException("Column must have a value greater than zero"); } + + Label = Grid.ResizeLabel; } private async Task HandleShrinkAsync() @@ -53,4 +56,12 @@ private async Task HandleColumnWidthAsync() await Grid.SetColumnWidthExactAsync(Column, result); } } + + private async Task HandleColumnWidthKeyDownAsync(KeyboardEventArgs args) + { + if (args.Key == "Enter") + { + await HandleColumnWidthAsync(); + } + } } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 63ddeede00..6f1f1b41df 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -159,7 +159,7 @@ } - + } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index d0c492f23b..37c58c953a 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -78,7 +78,7 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve public DataGridResizeType? ResizeType { get; set; } [Parameter] - public string ResizeLabel { get; set; } = "Resize column"; + public string ResizeLabel { get; set; } = "Column width (in pixels)"; /// /// Optionally defines a value for @key on each rendered row. Typically this should be used to specify a diff --git a/src/Core/Components/Icons/CoreIcons.cs b/src/Core/Components/Icons/CoreIcons.cs index c0b4fd3163..1c577f3f39 100644 --- a/src/Core/Components/Icons/CoreIcons.cs +++ b/src/Core/Components/Icons/CoreIcons.cs @@ -94,6 +94,8 @@ internal static partial class Regular [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage] internal static partial class Size20 { + public class Add : Icon { public Add() : base("Add", IconVariant.Regular, IconSize.Size20, "") { } } + public class ArrowReset : Icon { public ArrowReset() : base("ArrowReset", IconVariant.Regular, IconSize.Size20, "") { } } public class Checkmark : Icon { public Checkmark() : base("Checkmark", IconVariant.Regular, IconSize.Size24, "") { } } public class ChevronDoubleLeft : Icon { public ChevronDoubleLeft() : base("ChevronDoubleLeft", IconVariant.Regular, IconSize.Size20, "") { } } public class ChevronDoubleRight : Icon { public ChevronDoubleRight() : base("ChevronDoubleRight", IconVariant.Regular, IconSize.Size20, "") { } } @@ -102,6 +104,7 @@ public class DismissCircle : Icon { public DismissCircle() : base("DismissCircle public class CheckboxUnchecked : Icon { public CheckboxUnchecked() : base("CheckboxUnchecked", IconVariant.Regular, IconSize.Size20, "") { } } public class RadioButton : Icon { public RadioButton() : base("RadioButton", IconVariant.Regular, IconSize.Size20, "") { } }; public class Star : Icon { public Star() : base("Star", IconVariant.Regular, IconSize.Size20, "") { } }; + public class Subtract : Icon { public Subtract() : base("Subtract", IconVariant.Regular, IconSize.Size20, "") { } } } } diff --git a/src/Core/Components/Slider/FluentSlider.razor.cs b/src/Core/Components/Slider/FluentSlider.razor.cs index 45316c012d..669d320a13 100644 --- a/src/Core/Components/Slider/FluentSlider.razor.cs +++ b/src/Core/Components/Slider/FluentSlider.razor.cs @@ -4,7 +4,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.FluentUI.AspNetCore.Components.Extensions; using Microsoft.FluentUI.AspNetCore.Components.Utilities; -using Microsoft.JSInterop; namespace Microsoft.FluentUI.AspNetCore.Components; From 1710ae90a80feb41e6db27cb6f1220b565fc84e0 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 28 Jun 2024 10:33:27 +0200 Subject: [PATCH 07/11] - Use ChevronDown for menu indicator - Use opacity for header icons to make them appear a bit softer --- .../Pages/DataGrid/Examples/DataGridTypical.razor | 4 ++-- .../Components/DataGrid/Columns/ColumnBase.razor | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 87f8069bbf..870280611f 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -3,14 +3,14 @@

To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact

Remove the parameter completely to get the original behavior

- + Flag of @(context.Code)
- +
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 7f0b6ed0b6..2c8604bd03 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -22,7 +22,7 @@ @if (Grid.ResizeType is not null) { - + } @@ -37,7 +37,7 @@ } else { - + } @@ -56,18 +56,18 @@ { if (Grid.SortByAscending == true) { - + } else { - + } } @if (Grid.ResizeType is not null && ColumnOptions is not null) { @if (Filtered.GetValueOrDefault()) { - + } } @@ -82,7 +82,7 @@ { @if (Filtered.GetValueOrDefault()) { - + } } @@ -93,7 +93,7 @@ @if (Grid.ResizeType is not null) { - + } else From 5d485056a4cec15c027b8dbea72aaa4eb69608d4 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 28 Jun 2024 16:56:26 +0200 Subject: [PATCH 08/11] Process review comments --- ...crosoft.FluentUI.AspNetCore.Components.xml | 21 ++++++++++++++++--- .../DataGrid/Examples/DataGridTypical.razor | 2 +- .../DataGrid/Columns/ColumnBase.razor | 7 +++---- .../Columns/ColumnResizeOptions.razor | 19 +++++------------ .../Columns/ColumnResizeOptions.razor.cs | 19 +++++++++++++++-- .../DataGrid/FluentDataGrid.razor.cs | 7 ++++--- 6 files changed, 48 insertions(+), 27 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 3dcd83a376..6843d82418 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1286,6 +1286,20 @@ Gets a reference to the enclosing . + + + Gets or sets the index of the Column to act upon + + + + + + Gets or sets the type of resize to perform + Discrete: resize by a 10 pixels at a time + Exact: resize to the exact width specified (in pixels) + The display of this component is dependant on a ResizeType being set + + Represents a sort order specification used within . @@ -1683,9 +1697,10 @@ - To comply with WCAG 2.2, a one-click option should be offered to change column widths. We providesuch an option through the - ColumnOptions UI. This parameter allows you to enable or disable this resize UI. - Defualts to false. + To comply with WCAG 2.2, a one-click option should be offered to change column widths. We provide such an option through the + ColumnOptions UI. This parameter allows you to enable or disable this resize UI.Enable it by setting the type of resize to perform + Discrete: resize by a 10 pixels at a time + Exact: resize to the exact width specified (in pixels) diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 870280611f..cd62380242 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -3,7 +3,7 @@

To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact

Remove the parameter completely to get the original behavior

- + Flag of @(context.Code) diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 2c8604bd03..fc30d388cc 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -22,8 +22,7 @@ @if (Grid.ResizeType is not null) { - - + } else @@ -37,7 +36,7 @@ } else { - + } @@ -93,7 +92,7 @@ @if (Grid.ResizeType is not null) { - + } else diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor index 73a950b96b..dfa0e0761d 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor @@ -7,15 +7,9 @@ @Label - - - - - - - - - + + + } else { @@ -32,13 +26,10 @@ AutoComplete="off" @onkeydown="@HandleColumnWidthKeyDownAsync" /> - + - - - - + } diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index 210f9e30db..b4b7c665b3 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -6,19 +6,34 @@ namespace Microsoft.FluentUI.AspNetCore.Components; public partial class ColumnResizeOptions { private string? _width; - [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; + + [CascadingParameter] + internal InternalGridContext InternalGridContext { get; set; } = default!; /// /// Gets a reference to the enclosing . /// - public FluentDataGrid Grid => InternalGridContext.Grid; + private FluentDataGrid Grid => InternalGridContext.Grid; + + /// + /// Gets or sets the index of the Column to act upon + /// [Parameter] public int Column { get; set; } + /// + /// Gets or sets the label to display above the resize options + /// + /// Gets or sets the type of resize to perform + /// Discrete: resize by a 10 pixels at a time + /// Exact: resize to the exact width specified (in pixels) + /// The display of this component is dependant on a ResizeType being set + /// [Parameter] public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discrete; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 37c58c953a..f756476f05 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -70,9 +70,10 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve [Parameter] public bool ResizableColumns { get; set; } /// - /// To comply with WCAG 2.2, a one-click option should be offered to change column widths. We providesuch an option through the - /// ColumnOptions UI. This parameter allows you to enable or disable this resize UI. - /// Defualts to false. + /// To comply with WCAG 2.2, a one-click option should be offered to change column widths. We provide such an option through the + /// ColumnOptions UI. This parameter allows you to enable or disable this resize UI.Enable it by setting the type of resize to perform + /// Discrete: resize by a 10 pixels at a time + /// Exact: resize to the exact width specified (in pixels) /// [Parameter] public DataGridResizeType? ResizeType { get; set; } From aec7a767c09362689e8b92bbfd84e4be05b46947 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 28 Jun 2024 17:30:04 +0200 Subject: [PATCH 09/11] Fix comment --- .../Shared/Microsoft.FluentUI.AspNetCore.Components.xml | 6 +++++- .../DataGrid/Columns/ColumnResizeOptions.razor.cs | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 6843d82418..7620808ce9 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1291,7 +1291,11 @@ Gets or sets the index of the Column to act upon - + + + Gets or sets the label to display above the resize options + + Gets or sets the type of resize to perform diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index b4b7c665b3..b86ed9e74a 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -24,7 +24,7 @@ public partial class ColumnResizeOptions /// /// Gets or sets the label to display above the resize options - /// [Parameter] public string? Label{ get; set; } From 739560f80d0e14f2932f8d5b3d84e8999aa29178 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 28 Jun 2024 17:34:41 +0200 Subject: [PATCH 10/11] Fix multiple blank lines --- .../Components/DataGrid/Columns/ColumnResizeOptions.razor.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs index b86ed9e74a..fbe7350ac0 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs @@ -15,7 +15,6 @@ public partial class ColumnResizeOptions /// private FluentDataGrid Grid => InternalGridContext.Grid; - /// /// Gets or sets the index of the Column to act upon /// From 78c8c3682ca88eb42dd93831b24897ff5e984f89 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sun, 30 Jun 2024 10:25:00 +0200 Subject: [PATCH 11/11] Update docs --- ...crosoft.FluentUI.AspNetCore.Components.xml | 3 ++ .../Shared/Pages/Tooltip/TooltipPage.razor | 43 +++++++++++-------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 7620808ce9..b0c282922d 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -5481,6 +5481,9 @@ + + + diff --git a/examples/Demo/Shared/Pages/Tooltip/TooltipPage.razor b/examples/Demo/Shared/Pages/Tooltip/TooltipPage.razor index 127c816d17..c43c44164b 100644 --- a/examples/Demo/Shared/Pages/Tooltip/TooltipPage.razor +++ b/examples/Demo/Shared/Pages/Tooltip/TooltipPage.razor @@ -15,18 +15,25 @@

Using Tooltip Service Provider

+

+ We advise you to always use this service when working with tooltips so all definitions will be generated with global options + and will be written at the end of the HTML page to support different z-index levels. +

+

+ Also, the later described option on having a tooltip appear on a click event will only work when using the Tooltip Service Provider. +

+

-In the Program.cs, inject the Tooltip service with global options. -You can also use the Services.AddFluentUIComponents method to register -all required FluentUI services, including this one. + In the Program.cs, inject the Tooltip service with global options. + You can also use the Services.AddFluentUIComponents method to register + all required FluentUI services, including this one. +

builder.Services.AddScoped<ITooltipService, TooltipService>(); -
-At the end of your MainLayout.razor page, include the provider: +

+ At the end of your MainLayout.razor page, include the provider: +

<FluentTooltipProvider /> -
-With this provider, all tooltip definitions will be generated with these global options -and will be written at the end of the HTML page to support the different z-index levels. -
+

For the <FluentTooltipProvider/> to work properly, it needs interactivity! If you are using "per page" interactivity, make sure to add a @@rendermode to @@ -35,15 +42,15 @@ and will be written at the end of the HTML page to support the different z-index


Example - + Tooltip without service - Example of tooltip - -
- - Tooltip using TooltipService - Example of tooltip - + Example of tooltip + +
+ + Tooltip using TooltipService + Example of tooltip +

@@ -59,7 +66,7 @@ and will be written at the end of the HTML page to support the different z-index - Hover one of the buttons to have a tooltip appear on hover at the position mentioned.
+ Hover one of the buttons to have a tooltip appear on hover at the position mentioned.
Unlike the other tooltip examples, these contain the HideTooltipOnCursorLeave attribute. which hides the tooltip when the cursor leaves (i.e. not hovering) its anchor (even when the cursor hovers the tooltip itself).