Will an overlay layer be implemented in material web components?

[slavoroi]

As seen in many libraries, in particular in angular/react material, an overlay layer was
implemented to overcome zindex/layering issues in websites.
As we have seen so far, you didn't implement this feature.
Is there a reason for it? Or will it be implemented in the future?

[e111077]

Hello, we do not currently have any plans to implement a standalone overlay layer. We generally seek to provide only the components defined by the material design spec and not necessarily their parts.

Though, can you please provide an example of an overlay layer that you are looking for? I'd be happy to bring this up at our next team meeting (likely next week or the week after due to vacations around this time)

[slavoroi]

I'm showing a video of angular material (the same is implemented in the react one),
where the component of a datepicker is deep inside the dom, but it's content that might have an issue
of hiding another component, it's added to a top layer overlay and projected there.
Many components use this overlay service/component.
WDYT?
https://user-images.githubusercontent.com/13114384/102866315-ba0d6300-443f-11eb-8f96-d75418bf052f.mp4

[CICCIOSGAMINO]

I'm not sure if i can solve in other way but my problem seems bind to same root. I'm thinking i'm trying to stand up a mwc-fab to mwc-drawer (when open in type=modal) ! I cannot bring the mwc-fab on top of the aside/content of drawer when opened ...

Here my try: https://github.com/CICCIOSGAMINO/mwc-fab-on-mwc-drawer

[e111077]

Overlaying components is an issue we've been having in our system already (see select inside of a dialog) and we're still investigating methods for hoisting ala React portals. Will definitely keep this in mind for our next meeting

[slavoroi]

Thanks for the answer 👍

[e111077]

We have decided to look into investigating this further (though in all likelihood we will be awaiting for the next version of lit-element to be released before we implement this because of the features it would provide for shared behaviors).

What specific features were you looking for in a componentized overlay?

[slavoroi]

1. Supporting an overlay container layer that orders all overlay components that are opened within.
2. Dim - dimming the background or not (for dialogs)
3. prevent background events - self explanatory (by default false and than blur closes most components).
4. Callback - called when an overlay is closed
5. anchorElement - What is the anchor element that the overlay will open from? Like a dropdown in a grid.
6. anchorPosition - Provided anchorElement is set than on which position will the overlay be opened (top/bottom/right/left/over).
7. overlayTemplate - I don't know how you are going to implement this but when an overlay component is opened it's content should be projected to a higher level, this is how we implemented this, but i'm not sure it's the right solution.

[daniellacosse]

Wanted to add - not having mwc-menu in an overlay layer results in not being able to nest it in a component with overflow: hidden;, which I'm currently doing to create a card with rounded corners.

Something to draw inspiration from: https://baseweb.design/components/popover/

[e111077]

Heya, I'm no longer on Material Web and now I work alongside them rather than on the project itself. That said, the findings of my implementation is that unless we explode the scope of this feature, we should stay put until the popup attribute is standardized

https://open-ui.org/components/popup.research.explainer

The status of it AFAIK is that it's under active implementation on Chrome as of now. In the meantime the fixed attribute should work in the majority of cases

[e111077]

Hello, I am back on Material web 😅 now.

Currently md-menu has the same approach. We are putting our bets on popover's native top-layer approach. Until popover ships across all browsers we are happy to look into workarounds if still necessary.

I think we are still not looking to implement our own top-layer because as a framework-agnostic component library, we can't tell the shape of your application and can't assume that we can add a top layer to your site, but we are open to seeing if y'all are having trouble using Menu in your own top-layer implementations.

Will keep bug open until we eventually get cross-browser popver support

[e111077]

I am working on a PR to enable popover in menu. It will use popover in browsers that support it and will fallback to position: fixed which is not a 1:1 solution for FireFox and browsers that do not support it. I will close this issue when that is merged as we intend for popover to be the browser-native solution to framework-based overlay layers