Fixed modal header and footer

[vankhoawin]

Kind of related to #1238, multi-step modals with variable heights, especially heights longer than the modal, can be jarring to the user. One major aspect is that the modal footer with user-actionable buttons disappears until scrolled to the bottom. Is it possible to have fixed header and footer components that will always be displayed, while the modal content is scrollable? cc @lgalloherran

[SiTaggart]

Hi @vnguyen94

Can you describe this line a little further, maybe with a screenshot?

One major aspect is that the modal footer with user-actionable buttons disappears until scrolled to the bottom

The only scrolling area in the paste modal is the modal body, and if it's super long its height is set to have a maximum. But what that means is the header and footer is always visible in the viewport, so I'm not sure I follow entirely.

Agree though on stepped flows that jumping actions are pretty frustrating. I don't think we've done the research required to have an opinion on exactly what the best approach would be though to implement anything on our end.

I will say though the intention around our API design process is that we allow for teams who might have more immediate capacity to incubate that research for us as they are closer to the customer. So for example your team could conduct some research on how best to deal with stepped modals, you can set a fixed height box inside the modal body to simulate it, incubate the design and once everyone happy we have the best solution we can promote that and our findings into the system. Does that sound like something the team would be willing to do? Do the research, Incubate the design solution and promote?

[vankhoawin]

above-the-fold screen of a modal with long vertical content:

have to scroll to see the footer (which has a close button):

The only scrolling area in the paste modal is the modal body, and if it's super long its height is set to have a maximum. But what that means is the header and footer is always visible in the viewport, so I'm not sure I follow entirely.

i think it actually means the header and footer is not always in the viewport, if it has super long vertical content

you can set a fixed height box inside the modal body to simulate it, incubate the design and once everyone happy we have the best solution we can promote that and our findings into the system. Does that sound like something the team would be willing to do? Do the research, Incubate the design solution and promote?

we have and probably will continue implementing design patterns in our systems, if anything this discussion is to open up visibility with the overarching DSYS team and to see what they think of it before we've veered too far off the path. For example in #1238, the modal i've linked also implements the multi-step modal that @andipants12 has discussed previously in #639 and #790.

[SiTaggart]

So it looks like you are wrapping quite a bit of stuff around the modal header, body and footer which is causing the styles to break like this.

It should work like https://twilio-labs.github.io/paste/?path=/story/components-modal--overflowing-body-content

[vankhoawin]

ahh okay, this is probably because of the multi-step modal mentioned above, there's an additional wrapper to add the styling animation. will look into it from our side, thanks!