Skip to content
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

Jump to bottom

[FluentAutocomplete] Update some usabilities #725

Merged
merged 2 commits into from
Sep 13, 2023
Merged

[FluentAutocomplete] Update some usabilities #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ed9fab
Add MaximumSelectedOptionsMessage, a Search icon and a Dismiss icon
dvoituron Sep 13, 2023
632dd70
Update Unit Tests
dvoituron Sep 13, 2023
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
7 changes: 7 additions & 0 deletions examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,20 @@
Name="@($"{context.FirstName} {context.LastName}")" />
</OptionTemplate>

@* Template used when the maximum number of selected items (MaximumSelectedOptions) has been reached *@
<MaximumSelectedOptionsMessage>
The maximum number of selected items has been reached.
</MaximumSelectedOptionsMessage>

@* Content display at the top of the the Popup area *@
<HeaderContent>
<FluentLabel Color="Color.Accent"
Style="padding: 8px; font-size: 11px; border-bottom: 1px solid var(--neutral-fill-stealth-hover);">
Suggested contacts
</FluentLabel>
</HeaderContent>

@* Content display at the bottom of the the Popup area *@
<FooterContent>
@if (!context.Any())
{
Expand Down
1 change: 1 addition & 0 deletions src/Core/Components/Icons/CoreIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ public class Dismiss : Icon { public Dismiss() : base("Dismiss", IconVariant.Reg
public class DismissCircle : Icon { public DismissCircle() : base("DismissCircle", IconVariant.Regular, IconSize.Size16, "<path d=\"M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3ZM5.84 5.97l.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.3l1.4-1.4a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L8.7 8l1.4 1.4c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.7l-1.4 1.4a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L7.3 8 5.9 6.6a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z\"/>") { } }
public class Info : Icon { public Info() : base("Info", IconVariant.Regular, IconSize.Size16, "<path d=\"M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z\"/>") { } }
public class Warning : Icon { public Warning() : base("Warning", IconVariant.Regular, IconSize.Size16, "<path d=\"M8.75 10.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 8a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-1 0V8Zm-.6-5.36c.49-.86 1.71-.86 2.2 0l4.74 8.5c.47.83-.14 1.86-1.09 1.86h-9.5a1.25 1.25 0 0 1-1.1-1.86l4.76-8.5Zm1.32.49a.25.25 0 0 0-.44 0l-4.75 8.5c-.1.16.03.37.22.37h9.5c.2 0 .31-.2.22-.37l-4.75-8.5Z\"/>") { } }
public class Search : Icon { public Search() : base("Search", IconVariant.Filled, IconSize.Size16, "<path d=\"M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z\"/>") { } }
}
}

Expand Down
64 changes: 49 additions & 15 deletions src/Core/Components/List/FluentAutocomplete.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
id="@Id"
appearance="@Appearance.ToAttributeValue()"
disabled="@Disabled"
placeholder="@Placeholder"
placeholder="@(this.SelectedOptions?.Any() == false ? Placeholder : string.Empty)"
aria-label="@(String.IsNullOrWhiteSpace(Title) ? Placeholder : Title)"
aria-expanded="@(IsMultiSelectOpened ? "true" : "false")"
aria-controls="@(IsMultiSelectOpened ? IdScroll : string.Empty)"
current-value="@_valueText"
@onclick="@OnDropDownExpandedAsync"
@oninput="@InputHandlerAsync"
@onkeydown="@KeyDownHandlerAsync"
@onkeydown="@KeyDownHandlerAsync"
@onfocusout="@(e => { IsReachedMaxItems = false; })"
style="@ComponentWidth">
@* Selected Items *@
@if (this.SelectedOptions?.Any() == true)
Expand Down Expand Up @@ -54,9 +55,27 @@
&nbsp;
</fluent-horizontal-scroll>
}
<svg width="12" height="12" style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" slot="end" @onclick="@OnDropDownExpandedAsync">
<path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"></path>
</svg>
@if (!Disabled)
{
if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(_valueText))
{
<FluentIcon Value="@(new CoreIcons.Regular.Size16.Dismiss())"
Width="12px"
Style="cursor: pointer;"
Slot="end"
Title="Clear"
OnClick="@OnClearAsync" />
}
else
{
<FluentIcon Value="@(new CoreIcons.Regular.Size16.Search())"
Width="16px"
Style="cursor: pointer;"
Slot="end"
Title="Search"
OnClick="@OnDropDownExpandedAsync" />
}
}
</fluent-text-field>

@* List of available items *@
Expand All @@ -66,12 +85,12 @@
<FluentAnchoredRegion Anchor="@Id"
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Bottom"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);"
Shadow="ElevationShadow.Flyout">
@if (HeaderContent != null)
{
@HeaderContent(Items ?? Array.Empty<TOption>());
@HeaderContent(Items ?? Array.Empty<TOption>())
}

