[Overlay] Add Interactive and InteractiveExceptId parameters #2580
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 tasks
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 61.1%
|
|
The
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 Actually, there's a |
|
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 |
I agree. I could add a paragraph in the documentation to explain that. And to add a global constant |
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 ? |
😂 I think the fact the name says you exempt an ID from dismissing (I misspelled earlier) the overlay kind of implies interactivity. |
|
I still think it may be helpful to separate three concepts:
Separating 1 and 2 can make the interactive available for non-full-screen as well if it could be a potential scenario. In my opinion, we separate all 3 concepts or separate 2 concepts, |
|
@RickyLin we can't separate the interactivity from the full screen part because it relies on a |
|
Yep, Probably using Of course, these properties will be dependent: Make sense? |
|
Yes, makes sense to me! |
|
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 |
Mmm. Let me try if it's possible (but using the FluentOverlay element, not using the absolute position). |
|
PR fixed (and description updated) |
vnbaaij
changed the title
vnbaaij
approved these changes
Aug 30, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[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: nonestyle, 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 eventdocument.addEventListenervia theFluentOverlay.razor.jsscript (register it and remove it at the end of use).Stay interactive
By using the
InteractiveExceptIdproperty, 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