Read-only modals

Is there a best practice for how to treat read-only modals in PF?

I have a use case where a user clicks on a link/etc to get more information. What happens, is that more information is shown in a modal dialog.
In this case, do I need a button, or can I just use the “X” in the corner?

Without close button

@Katie_Riker we never exactly wrote any guidelines to cover this use case as this is more like a drill-down to details than a standard modal workflow. I don’t see a problem with what you designed and don’t feel like it needs a button. My only question is whether this should be implemented in a popover vs a modal.

Would be interested to hear what others think.

@mcarrano @Katie_Riker I could go either way for popover vs modal. I agree I think its fine here from an interaction standpoint. @mcoker Are we able to remove the footer section of the modal here (since there are no buttons/content) so we don’t have that large area of white space at the bottom? Can’t remember if the modal is as flexible as our new cards where its easy to use whatever variety of sections works best.

@mcarrano We should add the option for clicking outside the modal to dismiss it as well. Make sure the default remains disabled to not break the existing behavior in wizards, etc.

2 Likes

Yes. Both core and React support a modal without a footer. In core you exclude the pf-c-modal-box__footer element, and in React, it looks like you exclude the actions prop.

With a close button

Wanted to share the latest @kybaker approved design for a footerless modal. This has no close button!
image%20(2)

I like it better without the Close button. Do you agree @Katie_Riker? What do others think?

Agreed from my side! The “X” in the corner is a very well established pattern so I believe it can stand on its own.

I’d like to add this to the library as a new demo, however the name “Read-Only Modal” might not be quite right. We have modal message dialogs, for example, that are also read-only but have buttons. Maybe it’s more like “Examine details?”