<div role="listbox" style="@ListStyleValue" aria-label="List">
Expand All @@ -82,13 +101,13 @@
{
var value = GetOptionValue(item);
<FluentOption TOption="TOption"
Value="@value"
Style="@OptionStyle"
Class="@OptionClass"
Selected="@GetOptionSelected(item)"
Disabled="@(GetOptionDisabled(item) ?? false)"
OnSelect="@OnSelectCallback(item)"
selectable="@(value == selectableItem)">
Value="@value"
Style="@OptionStyle"
Class="@OptionClass"
Selected="@GetOptionSelected(item)"
Disabled="@(GetOptionDisabled(item) ?? false)"
OnSelect="@OnSelectCallback(item)"
selectable="@(value == selectableItem)">
@if (OptionTemplate == null)
{
@GetOptionText(item)
Expand All @@ -104,9 +123,24 @@

@if (FooterContent != null)
{
@FooterContent(Items ?? Array.Empty<TOption>());
@FooterContent(Items ?? Array.Empty<TOption>())
;
}
</FluentAnchoredRegion>
}

@* Tooltip *@
else if (IsReachedMaxItems && MaximumSelectedOptionsMessage != null)
{
<FluentOverlay OnClose="@(e => IsReachedMaxItems = false)" Visible="true" Transparent="true" FullScreen="true" />
<FluentAnchoredRegion Anchor="@Id"
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating); padding: 10px;"
Shadow="ElevationShadow.Flyout">
@MaximumSelectedOptionsMessage
</FluentAnchoredRegion>
}
</div>
</CascadingValue>
29 changes: 26 additions & 3 deletions src/Core/Components/List/FluentAutocomplete.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using System.ComponentModel;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Fast.Components.FluentUI.Utilities;
using Microsoft.JSInterop;
Expand All @@ -18,6 +19,7 @@ public FluentAutocomplete()
{
Multiple = true;
Width = "100%";
Id = Identifier.NewId();
}

/// <summary />
Expand Down Expand Up @@ -87,11 +89,19 @@ public override bool Multiple
public int MaximumOptionsSearch { get; set; } = 9;

/// <summary>
/// Gets or sets the maximum number of options (items) selected. Exceeding this value, the user must delete some elements in order to select new ones.
/// Gets or sets the maximum number of options (items) selected.
/// Exceeding this value, the user must delete some elements in order to select new ones.
/// See the <see cref="MaximumSelectedOptionsMessage"/>.
/// </summary>
[Parameter]
public int? MaximumSelectedOptions { get; set; }

/// <summary>
/// Gets or sets the message displayed when the <see cref="MaximumSelectedOptions"/> is reached.
/// </summary>
[Parameter]
public RenderFragment? MaximumSelectedOptionsMessage { get; set; }

/// <summary>
/// Template for the <see cref="ListComponentBase{TOption}.Items"/> items.
/// </summary>
Expand Down Expand Up @@ -151,7 +161,10 @@ private string ComponentWidth
private string IdScroll => $"{Id}-scroll";

/// <summary />
private bool IsMultiSelectOpened { get; set; }
private bool IsMultiSelectOpened { get; set; } = false;

/// <summary />
private bool IsReachedMaxItems { get; set; } = false;

/// <summary />
private TOption? SelectableItem { get; set; }
Expand All @@ -163,9 +176,11 @@ protected virtual async Task InputHandlerAsync(ChangeEventArgs e)

if (MaximumSelectedOptions > 0 && SelectedOptions?.Count() >= MaximumSelectedOptions)
{
IsReachedMaxItems = true;
return;
}

IsReachedMaxItems = false;
IsMultiSelectOpened = true;

var args = new OptionsSearchEventArgs<TOption>()
Expand Down Expand Up @@ -285,6 +300,14 @@ protected virtual Task OnDropDownExpandedAsync()
});
}

/// <summary />
protected virtual Task OnClearAsync()
{
RemoveAllSelectedItems();
_valueText = string.Empty;
return RaiseChangedEventsAsync();
}

/// <summary />
protected override async Task OnSelectedItemChangedHandlerAsync(TOption? item)
{
Expand Down
8 changes: 8 additions & 0 deletions src/Core/Components/List/ListComponentBase.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,14 @@ protected virtual bool RemoveSelectedItem(TOption? item)
return _selectedOptions.Remove(item);
}

/// <summary />
protected virtual bool RemoveAllSelectedItems()
{
_selectedOptions = new();
return true;
}


