[Backdrop] WIP, basic functionality

[micimize]

This will close #11546 by implementing the Backdrop spec
Still a WIP, but I figured given it's size I should PR early to get feedback on style, organization, etc.

This PR implements:

• Backdrop container component
• • implicit BackdropFront and BackdropBack layout handling via flexbox
• BackdropBack
• • BackdropBackSection with transitions
• • BackdropBackMenuItem for navs (see "Active back layer")
• • StackedFade for header transitions (a bit fragile, a BackdropHeaderStack is probably better)
• BackdropFront
• • BackdropFrontSubheader
• • BackdropFrontContent
• • disabling / "scrim" state
• • minimization state and controls

Future:

• Backdrop control over and shortcuts for BackdropFront and BackdropBack props
• Some more Backdrop variants of selection controls and input fields
• Maybe generalize the custom close icon functionality and make use of it

Here's what the current implementation looks like:

[micimize]

Alright, the implementation is stable enough, so I'm going to put this down while waiting on some feedback.

As an aside, this codebase is a joy to work with. Very well designed.

[mbrookes]

@micimize This is a fantastic first PR - thanks for taking it on, and I'm sorry it has taken so long to review it!

I have rebased and updated the demos for changes in one of the imports, and while I need to give it a more thorough review, at first glance, it looks like a very clean implementation. 👍

[mbrookes]

It just occurred to me that if this component was ever to get promoted to core in the future, the name will conflict with the existing Backdrop component. Not sure how we'd handle that, or whether to account for it now...

@oliviertassinari, thoughts?

[oliviertassinari]

@mbrookes We could rename the existing Backdrop component Overlay? (probably a breaking change)

[mbrookes]

@oliviertassinari Same name that came to mind for me .

Definitely a breaking change, but not one we have to worry about immediately – although we should probably allow some time between renaming the current Backdrop, and promoting this one if / when the time comes

[oliviertassinari]

@mbrookes Perfect, sounds like a plan :).

[micimize]

@mbrookes good to hear! Hopefully soon I'll have the time to add unit tests and typings. Been pretty focused on the react-native fork and related work

[AlvSovereign]

Hi Material-UI Team.

It would be awesome to see this component in core sometime...

[micimize]

Apologies for leaving this PR in such an ambiguous state - The project I wrote this for actually no longer uses material ui or react(-native), so I doubt I'll be finishing the requisites to merging this anytime soon (rebasing, writing tests, typings).

I'm going to leave this open in case the core team wants to finish it up and merge it, but @oliviertassinari @mbrookes feel free to close/table it for now

[oliviertassinari]

@micimize Thank you for letting us know! I vote for closing the pull-request. I think that it would make a great third party package.

May I ask what you are using specifically now to solve the problem :)?

[micimize]

@oliviertassinari sure! We moved to Flutter after an attempt to port material-ui to react-native because of the significant improvements in DX and performance we were able to get (over react-native).

Here's a cleaned up version of my issues with react native in case it is useful.

Gunna go ahead and close - @AlvSovereign and @dcworldwide I know y'all were interested in this functionality, Here's where you can find the source for the components themselves as well as some usage examples, feel free to extract and use/publish them, as I doubt I'll get around to it anytime soon.