Wizard & Modal: Can we create sticky sections?

[nicolethoen]

Ansible is requesting the ability to create sticky sections in Wizard bodies and modals. Currently, PF supports a sticky page section which allows the rest of the page sections to scroll while keeping the sticky section from scrolling out of view. This feature would extend that ability to Wizards and Modals.

I believe this would require allowing for multiple WizardBody or ModalBody components within a Wizard/Modal, and being able to identify one of them as sticky via a modifier class/react prop.

---

Jira Issue: PF-544

[andrew-ronaldson]

@nicolethoen is this a blocker for v6 adoption?

[nicolethoen]

My attempts to create a sticky table w/ toolbar in a wizard step required a little bit of CSS overrides, including setting a height on the wizard-main-body, which could vary depend on screen resolutions/sizes, so it doesn't seem ideal:
https://codesandbox.io/p/sandbox/condescending-meninsky-z6p2ln

[nicolethoen]

From James Talton:
We can't use sticky sections really because we often have tables in pages, steps, or modals.
In those cases we want the header of the table to not scroll, but the rest of the table to scroll, so we use a sticky table header. That is not easily combined with sticky sections. Thus we do more like...

<Page>
 <PageSection>Title</PageSection>
 <PageSection isFilled hasOverflowScroll><Table/></PageSection>
 <PageSection><Pagination/></PageSection>
</Page>

We need the same in Modals and Wizard Steps

i can show you an example
if you use

<Page>
 <PageSection stickyOnBreakpoint={{ default: "top" }}>Title</PageSection>
 <PageSection><Table/></PageSection>
</Page>

Then there is a scrollbar for the whole page. And the title and the table title conflict because they are both sticky