Skip to content

[DataGrid] Add parameter to provide labels to resize UI #2585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 5 commits into from
Aug 27, 2024
Merged

[DataGrid] Add parameter to provide labels to resize UI #2585

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d78c9b3
Add resize buttons aria labels
vnbaaij Aug 26, 2024
5b2c47d
Merge branch 'dev' into users/vnbaaij/fix-issue-#2507
vnbaaij Aug 26, 2024
e6b9435
Use a record to group resize aria labels. ResizeLabel has been remove…
vnbaaij Aug 27, 2024
d506b9b
Adjust example to new 2024 dataset
vnbaaij Aug 27, 2024
402a061
merge example
vnbaaij Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1794,6 +1794,36 @@
Exact: resize to the exact width specified (in pixels)
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeLabel">
<summary>
Label used for the text field in the resize options dialog.
Defaults to "Column width (in pixels)".
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeGrowAriaLabel">
<summary>
Aria label for the resize grow button in the resize options dialog.
Defaults to "Grow column width".
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeShrinkAriaLabel">
<summary>
Aria label for the resize shrink button in the resize options dialog.
Defaults to "Shrink column width".
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeResetAriaLabel">
<summary>
Aria label for the resize reset button in the resize options dialog.
Defaults to "Reset column width".
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeSubmitAriaLabel">
<summary>
Aria label for the resize submit button in the resize options dialog.
Defaults to "Set column width".
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemKey">
<summary>
Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
Expand Down
10 changes: 5 additions & 5 deletions src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
<FluentLabel>@Label</FluentLabel>

<FluentSpacer />
<FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" />
<FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" />
<FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" />
<FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" aria-label="@Grid.ResizeShrinkAriaLabel" />
<FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" aria-label="@Grid.ResizeGrowAriaLabel" />
<FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@Grid.ResizeResetAriaLabel" />
}
else
{
Expand All @@ -26,10 +26,10 @@
AutoComplete="off"
@onkeydown="@HandleColumnWidthKeyDownAsync" />
</div>
<FluentButton Style="height: 30px;" OnClick="@HandleColumnWidthAsync" Appearance="@Appearance.Accent">
<FluentButton Style="height: 30px;" OnClick="@HandleColumnWidthAsync" Appearance="@Appearance.Accent" aria-label="@Grid.ResizeSubmitAriaLabel">
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Checkmark())" Color="@Color.Fill" />
</FluentButton>
<FluentButton Style="height: 30px;" OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" />
<FluentButton Style="height: 30px;" OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@Grid.ResizeResetAriaLabel" />
</FluentStack>
}
</FluentStack>
Expand Down
32 changes: 32 additions & 0 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,41 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
[Parameter]
public DataGridResizeType? ResizeType { get; set; }

/// <summary>
/// Label used for the text field in the resize options dialog.
/// Defaults to "Column width (in pixels)".
/// </summary>
[Parameter]
public string ResizeLabel { get; set; } = "Column width (in pixels)";

/// <summary>
Copy link
Collaborator

@dvoituron dvoituron Aug 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid these multiple parameters, and group all this information in a single object, how about using something like this :

public record ResizeAria
{
    public string? GrowLabel { get; set; }
    public string? ShrinkLabel { get; set; }
    public string? ResetLabel { get; set; }
    public string? SubmitLabel { get; set; }

    public static ResizeAria Default => new ResizeAria();
}

The usage will be:

<FluentDataGrid ResizeAria="@(ResizeAria.Default with { GrowLabel = "...", ShrinkLabel = "..." } )">

Do you find it too complex ?

Copy link
Collaborator Author

@vnbaaij vnbaaij Aug 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking about something like that as well (but then with a dictionary of some sorts)

Copy link
Collaborator Author

@vnbaaij vnbaaij Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A record has been added. See updates in PR message above

Copy link
Collaborator

@dvoituron dvoituron Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I find the syntax for defining the record clearer using property declarations (as above). And using your syntax, we don't have XML comments / property documentation.

  2. Why did you put this class in the Infrastructure folder and not in the DataGrid/Columns folder?

  3. I think we need a static property Default to create an instance of this object. Thus, the developer can initialize the parameter using ResizeAria.Default with { GrowLabel = “ ...”, ShrinkLabel = “ ...” }

  4. ⚠️ You can't force RPs to merge: without explicit approval, we can continue discussing.

Copy link
Collaborator Author

@vnbaaij vnbaaij Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. By doing it this way, the developer does not have to do anything to use the default values. I think we can put the comments about the fields of the record in the parameter declaration in the Grid
  2. Yes, that is a mistake. Will move them
  3. I could not get your variant to work with implemented defaults. I don't want to force the developer to have to supply values in the default case I figured it out. Will change it in the other PR
  4. I know but I wanted this in because (and was too impatient). I need it in the other grid thing I'm working on (PR inbound) (mea culpa). We can still discuss and change because we are the end bosses.

/// Aria label for the resize grow button in the resize options dialog.
/// Defaults to "Grow column width".
/// </summary>
[Parameter]
public string ResizeGrowAriaLabel { get; set; } = "Grow column width";

/// <summary>
/// Aria label for the resize shrink button in the resize options dialog.
/// Defaults to "Shrink column width".
/// </summary>
[Parameter]
public string ResizeShrinkAriaLabel { get; set; } = "Shrink column width";

/// <summary>
/// Aria label for the resize reset button in the resize options dialog.
/// Defaults to "Reset column width".
/// </summary>
[Parameter]
public string ResizeResetAriaLabel { get; set; } = "Reset column widths";

/// <summary>
/// Aria label for the resize submit button in the resize options dialog.
/// Defaults to "Set column width".
/// </summary>
[Parameter]
public string ResizeSubmitAriaLabel { get; set; } = "Set column widths";

/// <summary>
/// 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.
Expand Down