Bug - Page/Drawer - PageSection in DrawerBody has an incorrect height

[DaoDaoNoCode]

Describe the problem
I am trying to build a page, which has several clickable cards on it, and when you click on the card, there will be a drawer panel shown on the right side. However, when implementing this, I find some issues with the page height. See the example below for the details.

How do you reproduce the problem?
I created a code sandbox example here: https://codesandbox.io/s/vigorous-bohr-ydpp8d?file=/index.tsx
I try to put a drawer in a Page component and set the PageSection in the DrawerContentBody, however, the DrawerContentBody is not flex display, which will make the grey background page section not take up the entire page height. So I use the Flex layout provided by PatternFly. However, another bug comes, the page section will take up more height than it should take, which causes the page to scrollable.

Expected behavior
The page section will take up the full page height when there is no enough card, and will be scrollable when there are a lot of cards.

Is this issue blocking you?
I can create some custom styles to avoid this. However, I still want to use only PF to build the application, avoid making any custom styles.

Screenshots
See the example.

What is your environment?

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

What is your product and what release date are you targeting?
ODH/RHODS

Any other information?
I am not sure whether it's permitted to put PageSection into DrawerContentBody by design. If not, what's the workable way to implement this feature? Is there any component that can provide me with a grey background on which I can put a lot of cards?

[mcoker]

Hey @DaoDaoNoCode, is the codesandbox you shared still relevant? It looks like the page is scrolling OK to me.

FWIW, you're spot on with the parent of page sections needing to be a flex layout for their grow/shrink, and potentially other styles for the sections to be able to scroll. Here's some more info.

We have 2 elements that setup scroll regions for the "main content" part of the page layout - .pf-c-page__main and .pf-c-page__drawer - https://github.com/patternfly/patternfly/blob/d4e7c61ad4f4a5a91ca31e3e10957124e2247ac6/src/patternfly/components/Page/page.scss#L531-L543

The use cases for that are basically:

• The standard page where it's page -> page__main -> page__main-sections
• A page with a drawer that sits on top of all of the main content - page -> page__drawer -> drawer -> drawer__content -> page__main -> page__main-sections
  • Most commonly, this is the layout for the notification drawer - https://www.patternfly.org/v4/components/notification-drawer
  • I adapted your codesandbox to use this approach - https://codesandbox.io/s/agitated-black-4f8k1y?file=/index.tsx

And then we have 3 elements that serve as flex parents for a grouping of page sections - the 2 mentioned previously (.pf-c-page__main, .pf-c-page__main-drawer) and .pf-c-page__main-group - https://github.com/patternfly/patternfly/blob/d4e7c61ad4f4a5a91ca31e3e10957124e2247ac6/src/patternfly/components/Page/page.scss#L545-L550

.pf-c-page__main-group is cool because it is both a parent (flex layout) for page sections, and behaves like a page section, too - you can set it to scroll and be sticky and it will fill or not fill the available space depending on whether it's the last child or has a fill/no-fill class. Although that requires the parent be a flex layout, too...

In your demo, you could add a .pf-c-page__main-group (<PageGroup>) parent for your page sections in the drawer, but that element may not fill the available space like you'd expect if there are not enough cards to fill the viewport and the section for the cards has a different background than the rest of the page. Here are a couple of ways to solve that.

• Set the drawer content to have the same background as your card layout
  • https://codesandbox.io/s/frosty-matsumoto-k5x512?file=/index.tsx
• Remove the background from the drawer content and show the main section behind it's background well, shoot - I don't see support for this in the react drawer component, even though it's in core. Added an issue for that here - Drawer - support for no/transparent background on drawer content, panel, and section #8548
  • But here's an example using className="pf-m-no-background" manually - https://codesandbox.io/s/wandering-glade-vo25im?file=/index.tsx
• Just use drawer__content -> page__main-sections. drawer__content is a flex parent for drawer__body items, just like page__main is for page__main-section. You don't need a <PageGroup> then, either. That technically works, and I don't see it breaking any time soon, but I might advise against it if another approach works since it is relying on a parent/child relationship from different component elements.
  • https://codesandbox.io/s/boring-resonance-sn1zeb?file=/index.tsx

Let me know if that helps! FWIW, I'm sure you've seen it, but this primary detail card view demo has a similar layout that might be useful, too.

