Fluentui: Panel can be embedded to parent container and inherit parent's height

[Joouis]

Describe the feature that you would like added

Hi, currently Panel component overlays the whole DOM and its top height is always the top of window, this does matter when we have dynamic message bars at top. We want the panel as part of content instead of whole page, but so it's diffcult to calculate and update the latest height of panel, just like this.

My code is also the one of all components, besides message bars there are also other components at top, so can you make a type of Panel component which can be embedded to parent container?

What component or utility would this be added to

Panel

Have you discussed this feature with our team, and if so, who

No discuss yet.

Additional context/screenshots

Null.

[jdhuntington]

@Joouis This request makes sense. How urgent is this feature for you? Also, are you interested in submitting this feature as a PR?

[Joouis]

Hi @jdhuntington, thanks for your reply. Our production is near public preview, probably this end of month. I know it's too hurry to support the feature, so I get top offset of a fixed parent for panel as a workaround, but it's not always working all time. Then I opened a issue here.

I do have interest in submitting this feature, but no buffer left recently. I can look into it in December if this issue is still open :)

[micahgodbolt]

I believe there is a way to do this without a code change. Let me see if I have the demo.

[micahgodbolt]

Yeah, here it is https://codepen.io/micahgodbolt/pen/KBbmwV?editors=0010

Panel takes layerProps which can take a "hostID", resulting in this layout:

[Joouis]

@michaelangotti Hi Micah, thanks for you comment, it's really hepful, I've updated my component and layout seems good now 👍

But there is still a defect, add a simple button to open panel can be reproduced (here is the codepen source forked from yours):

You can see when open panel, the host container will be joggled. Set position property to fixed or absolute can resolve this joggle, but I can't do that bacause there is an expandable division next to the host container, it should be adapted to the width of expandable division.

Do you have any idea of this defect?

[micahgodbolt]

Ah, good catch @Joouis. My demo would have been better with that open close button. The reason for this 'jiggle' is that panels apply overflow hidden to the page (to make the background not scroll). So if the parent or body is scrollable there will be some jiggle when the panel is opened/closed. This can be resolved by only allowing sections of the page to scroll, not the entire page.

https://codepen.io/micahgodbolt/pen/XWWvmqP?editors=0110

[Joouis]

@micahgodbolt Appreciate your explanation and demo again. I tried your way and yes only the part of page has 'jiggle' now. But the real question is, can I eliminate this "jiggle" entirely, like set no animation?
In our case, the panel parent hosts most important content which includes many items for customer, by clicking any item the panel will show up. Click action will be very frequent, and these "jiggles" are bad to our user experience.

[micahgodbolt]

I'd still suggest changing the scrolling div to an internal div, but one suggestion for a control change would be to add a 'animationClassNames' prop that allows you to set panelOpenRight, panelCloseRight, panelOpenLeft, panelCloseLeft names. Also overlayOpen and overlayClose.

This would be a much less intrusive change than your earlier PR, as the default would simply be the original values, but you could pass in undedfined/empty string and supress those animations.

[Joouis]

@micahgodbolt I already changed the scrolling div to the internal div last time. And basing on this plan instead of my earlier PR, add prop like animationClassNames is make sense.

I already redesign a specified panel for the current business and further design. So I will close this issue now, and thank you all again!