Fluentui: Make Panel scrolling optional

[joerneu]

Describe the feature that you would like added

It seems that a Panel always scrolls its content.

I would like to use a Flex layout within the Panel and control scrolling myself. (For example, when displaying two DetailsLists that should scroll independently in the Panel.)

Right now, I am using CSS to enable this with v6.83.0:

/* Do not scroll panel */
.ms-Panel-scrollableContent {
    display: flex;
    overflow-y: hidden !important;
}

/* Enable flex content in panels */
.ms-Panel-content {
    display: flex;
    overflow: hidden;
}

It seems like a hack and it would be better to have a prop to enable or disable scrolling within the Panel.

What component or utility would this be added to

Panel

Additional context/screenshots

For a Codepen sample:

Issue with Sample

[dzearing]

@kkjeer is this configurable? or easy to add a flag perhaps?

[micahgodbolt]

@joerneu what version of Fabric are you using. We just fixed a scrolling bug that I hoped would simplify Panel a bit. #6614

[joerneu]

I am using the latest v6.83.0 that includes the bug fix for the previous issue that I had reported.

The CSS from above is for v6.83.0 as well.

[micahgodbolt]

I'm going to dig into panel quick and see if the layout model is what I'm expecting.

[micahgodbolt]

yeah, seems to be a bug right now in scrolling content. Let me try to address that and then we can take a look at supporting a fixed content scenario.

[Mhbuur]

Same issue here, only the wanted behaviour is resizing of the content area instead of hidden overflow (clipping).

In lack of a flexible select drop down I'm using react-select with ui fabric. React-selects drop down expansion area was clipped by the panel.

I had to use this style override in order to stop the clipping:

.ms-Panel-scrollableContent,
.ms-Panel-content {  
  overflow: visible;
}

[kkjeer]

@Mhbuur if you prefer, the Panel style props can be used to prevent scrolling instead of CSS:

<Panel
    styles={{
        scrollableContent: {
            overflow: "visible"
        },
        content: {
            overflow: "visible"
        }
    }}
/>

Example codepen: https://codepen.io/kkjeer/pen/eQoZON

[micahgodbolt]

One thing to consider here would be to break panel into 2 components like we've done with dialog and modal. This would let people use the underlined functionality without the sometimes in the way styles/regions.

[micahgodbolt]

putting this on the backlog review to talk about splitting panel up into 2 parts. 1 part is the panel and the closing X that can be rendered at any width. The other, the Panel, has all of the custom widths and content. i.e. very primitive vs the application specific version.

[micahgodbolt]

Conversion of this to slots should open up more customization.

[xugao]

closing this as it's tracked in #7625