Skip to content

[AppBar] Make OnClick close popover #4518

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 6 commits into from
Feb 13, 2026
Merged

[AppBar] Make OnClick close popover #4518

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
052fdb9
Make OnCLick close popover
vnbaaij Feb 13, 2026
9b63345
Only close the popover when in overflowed state
vnbaaij Feb 13, 2026
356780a
Fix spacing
vnbaaij Feb 13, 2026
add3019
Fix spacing?
vnbaaij Feb 13, 2026
3e49dfc
More spacing fixes
vnbaaij Feb 13, 2026
5a94641
Even moe spacing ifixes
vnbaaij Feb 13, 2026
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
114 changes: 58 additions & 56 deletions examples/Demo/Shared/Pages/AppBar/Examples/AppBarClick.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,74 @@
@inject IDialogService DialogService

<FluentStack Orientation="Orientation.Vertical" Style="height: 330px;">
<FluentAppBar Style="height: 100%;">
<FluentAppBarItem Href="/"
Match="NavLinkMatch.All"
IconRest="HomeIcon()"
IconActive="HomeIcon(active: true)"
Text="Home"
OnClick="HandleOnClick" />
<FluentAppBarItem Href="/AppBar"
IconRest="AppBarIcon()"
IconActive="AppBarIcon(active: true)"
Text="AppBar"
OnClick="HandleOnClick" />
<FluentAppBarItem IconRest="WhatsNewIcon()"
IconActive="WhatsNewIcon(active: true)"
Text="What's New"
OnClick="ShowSuccessAsync" />
<FluentAppBarItem Href="@(null)"
IconRest="IconsIcon()"
IconActive="IconsIcon(active: true)"
Text="Icons"
OnClick="ShowWarningAsync" />
<FluentAppBarItem Href="/Dialog"
IconRest="DialogIcon()"
IconActive="DialogIcon(active: true)"
Text="Dialog"
OnClick="HandleOnClick" />
</FluentAppBar>
<div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 86px; padding: 10px;">
<FluentAppBar Style="height: 100%; background-color: var(--neutral-layer-2);">
<FluentAppBarItem Href="/"
Match="NavLinkMatch.All"
IconRest="HomeIcon()"
IconActive="HomeIcon(active: true)"
Text="Home"
OnClick="HandleOnClick" />
<FluentAppBarItem Href="/AppBar"
IconRest="AppBarIcon()"
IconActive="AppBarIcon(active: true)"
Text="AppBar"
OnClick="HandleOnClick" />
<FluentAppBarItem IconRest="WhatsNewIcon()"
IconActive="WhatsNewIcon(active: true)"
Text="What's New"
OnClick="ShowSuccessAsync" />
<FluentAppBarItem Href="@(null)"
IconRest="IconsIcon()"
IconActive="IconsIcon(active: true)"
Text="Icons"
OnClick="HandleOnClick" />
<FluentAppBarItem Href="/Dialog"
IconRest="DialogIcon()"
IconActive="DialogIcon(active: true)"
Text="Dialog"
OnClick="HandleOnClick" />
</FluentAppBar>
</div>
</FluentStack>

@code {
private static Icon HomeIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Home()
: new Icons.Regular.Size24.Home();
private static Icon HomeIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Home()
: new Icons.Regular.Size24.Home();

private static Icon AppBarIcon(bool active = false) =>
active ? new Icons.Filled.Size24.AppsList()
: new Icons.Regular.Size24.AppsList();
private static Icon AppBarIcon(bool active = false) =>
active ? new Icons.Filled.Size24.AppsList()
: new Icons.Regular.Size24.AppsList();

private static Icon WhatsNewIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Info()
: new Icons.Regular.Size24.Info();
private static Icon WhatsNewIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Info()
: new Icons.Regular.Size24.Info();

private static Icon IconsIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Symbols()
: new Icons.Regular.Size24.Symbols();
private static Icon IconsIcon(bool active = false) =>
active ? new Icons.Filled.Size24.Symbols()
: new Icons.Regular.Size24.Symbols();

private static Icon DialogIcon(bool active = false) =>
active ? new Icons.Filled.Size24.AppGeneric()
: new Icons.Regular.Size24.AppGeneric();
private static Icon DialogIcon(bool active = false) =>
active ? new Icons.Filled.Size24.AppGeneric()
: new Icons.Regular.Size24.AppGeneric();


private void HandleOnClick(IAppBarItem item)
{
private void HandleOnClick(IAppBarItem item)
{

DemoLogger.WriteLine($"Clicked {item.Text}!");
}
DemoLogger.WriteLine($"Clicked {item.Text}!");
}

private async Task ShowSuccessAsync(IAppBarItem item)
{
var dialog = await DialogService.ShowSuccessAsync($"You clicked {item.Text}");
var result = await dialog.Result;
}
private async Task ShowSuccessAsync(IAppBarItem item)
{
var dialog = await DialogService.ShowSuccessAsync($"You clicked {item.Text}");
var result = await dialog.Result;
}

private async Task ShowWarningAsync(IAppBarItem item)
{
var dialog = await DialogService.ShowWarningAsync($"Are you sure? {item.Text}");
var result = await dialog.Result;
}
private async Task ShowWarningAsync(IAppBarItem item)
{
var dialog = await DialogService.ShowWarningAsync($"Are you sure? {item.Text}");
var result = await dialog.Result;
}
}
Comment thread
vnbaaij marked this conversation as resolved.
Outdated
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/AppBar/Examples/AppBarFromListOfApps.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
<FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
<div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 500px; padding: 10px;">
<div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 86px; padding: 10px;">
Comment thread
vnbaaij marked this conversation as resolved.
Outdated
<FluentAppBar
Items="@_apps.OrderBy(a => a.Order)"
Style="width: 68px; height: 100%; background-color: var(--neutral-layer-2);"
Style="height: 100%; background-color: var(--neutral-layer-2);"
PopoverVisibilityChanged="HandlePopover"
PopoverShowSearch="@_showSearch">
</FluentAppBar>
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/AppBar/FluentAppBar.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ private async Task InitializeOverflowAsync()
}
}

private Task TogglePopoverAsync() => HandlePopoverToggleAsync(!_showMoreItems);
internal Task TogglePopoverAsync() => HandlePopoverToggleAsync(!_showMoreItems);

private async Task HandlePopoverKeyDownAsync(FluentKeyCodeEventArgs args)
{
Expand Down
5 changes: 5 additions & 0 deletions src/Core/Components/AppBar/FluentAppBarItem.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,11 @@ protected async Task OnClickHandlerAsync(MouseEventArgs ev)
{
if (OnClick.HasDelegate)
{
if (Overflow is true)
{
await Owner.AppBar.TogglePopoverAsync();
}

await OnClick.InvokeAsync(this);
}
}
Expand Down
Loading