/// <summary />
protected virtual void AddSelectedItem(TOption? item)
{
Expand Down
11 changes: 6 additions & 5 deletions tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Empty.verified.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@

<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-90q402ec2b="">
<fluent-text-field role="combobox" id="xxx" aria-expanded="false" aria-controls="" current-value="" blazor:onclick="1" blazor:oninput="2" blazor:onkeydown="3" style="width: 100%; min-width: 100%;" b-90q402ec2b="">
<svg width="12" height="12" style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" slot="end" blazor:onclick="4" b-90q402ec2b="">
<path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z" b-90q402ec2b=""></path>
</svg>
</fluent-text-field>
<fluent-text-field role="combobox" id="xxx" placeholder="" aria-expanded="false" aria-controls="" current-value="" blazor:onclick="1" blazor:oninput="2" blazor:onkeydown="3" blazor:onfocusout="4" style="width: 100%; min-width: 100%;" b-90q402ec2b="">
<svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer; cursor: pointer;;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="5">
<title>Search</title>
<path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
</svg>
</fluent-text-field>
</div>
21 changes: 11 additions & 10 deletions tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowDown.verified.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@

<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-90q402ec2b="">
<fluent-text-field role="combobox" id="xxx" aria-expanded="true" aria-controls="myComponent-scroll" current-value="" blazor:onclick="1" blazor:oninput="2" blazor:onkeydown="3" style="width: 100%; min-width: 100%;" b-90q402ec2b="">
<fluent-text-field role="combobox" id="xxx" placeholder="" aria-expanded="true" aria-controls="myComponent-scroll" current-value="" blazor:onclick="1" blazor:oninput="2" blazor:onkeydown="3" blazor:onfocusout="4" style="width: 100%; min-width: 100%;" b-90q402ec2b="">
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-90q402ec2b="">
<fluent-flipper onclick="document.getElementById('myComponent-scroll').scrollToPrevious()" slot="previous-flipper" aria-hidden="false" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-90q402ec2b=""></fluent-flipper>
<fluent-flipper onclick="document.getElementById('myComponent-scroll').scrollToNext()" slot="next-flipper" aria-hidden="false" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-90q402ec2b=""></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" blazor:onclick="5" aria-label="Customer { Id = 1, Name = Denis Voituron }" blazor:elementreference="">
<div style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;;">
Customer { Id = 1, Name = Denis Voituron }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="7">
Customer { Id = 1, Name = Denis Voituron }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8">
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</div>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" blazor:onclick="6" aria-label="Customer { Id = 2, Name = Vincent Baaij }" blazor:elementreference="">
<div style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;;">
Customer { Id = 2, Name = Vincent Baaij }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8">
Customer { Id = 2, Name = Vincent Baaij }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="9">
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</div>
</fluent-badge>
</fluent-horizontal-scroll>
<svg width="12" height="12" style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" slot="end" blazor:onclick="4" b-90q402ec2b="">
<path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z" b-90q402ec2b=""></path>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; cursor: pointer;;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="7">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="9" blazor:oncontextmenu="10" blazor:oncontextmenu:preventdefault="" b-rbsnh2nzwy="">
<div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="10" blazor:oncontextmenu="11" blazor:oncontextmenu:preventdefault="" b-rbsnh2nzwy="">
<div style="display: flex; align-items:center; justify-content: center; width: 100%; heigth: 100%" b-rbsnh2nzwy=""></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-z9rtvm3m6a="" blazor:elementreference="">
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-z9rtvm3m6a="" blazor:elementreference="">
<div style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);; z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout);" b-z9rtvm3m6a="">
<div role="listbox" style="width: 100%;" aria-label="List" b-90q402ec2b="">
<fluent-option id="xxx" value="Customer { Id = 1, Name = Denis Voituron }" selected="" blazor:onclick="11" blazor:elementreference="">Customer { Id = 1, Name = Denis Voituron }</fluent-option>
<fluent-option id="xxx" value="Customer { Id = 2, Name = Vincent Baaij }" selected="" blazor:onclick="12" selectable="" blazor:elementreference="">Customer { Id = 2, Name = Vincent Baaij }</fluent-option>
<fluent-option id="xxx" value="Customer { Id = 3, Name = Bill gates }" blazor:onclick="13" blazor:elementreference="">Customer { Id = 3, Name = Bill gates }</fluent-option>
<fluent-option id="xxx" value="Customer { Id = 1, Name = Denis Voituron }" selected="" blazor:onclick="12" blazor:elementreference="">Customer { Id = 1, Name = Denis Voituron }</fluent-option>
<fluent-option id="xxx" value="Customer { Id = 2, Name = Vincent Baaij }" selected="" blazor:onclick="13" selectable="" blazor:elementreference="">Customer { Id = 2, Name = Vincent Baaij }</fluent-option>
<fluent-option id="xxx" value="Customer { Id = 3, Name = Bill gates }" blazor:onclick="14" blazor:elementreference="">Customer { Id = 3, Name = Bill gates }</fluent-option>
</div>
</div>
</fluent-anchored-region>
Expand Down
Loading