[andrewballantyne]

@mcoker Depending on your screen width -- it takes 2 cards wide (1 card wide renders fine) to show a rendering issue with the height of the container (the grey background)

In FireFox:

In Chrome:

This becomes more severe when you only have 1 card -- yet there is a scrollbar.

---

I get there are solutions provided by PF core... I'd prefer not to have to rely on the css class solution. Would this not be any different than us mutating the styles ourselves and causing component disparity to a point where upgrades would not be smooth of the PF Library? Is there no React solution?

---

Our current solution of mutating the DrawerContentBody's styles to be a flex container with a column direction is not ideal imo. I'd like to be able to build the ODH Dashboard project completely relying on PF to manage our layout -- where in extremely small and rare situations an override would take place.

I get display properties can have odd consequences to all variations of the use... but the DrawerContentBody is a flex item - we just need it to be a flex container. In absence of that (because of the noted unintended side-effects to other layouts out there) we tried using a PF Flex component as the direct child of the DrawerContentBody (line 343 in the code sandbox) to fix the layout to work with a PageContent. This however causes the issue @DaoDaoNoCode noted (see my screenshots above).

---

So in conclusion. I'd like to see a solution that does not require us to override the styles -- even if we have to wait for a PF React update. We have an interim solution that is linked to this ticket -- and I'm not entirely sure if switching to an official PF style would make a difference to the structure/quality of our code base.

[mcoker]

Hey @andrewballantyne, thanks for the feedback and additional info. My apologies for explaining things in classes - I'm a core dev, but for everything here (except for the point I marked out above about no support for transparent background drawer elements), I'm just describing the rendered elements where there are react components/props to use. I'll try to just refer to react components/props.

Just to get some more info on the intended design, is the requirement that the drawer (panel and page sections with drawer content) appear below other page sections in the main page layout? For example - in your original codesandbox, the panel comes out below the breadcrumbs. Is that intentional? Or can you have the drawer panel come out on top of all of the page content? For the most part, those are the 2 basic approaches you will take adding a drawer to a page. To explain those cases more:

• The drawer panel expands on top of all of the page sections in the page main area. This retains the use of <PageSection>s as they are in the page layout - they're passed as children of <Page>. This is ideally how <PageSection> is designed to be used.

  • This is the codesandbox I shared that builds it this way - https://codesandbox.io/s/agitated-black-4f8k1y?file=/index.tsx. There are no CSS/class overrides. The only changes I see that may help here are to rename the notificationDrawer and isNotificationDrawerExpanded props to be a little more generic, since they just attach a drawer to the page content. AFAIK the notification drawer isn't a requirement there. It's just a modified version of the notification drawer demos we have on the website at https://www.patternfly.org/v4/components/notification-drawer/react-demos
    • cc @tlabaj re: the prop names - does that sound right or are those props just for the notification drawer?

• The drawer panel expands on top of one or more page sections, but not all. Typically the drawer content in these cases does not use a list of <PageSection>s for the content - they use <DrawerContentBody> instead, which have most of the functionality of <PageSection>.

  • Here is my codesandbox building it that way - https://codesandbox.io/s/frosty-matsumoto-k5x512?file=/index.tsx. No additional classes or anything in that one, either. It's a modified version of this primary detail card view demo - https://www.patternfly.org/v4/demos/primary-detail#primary-detail-card-view.
    • Note that the card view demo on our website hard-codes className="pf-m-no-background" class I referenced in the bug above. I've modified that demo to remove the class and use the colorVariant prop set to use the background color in your original codesandbox - Drawer - support for no/transparent background on drawer content, panel, and section #8548
  • FWIW, we have had use cases before where users are using <PageSection> elements as children of some other layout/component. We have an open issue to look at that here - Sidebar, drawer, and page sections usage patternfly#5192

  Re: the height issue when there are 2 cards... that is odd. I don't see anything obvious as to what the issue there is, but I did notice that if you set flexWrap to nowrap on the layout that contains the drawer's page sections, that seems to fix it. https://codesandbox.io/s/confident-bhaskara-i9dxwp?file=/index.tsx - @mattnolting @srambach do you see what might be causing that? (Remove flexWrap={{ default: "nowrap" }} in the <DrawerContentBody>, and notice on a small viewport, there is a bunch of extra padding/space below the cards)