ConfirmDialog: Improve styles, and use for block removal warning

[annezazu]

Using 6.5-alpha-57531, I noticed the text for deleting a pattern category is quite squished when compared to other modals as shown below.

Screenshot of deleting a pattern category modal:

Screenshot of warning about deleting a query loop block on a template:

Can we unify this a bit more and adding a proper heading to the delete modal too for consistency? cc @WordPress/gutenberg-design for any thoughts here.

[t-hamano]

At least the current title feels a little pretentious to me. For example, I think it would be a good idea to indicate what we are trying to do with a title like "Delete Something".

Another approach, as shown in #58390, is to unify all buttons that perform destructive actions in red and remove the title.

[talldan]

the text for deleting a pattern category is quite squished when compared to other modals

Are you thinking the line-height of the text, width of the modal, or both? I agree it does look a bit squished, mostly the line-height, but perhaps the modal could be wider too.

The Pattern Category modal uses the general ConfirmDialog component and the line height is controlled by that component (though it also has a custom width set, not sure why):
https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-confirmdialog--docs

The block removal modal doesn't use ConfirmDialog, but it really should for consistency of styles.

Then it's just a situation of updating the styles for ConfirmDialog and it should be consistent everywhere.

[jameskoster]

ConfirmDialog could be updated to use the new(ish) size property on Modal. Maybe it can already be passed and we just need to update the instances?

I don't see any reason for the text styling to be different in these examples.

[talldan]

It looks like the reason the pattern category dialog has a custom width is that without it the ConfirmDialog takes up the width of the content, so when there's long text it gets quite wide. I think it should really have a hard coded width of the 'small' or 'medium' modal size.

Also worth noting the responsiveness of these modals is not great, there's a lot of empty space! I think there's a bit of work to do here all around:

[jameskoster]

If it's possible to detect, we might improve usability on small touch devices (phones) by pinning these to the bottom of the viewport and making the confirm/cancel buttons fill, e.g.:

[richtabor]

If it's possible to detect, we might improve usability on small touch devices (phones) by pinning these to the bottom of the viewport and making the confirm/cancel buttons fill, e.g.:

I like the presentation better generally, even for desktop ha :)

[jameskoster]

Perhaps there's a way to tie to presentation of the actions to the modal dimensions. IE if the size is small (384px) or less, make the buttons fill. Agree it could work well on desktop too.

[jasmussen]

If we want to change the details we should change them across, I'd avoid having one style for either viewport. I also think we can look at this holistically in a design system, rather than piecemeal.

[talldan]

Modal for deleting a pattern category needs to be:

Other way around, it's the block removal warning that's not using ConfirmDialog, though at the same time it looks better than ConfirmDialog. So I think the plan should be:

• Improve the styles for ConfirmDialog (line height, sizing, etc.)
• Update the block removal warning to use ConfirmDialog instead of its custom implementation.

[annezazu]

What can we do to iterate and improve for 6.5? I'd like to see the modal updated to be consistent with other modals and, ideally, we can ship some modal responsiveness improvements. @scruffian tagging you in as you very kindly recently helped with this!

[youknowriad]

Given that RC1 is today I'm removing this one from 6.5 as non essential.

[scruffian]

I made a PR to deal with this but I am concerned that it might be too big a change: #59645