MWPW-144813: Add 'xl-size' class for dialog-modal

[mirafedas]

This change adds a new xl-size class for the modal window, which allows the modal window to fill all available screen height on mobile and tablet, and to be wider on desktop.
We set this class to the modal window that renders an iframe with the following pages:
https://www.adobe.com/creativecloud/whats-included/mini-plans/cci-all-apps-whats-included.html
https://www.adobe.com/creativecloud/whats-included/mini-plans/edu-all-apps-whats-included.html
https://www.adobe.com/creativecloud/whats-included/mini-plans/cct-all-apps-whats-included.html
https://www.adobe.com/creativecloud/whats-included/plans/cci-all-apps-whats-included.html
https://www.adobe.com/creativecloud/whats-included/plans/edu-all-apps-whats-included.html
https://www.adobe.com/creativecloud/whats-included/plans/cct-all-apps-whats-included.html
We may use it later for other use cases as well.

Resolves: MWPW-144813

Test URLs:

• Before:
  https://main--milo--adobecom.hlx.live/drafts/mirafedas/all-modals#cci-all-apps-whats-included
• After:
  https://mwpw-144813-whatsincluded-styles--milo--mirafedas.hlx.page/drafts/mirafedas/all-modals#see-whats-included-xl

Note:
Make sure the ModHeaders plugin has the frame-ancestors set to * in the CSP response modifiers, without this on the 'After' page the modal content will not render because of the CORS.

[aem-code-sync]

Page	Scores	Audits	Google
/drafts/mirafedas/all-modals

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.41%. Comparing base (94d3586) to head (7d53b31).

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2048      +/-   ##
==========================================
+ Coverage   96.38%   96.41%   +0.03%     
==========================================
  Files         166      166              
  Lines       43448    43448              
==========================================
+ Hits        41878    41892      +14     
+ Misses       1570     1556      -14     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[npeltier]

what are implicit values for those rules otherwise?
i'm noticing same setup for > 1200px and .dialog-modal.commerce-frame .milo-iframe

[mirafedas]

@npeltier
Without these rules:

• for the .dialog-modal the height value is 'fit-content'.
• for .fragment and .section we don't set values, so the default value ('auto') applies.
• for .milo-iframe height is set to 0, and padding-bottom to 56.25%.

The class .commerce-frame should be used only on commerce related modal windows.
'What's Included' content is not related to commerce, so it makes sense to use a more general class name.

[Roycethan]

@mirafedas Plz review this url once , , i still see the issue here:
https://main--cc--adobecom.hlx.page/drafts/fredw/document?milolibs=mwpw-144813-whatsincluded-styles--milo--mirafedas#modal-buy-ind

[mirafedas]

@Roycethan the modal you are checking has classes dialog-modal commerce-frame. We agreed that all non-commerce-related modals should not have the commerce-frame class, I guess the authors just didn't remove that class yet. To test the current change the modal should have classes dialog-modal xl, then it will be wider on desktop.
cc @afmicka

[overmyheadandbody]

Just a few notes:

• the modal content doesn't load on the After link, it might be worth checking out;
• if I'm remembering correctly, we don't usually have just .<size> classes, they-re attached to some other meaning, say .<size>-spacing. Do you have another reference to such classes, are we using this pattern anywhere else? We want to keep things as consistent as possible for authors, so this might deserve some attention. An author could interpret a simple xl as a font choice for example, the purpose should be clear

[mirafedas]

@overmyheadandbody
good point, I renamed xl > xl-size.
Do you have ModHeaders plugin enabled with the frame-ancestors set to * in the CSP response modifier? Without that due to CORS the modal content does not load. I just added this info to the PR description, thanks for the reminder :)

[overmyheadandbody]

Hey @mirafedas! Thanks for the changes! I just saw another PR, suggesting .size-s as a class name, could you consolidate and use one or the other?

[mirafedas]

@overmyheadandbody yes, doing that right now :)