[dev-v5] Add fluent-overlay web component #4382

dvoituron · 2025-12-05T13:45:45Z

[dev-v5] Add `fluent-overlay` web component

This web component display an overlay on top of all other layers using a <dialog> element to be compatible with modern browsers and Accessibility requirements.

Attributes

dialog-style: Style to apply to the dialog element
dialog-class: Class to apply to the dialog element
background: Content of the background-color for the dialog's background
fullscreen: true|false to display a fullscreen overlay
interactive: true|false to allow interactivity with the HTML content in background
close-mode: To define the way to close the overlay
- manual : using only close() method
- all: any where to close the overlay (or ESC if fullscreen is true)
- inside only a click inside the dialog content
- outside only a click outside the dialog content

Functions

show() to display the overlay
close() to close the overlay

Events

toggle raised when the overlay is opened or closed (see detail.newState)

Example

<fluent-overlay id="id1"
                dialog-style="background: transparent;"
                dialog-class="my-class"
                background="color-mix(in srgb, var(--colorBrandBackground) 20%, transparent)"
                fullscreen="true"
                interactive="false"
                close-mode="all">
    <FluentSpinner />
</fluent-overlay>

github-actions · 2025-12-05T13:47:58Z

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

github-actions · 2025-12-05T13:48:09Z

Summary - Unit Tests Code Coverage

Summary


Generated on:	12/05/2025 - 13:48:06
Coverage date:	12/05/2025 - 13:47:51
Parser:	Cobertura
Assemblies:	1
Classes:	197
Files:	269
Line coverage:	98.5% (6459 of 6552)
Covered lines:	6459
Uncovered lines:	93
Coverable lines:	6552
Total lines:	25735
Branch coverage:	92.1% (3651 of 3963)
Covered branches:	3651
Total branches:	3963
Method coverage:	Feature is only available for sponsors
Tag:	4710_19964881789

Coverage

Microsoft.FluentUI.AspNetCore.Components - 98.5%

