microsoft
[Overlay] Add FullScreenInteractiveExceptElementId
[Overlay] Add FullScreenInteractiveExceptElementId
Introduction
In some use cases (see #2567#issuecomment-2307956048, it's useful to allow the user to interact with components placed under the FluentOverlay (with the possible exception of certain zones). To manage this, we've added the pointer-events: none style, which disables event handling on the FluentOverlay and allows interaction with other elements on the web page. It is then necessary to add a global event document.addEventListener via the FluentOverlay.razor.js script (register it and remove it at the end of use).
Stay interactive
By using the InteractiveExceptId property, only the targeted element will not close the FluentOverlay panel. The user can click anywhere else to close the FluentOverlay.
In this example, the FluentOverlay will only close when the user clicks outside the white zone and the user can increment the counter before to close the Overlay
Simplified example
<FluentOverlay @bind-Visible=@visible
FullScreen="true"
Interactive="true"
InteractiveExceptId="my-zone">
<div id="my-zone">
<p>Non-interactive zone</p>
<FluentProgressRing />
</div>
</FluentOverlay>
✅ All tests passed successfully
Details on your Workflow / Core Tests page.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Summary - Unit Tests Code Coverage
Summary
| Generated on: | 8/30/2024 - 3:59:35 PM |
| Coverage date: | 8/30/2024 - 3:59:23 PM - 8/30/2024 - 3:59:27 PM |
| Parser: | MultiReport (2x Cobertura) |
| Assemblies: | 1 |
| Classes: | 244 |
| Files: | 342 |
| Line coverage: | 61.1% (5344 of 8746) |
| Covered lines: | 5344 |
| Uncovered lines: | 3402 |
| Coverable lines: | 8746 |
| Total lines: | 29793 |
| Branch coverage: | 52% (2603 of 5005) |
| Covered branches: | 2603 |
| Total branches: | 5005 |
| Method coverage: | Feature is only available for sponsors |
| Tag: | 1364_10635618322 |
Coverage
Microsoft.FluentUI.AspNetCore.Components - 61.1%
| Name | Line | Branch |
|---|---|---|
| Microsoft.FluentUI.AspNetCore.Components | 61.1% | 52% |
| Microsoft.FluentUI.AspNetCore.Components.AccordionChangeEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.ActionButton`1 | 50% | |
| Microsoft.FluentUI.AspNetCore.Components.ActionLink`1 | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.CalendarExtended | 95% | 86.6% |
| Microsoft.FluentUI.AspNetCore.Components.CalendarTitles | 87% | 76.6% |
| Microsoft.FluentUI.AspNetCore.Components.CheckboxChangeEventArgs | 50% | |
| Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1 | 32.9% | 10.2% |
| Microsoft.FluentUI.AspNetCore.Components.ColumnOptionsLabels | 66.6% | |
| Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels | 88.8% | |
| Microsoft.FluentUI.AspNetCore.Components.ColumnResizeOptions`1 | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.ColumnSortLabels | 80% | |
| Microsoft.FluentUI.AspNetCore.Components.CommunicationToast | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.CommunicationToastContent | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.ComponentParameters | 16.6% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.Components.DateTime.RangeOfDates | 100% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipGlobalOp tions |
40% | |
| Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipOptions | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipService | 72.5% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.CountdownTimer | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.AsyncQuery ExecutorSupplier |
72.7% | 71.4% |
| Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.ColumnsCol lectedNotifier`1 |
87.5% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.Defer | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.DisplayAtt ributeExtensions |
66.6% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.InternalGr idContext`1 |
90.9% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.DataGridCellFocusEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.DataGridRowFocusEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.DialogInstance | 92.3% | 75% |
| Microsoft.FluentUI.AspNetCore.Components.DialogParameters | 92.5% | |
| Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1 | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.DialogReference | 36.3% | 37.5% |
| Microsoft.FluentUI.AspNetCore.Components.DialogResult | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.DialogService | 4.1% | 3.3% |
| Microsoft.FluentUI.AspNetCore.Components.Emoji | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.EmojiCompress | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.EmojiInfo | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.AdditionalAttributesExt ensions |
100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.BooleanExtensions | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions | 82.5% | 85% |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions | 70.5% | 59% |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.Extensions.UrlFormatterExtensions | 100% | 75% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAccessibilityStatus | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAccordion | 60% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem | 76% | 35.7% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAnchor | 89.7% | 67.8% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAnchoredRegion | 87.5% | 60% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAppBar | 53.7% | 35.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAppBarItem | 82.1% | 60% |
| Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1 | 87.9% | 76.4% |
| Microsoft.FluentUI.AspNetCore.Components.FluentBadge | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentBodyContent | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumb | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumbItem | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentButton | 84.6% | 64% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCalendar | 89% | 82.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCalendarBase | 93.3% | 81.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCalendarDay | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCalendarMonth | 100% | 66.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCalendarYear | 90.9% | 60% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCard | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox | 90.7% | 87% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCollapsibleRegion | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1 | 81.8% | 70% |
| Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase | 90.9% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge | 93.1% | 86.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1 | 60.3% | 46.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1 | 72% | 37.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1 | 55.7% | 28.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker | 86.5% | 56.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDesignSystemProvider | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDialog | 60.7% | 67.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentDialogFooter | 62.5% | 43.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader | 80.9% | 81.8% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider | 59.7% | 52.1% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDivider | 86.3% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1 | 69.2% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentDragEventArgs`1 | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1 | 20% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentEditForm | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentEmoji`1 | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentFlipper | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentFooter | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentGrid | 71.4% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentGridItem | 87.2% | 82.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentHeader | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter | 92.3% | 20% |
| Microsoft.FluentUI.AspNetCore.Components.FluentHorizontalScroll | 59.3% | 20% |
| Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1 | 87.8% | 80.4% |
| Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1 | 70% | 61% |
| Microsoft.FluentUI.AspNetCore.Components.FluentInputFile | 88.4% | 76.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs | 91.6% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentInputLabel | 100% | 95% |
| Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode | 90.1% | 90% |
| Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs | 100% | 75% |
| Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider | 40% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentLabel | 72.7% | 21.4% |
| Microsoft.FluentUI.AspNetCore.Components.FluentLayout | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentListbox`1 | 93.3% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMain | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentMainLayout | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMenu | 35.7% | 40.7% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton | 70.2% | 8.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMenuProvider | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar | 54.1% | 25% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMessageBarProvider | 82.3% | 66.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter | 81.7% | 66.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane | 97.1% | 91% |
| Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavBase | 55.1% | 16.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup | 62.1% | 36.6% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavLink | 86.3% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu | 59.6% | 33.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuGroup | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuItemBase | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuLink | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuTree | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentNumberField`1 | 64.4% | 47.9% |
| Microsoft.FluentUI.AspNetCore.Components.FluentOption`1 | 78.9% | 58.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentOverflow | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentOverflowItem | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentOverlay | 74.7% | 56.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentPageScript | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentPaginator | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentPersona | 100% | 78.1% |
| Microsoft.FluentUI.AspNetCore.Components.FluentPopover | 77% | 65.9% |
| Microsoft.FluentUI.AspNetCore.Components.FluentPresenceBadge | 60.3% | 29.1% |
| Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentProgress | 85.7% | 68.1% |
| Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing | 97.4% | 92.8% |
| Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh | 93.9% | 89.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1 | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext | 70% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1 | 83.3% | 28.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentRating | 82.6% | 84.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSearch | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1 | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSkeleton | 42.8% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1 | 60% | 27.7% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1 | 63.1% | 30% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1 | 80% | 59% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs | 83.3% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentSpacer | 100% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSplashScreen | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSplitter | 68.4% | 40% |
| Microsoft.FluentUI.AspNetCore.Components.FluentStack | 90.2% | 60% |
| Microsoft.FluentUI.AspNetCore.Components.FluentSwitch | 88.8% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTab | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTabs | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTextArea | 84.2% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentTextField | 88.5% | 60% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker | 100% | 90% |
| Microsoft.FluentUI.AspNetCore.Components.FluentToast | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentToastProvider | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentToolbar | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentTooltip | 88.8% | 64.2% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem | 85.3% | 75% |
| Microsoft.FluentUI.AspNetCore.Components.FluentTreeView | 91.3% | 84.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentValidationMessage`1 | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.FluentValidationSummary | 100% | 87.5% |
| Microsoft.FluentUI.AspNetCore.Components.FluentWizard | 93.1% | 83.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentWizardStep | 97% | 88.3% |
| Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepChangeEventArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.GlobalState | 33.3% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderRequest`1 | 92.3% | 41.6% |
| Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult`1 | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.GridSort`1 | 35.1% | 25.9% |
| Microsoft.FluentUI.AspNetCore.Components.HorizontalScrollEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.Icon | 81.3% | 85.2% |
| Microsoft.FluentUI.AspNetCore.Components.IconFromImage | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.IconInfo | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.Identifier | 66.6% | 62.5% |
| Microsoft.FluentUI.AspNetCore.Components.IdentifierContext | 66.6% | 41.6% |
| Microsoft.FluentUI.AspNetCore.Components.INavMenuItemsOwner | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr ibable`1 |
83.3% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr iber`1 |
90% | 75% |
| Microsoft.FluentUI.AspNetCore.Components.InputHelpers`1 | 36.9% | 31.2% |
| Microsoft.FluentUI.AspNetCore.Components.InternalAppBarContext | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.InternalDialogContext | 80% | |
| Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1 | 80% | 66.6% |
| Microsoft.FluentUI.AspNetCore.Components.InternalToastContext | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.KeyCodeService | 60.3% | 28.5% |
| Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration | 88.2% | 50% |
| Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1 | 62.7% | 59.5% |
| Microsoft.FluentUI.AspNetCore.Components.LoadedEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.LuminanceChangedEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.MenuChangeEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.MenuService | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.Message | 50% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.MessageBox | 66.6% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.MessageBoxContent | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.MessageOptions | 76.9% | |
| Microsoft.FluentUI.AspNetCore.Components.MessageService | 33% | 26.9% |
| Microsoft.FluentUI.AspNetCore.Components.NavMenuActionArgs | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.OfficeColorUtilities | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.Option`1 | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.OptionsSearchEventArgs`1 | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.OverflowItem | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.PaginationState | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.ProgressToast | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.ProgressToastContent | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2 | 80% | 52.6% |
| Microsoft.FluentUI.AspNetCore.Components.RenderFragmentDialog | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.Resources.TimeAgoResource | 76.1% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.SelectAllTemplateArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1 | 85.9% | 79.4% |
| Microsoft.FluentUI.AspNetCore.Components.SelectDatesHoverEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.ServiceCollectionExtensions | 80% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.SortedProperty | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.SplashScreenContent | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.SplitterCollapsedEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.SplitterResizedEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.StandardLuminanceExtensions | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.StaticAssetServiceConfiguration | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.TemplateColumn`1 | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.TimeAgoOptions | 92.3% | |
| Microsoft.FluentUI.AspNetCore.Components.ToastInstance | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.ToastParameters | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.ToastParameters`1 | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.ToastResult | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.ToastService | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.TreeChangeEventArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.TreeViewItem | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.TreeViewItemExpandedEventArgs | 100% | |
| Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails | 0% | |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder | 100% | 100% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.Debouncer | 94.8% | 37.5% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder | 96.4% | 87.5% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.JSModule | 0% | 0% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.RangeOf`1 | 96.7% | 94.4% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.Splitter | 82.8% | 81.8% |
| Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder | 100% | 91.6% |
| Microsoft.FluentUI.AspNetCore.Components.ZIndex | 100% | |
| System.Text.RegularExpressions.Generated | 76.6% | 51.4% |
The FullScreenInteractiveExceptElementId property implies three things:
- The overlay is full screen
- The overlay is interactive
- Except for an element id
Is there a reasonable case that someone wants a full screen interactive overlay and no exceptions? If yes, then they can't achieve it with this property and probably we need a separate FullScreenInteractive property which is of type bool and current FullScreenInteractiveExceptElementId is for the exception element id only, null or empty means no exceptions.
Actually, there's a FullScreen property, so perhaps just have two more properties: Interactive of type bool and InteractiveExceptElementId of type string?, three properties, each one has simple and dedicated purpose.
If the dev want no exception, he can set an unknown ID. This ElementId will never found to have the expected result.
We don't check if the ID exists in the HTML DOM, we try to find it.
I would say it's not straightforward and more like a workaround, but it does the trick.
I think the functionality this offers is good but the name of the parameter is a bit verbose and unclear. Maybe change to something like DissmisExemptId?
I would say it's not straightforward and more like a workaround, but it does the trick.
I agree. I could add a paragraph in the documentation to explain that. And to add a global constant NoException = Identifier.NewId() to be more explicit for the dev.
I think the functionality this offers is good but the name of the parameter is a bit verbose and unclear. Maybe change to something like
DissmisExemptId?
I was waiting for you on the name 😀. I couldn't think of a simple name. Your proposal is easier but remove the info of Fullscreen and Interactivity (maybe not interesting).
Other proposals ? InteractiveExceptId, ...
I was waiting for you on the name 😀. I couldn't think of a simple name.
😂 I think the fact the name says you exempt an ID from dismissing (I misspelled earlier) the overlay kind of implies interactivity. The full screen aspect can be clarified in xnl and developer docs
I still think it may be helpful to separate three concepts:
- Full Screen
- Interactive
- Interactive Except Element Id
Separating 1 and 2 can make the interactive available for non-full-screen as well if it could be a potential scenario.
Separating 2 and 3 can be intuitive for people who wants the interactive overlay only, simply set Interactive to true other than an NoException to InteractiveExceptionElementId because the Interactive emphasize interactive, can be true/false, the InteractiveExceptId emphasize an element id, set it a special NoException is not very intuitive for interactive only even if it's elaborated in document.
In my opinion, we separate all 3 concepts or separate 2 concepts, FullScreen and InteractiveExceptId. For the latter one, interactive can be available for non-full-screen scenario as well. Document is important but I guess many people don't read documents unless they can't figure out something directly. It would be great if people could infer the functionality by property names and don't need to depend on document.
@RickyLin we can't separate the interactivity from the full screen part because it relies on a addEventListener on the document on the JS side.
Denis will spilt out the Interactive and the InteractivityExcludedElement concepts.
Yep, Probably using Interactive = true and InteractiveExceptId = "my-id" will be easier for the dev (without this ID, the entire page will be interactive).
Of course, these properties will be dependent: InteractiveExceptId will be ignored if Interactive = false; and using Interactive will automatically set FullScreen = true .
Make sense?
It's nearly perfect for me. One last thought, for non-full-screen scenario, if we add event listener to the container element of the FluentOverlay based on its absolute position (nearest non-static positioned ancestor element?) instead of the document element, then it makes the same semantic for the full screen FluentOverlay and can decouple the FullScreen property.
One last thought, for non-full-screen scenario, if we add event listener to the container element
Mmm. Let me try if it's possible (but using the FluentOverlay element, not using the absolute position).