Bugfix - Modals hanging around in editor

[tyleralsbury]

When a section is hidden or removed in the editor, the associated modals that had been moved to the end of the body would stick around. Now they don't. This fixes a visual bug in Featured Product where when you hide it, because the CSS to hide the modal is part of that section is gone, the gallery images will show up at the bottom of the page.

Note: This fix does implements the behaviour for all sections that use the ModalDialog component (and components that extend it). When the section:unload event happens, we go looking for any stragglers that may exist by their section ID.

Testing steps/scenarios

• On main, add a Featured Product section to the homepage (make sure there aren't any others) with a product that has multiple images
• Save
• Hide the section
• Scroll to the bottom - note the pictures.
• For extra fun, hide and show the section a few times - woah! Even more pictures!
• To prove that the CSS is the reason the pictures are now visible, add another Featured Product section and note that they are gone!
• Check the DOM, there are lots of duplicate modals down there

Now do the same thing on this branch! Pictures don't show up where they shouldn't and are cleaned up when the section is unloaded.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[alexandcote]

I 🎩 the branch and everything seem to work as describe 👍🏻

The DOM also doesn't contain multiple modal anymore 💯

[melissaperreault]

No bug found! Thanks for crushing this wild one!