feat(modal): added align-top variation

[mcoker]

Documentation - https://patternfly-pr-3435.surge.sh/documentation/core/components/modalbox

Demo - https://patternfly-pr-3435.surge.sh/documentation/core/demos/modal/top-aligned

---

fixes #3405

After looking at this some more, I think introducing a dialog layout would be too much hassle than it's worth at this point. We can just reposition the modal within the bullseye for now, and that should work fine. In an upcoming breaking change release we can re-evaluate and refactor the modal-box just to be a box and move all of the positioning, max-widths/heights, etc from it to the modal to a dialog layout.

I also evened out the outer spacing for this variation so that the top/bottom/left/right spacing around the modal is all the same.

[patternfly-build]

Preview: https://patternfly-pr-3435.surge.sh

CSS Size Report

Name	Current	Previous	Diff %
components/ModalBox/modal-box.css	6.2 kB	5.4 kB	13.60
patternfly.min.css	717.8 kB	717.1 kB	0.11
patternfly-no-reset.css	811.9 kB	811.0 kB	0.10
patternfly.css	813.8 kB	812.9 kB	0.10

A11y report: https://patternfly-pr-3435-coverage.surge.sh

[mcarrano]

This looks good to me @mcoker .

@ziccardi @garrett Can you review and confirm that this will address your original ask here: patternfly/patternfly-design#890

[garrett]

I don't know how I can check this in Cockpit or even see an isolated demo page... but when looking at the code and the screenshots, it looks like the dialog modification in this PR is stretched to the content area?

We don't need all of our dialogs to be as large as possible. Although, I guess, these larger fullscreen dialogs might be useful for some — and perhaps even for us too, if we designed for it. (This might especially be the case if we had a way to toggle between normal and maximized mode, I guess?)

What we definitely need: Dialogs that can be positioned relative to the top, so:

1. when content changes it doesn't move all the widgets
2. dialogs are more properly balanced, as they're aligned downward due to being middle-aligned in an iframe (so the heading isn't accounted for, and it shoves everything further down)

Context of the issues we're facing with the currently center-aligned dialogs in Cockpit @ patternfly/patternfly-design#890 (with screenshots)

[mcoker]

@garrett if my guess at the markup is correct, this is what the top-aligned modal in this PR will look like in a patternfly page where the content in the main section is an iframe - https://codepen.io/mcoker/pen/NWNvpqp

I just added the top-aligned example from https://patternfly-pr-3435.surge.sh/documentation/core/demos/modal/top-aligned as inline code for the iframe, with a <link> to the stylesheet from that PR. How does that look?

[garrett]

@mcoker: Oh! That would look nice.

I was thrown off by the isFullscreen and the screenshots... which I guess are large because of the content.

(I wonder if there's a way to view branches of PF in Cockpit. Perhaps @KKoukiou or @martinpitt might know.)

[mattnolting]

LPTM 👍

[ziccardi]

LGTM 👍

[christiemolloy]

i've seen some product designs that used patternfly in the past position their modal at the very top of the page without the margin. I could definitely see this being a use case, because right now it looks like its floating especially at xl size. do you think we should support this use case?

[mcoker]

cc @mcarrano wdyt about christie's comment, should we offer a top variation with no margin

[mcarrano]

i've seen some product designs that used patternfly in the past position their modal at the very top of the page without the margin. I could definitely see this being a use case, because right now it looks like its floating especially at xl size. do you think we should support this use case?

I'm inclined to say no, @mcoker @christiemolloy . But what do you think, @mceledonia ?

[christiemolloy]

lgtm! we can always add a variation for the modal to sit at the very top later

[redallen]

🎉 This PR is included in version 4.39.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