Name	Line	Branch
Microsoft.FluentUI.AspNetCore.Components	98.5%	92.1%
Microsoft.FluentUI.AspNetCore.Components.AccordionItemEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.AdditionalAttributesExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.CachedServices	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Calendar.CalendarExtended	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Calendar.CalendarTitles`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Calendar.CalendarTValue	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1	97.2%	90.2%
Microsoft.FluentUI.AspNetCore.Components.ColumnKeyGridSort`1	94.4%	75%
Microsoft.FluentUI.AspNetCore.Components.ColumnOptionsUISettings	100%
Microsoft.FluentUI.AspNetCore.Components.ColumnResizeOptions`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ColumnResizeUISettings	100%
Microsoft.FluentUI.AspNetCore.Components.ColumnSortUISettings	100%
Microsoft.FluentUI.AspNetCore.Components.CustomEmoji	100%	100%
Microsoft.FluentUI.AspNetCore.Components.CustomIcon	100%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.Defer	100%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.InternalGr idContext`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProviderContext	95.6%	92.8%
Microsoft.FluentUI.AspNetCore.Components.DefaultStyles	100%
Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptions	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult`1	100%
Microsoft.FluentUI.AspNetCore.Components.DialogService	100%	82.3%
Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.DropdownEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.Emoji	100%	100%
Microsoft.FluentUI.AspNetCore.Components.EmojiCompress	100%	100%
Microsoft.FluentUI.AspNetCore.Components.EmojiExtensions	61.5%	16.6%
Microsoft.FluentUI.AspNetCore.Components.EmojiInfo	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions	100%	92%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DisplayAttributeExtensi ons	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FieldSizeExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FileSizeConverter	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordion	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem	100%	95.8%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchorButton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAvatar	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton	98.4%	90.6%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendar`1	98.1%	88.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarBase`1	100%	94.4%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarDay`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarMonth`1	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarYear`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCard	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCompoundButton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge	100%	96.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1	90.1%	88.2%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1	100%	95.2%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1	98.5%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker`1	97.4%	85.2%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog	97.5%	89.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody	100%	91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider	100%	73.9%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDragEventArgs`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1	100%	76%
Microsoft.FluentUI.AspNetCore.Components.FluentEmoji`1	100%	95%
Microsoft.FluentUI.AspNetCore.Components.FluentErrorBoundary	97.6%	93.7%
Microsoft.FluentUI.AspNetCore.Components.FluentField	100%	96.5%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldCondition	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionItem	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionOptions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldParameterSelector	100%	98.7%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid	100%	90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentImage	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1	93.8%	50%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile	100%	93.3%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileErrorEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs	100%	75%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyPressEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout	100%	88.8%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger	100%	96.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem	100%	91%
Microsoft.FluentUI.AspNetCore.Components.FluentLink	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1	97.3%	92.1%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenu	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton	100%	71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem	100%	90.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuList	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter	94.4%	89.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane	98.5%	85%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentOption	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentPaginator	100%	94.4%
Microsoft.FluentUI.AspNetCore.Components.FluentPopover	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgress	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressBar	100%	95.4%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProviders	100%
Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1	100%	88.8%
Microsoft.FluentUI.AspNetCore.Components.FluentRatingDisplay	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1	96.1%	83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSkeleton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpacer	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpinner	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSplitButton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentStack	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentStatus	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSwitch	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTab	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTabs	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentText	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea	100%	70%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput	100%	85%
Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker`1	100%	81.1%
Microsoft.FluentUI.AspNetCore.Components.FluentToggleButton	100%	91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltip	100%	95%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem	100%	95.3%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeView	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FreeOptionOutput	100%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderRequest`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult	100%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult`1	100%
Microsoft.FluentUI.AspNetCore.Components.GridSort`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.HighlighterSplitter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Icon	100%	95%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage	100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo	100%
Microsoft.FluentUI.AspNetCore.Components.IconsExtensions	76.9%	16.6%
Microsoft.FluentUI.AspNetCore.Components.IFluentComponentChangeAfterKeyPres s	100%	100%
Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr ibable`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr iber`1	100%	87.5%
Microsoft.FluentUI.AspNetCore.Components.InputFileInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.InputFileOptions	100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1	100%
Microsoft.FluentUI.AspNetCore.Components.KeyCodeService	100%	85.7%
Microsoft.FluentUI.AspNetCore.Components.KeyPress	100%
Microsoft.FluentUI.AspNetCore.Components.LayoutHamburgerEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.LibraryTooltipOptions	100%
Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource	100%	100%
Microsoft.FluentUI.AspNetCore.Components.MenuItemEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt ensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.TooltipPositionExtension	100%	100%
Microsoft.FluentUI.AspNetCore.Components.PaginationState	100%	81.2%
Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails	100%
Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2	100%	81.8%
Microsoft.FluentUI.AspNetCore.Components.RadioEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.RangeOfDates	100%	100%
Microsoft.FluentUI.AspNetCore.Components.SelectAllTemplateArgs	100%
Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1	97.3%	95.1%
Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.SortedProperty	100%
Microsoft.FluentUI.AspNetCore.Components.SpacingExtensions	100%	97.2%
Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TemplateColumn`1	100%	25%
Microsoft.FluentUI.AspNetCore.Components.TooltipEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TotalItemCountChangedEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TreeItemChangedEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItemExpandedEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debounce	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext	100%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.RangeOf`1	96.7%	97.2%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ZIndex	100%

dvoituron added 6 commits December 4, 2025 18:25

Add FluentOverlay Web Component

0bdb697

Fix Container position

057facb

Update FluentOverlay

dd9ccce

Add CloseMode

a623809

Update the dispatchOpenedEvent

6ae4e99

Update doc

0796d7b

dvoituron requested a review from vnbaaij as a code owner December 5, 2025 13:45

dvoituron enabled auto-merge (squash) December 5, 2025 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[dev-v5] Add fluent-overlay web component #4382

[dev-v5] Add fluent-overlay web component #4382

dvoituron commented Dec 5, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 5, 2025

Uh oh!

github-actions bot commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[dev-v5] Add fluent-overlay web component #4382

Are you sure you want to change the base?

[dev-v5] Add fluent-overlay web component #4382

Conversation

dvoituron commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[dev-v5] Add fluent-overlay web component

Attributes

Functions

Events

Example

Uh oh!

github-actions bot commented Dec 5, 2025

Uh oh!

github-actions bot commented Dec 5, 2025

Summary - Unit Tests Code Coverage

Coverage

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dvoituron commented Dec 5, 2025 •

edited

Loading

[dev-v5] Add `fluent-overlay` web component