fix: inherit font-size on AlertModal title and set line-height on all modal titles

[adamstankiewicz]

Description

#3129

The AlertModal title was previously styled with $h4-font-size, despite the Figma showing it styled as an h3. The default modal title font size is $h3-font-size, so removing the $h4-font-size falls back to the standard $h3-font-size instead, as expected.

[context] This has often led to consuming MFEs to try to override the default AlertModal titles on their end vs. fixing the problem upstream (e.g., nesting an h3 within the rendered h2 leading to invalid HTML, not using the title prop, etc.).

Figma

Original AlertModal

Left: @openedx/brand-openedx
Right: @edx/brand-edx.org

Note the h4-styled title and line-height issue with @edx/brand-edx.org.

Updated AlertModal

Left: @openedx/brand-openedx
Right: @edx/brand-edx.org

Note the h3-styled title and resolved line-height issue with @edx/brand-edx.org.

Deploy Preview

https://deploy-preview-3448--paragon-openedx-v22.netlify.app/components/modal/alert-modal/

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx-v22 ready!

Name	Link
🔨 Latest commit	f718330
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx-v22/deploys/67bdd6a48d12a10008613c39
😎 Deploy Preview	https://deploy-preview-3448--paragon-openedx-v22.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.40%. Comparing base (01a0363) to head (f718330).
Report is 1 commits behind head on release-22.x.

Additional details and impacted files

@@              Coverage Diff              @@
##           release-22.x    #3448   +/-   ##
=============================================
  Coverage         93.40%   93.40%           
=============================================
  Files               252      252           
  Lines              4534     4534           
  Branches           1061     1066    +5     
=============================================
  Hits               4235     4235           
  Misses              292      292           
  Partials              7        7           

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

[adamstankiewicz]

[inform] Brand packages might override the default font-size/line-height of headings (e.g., h2 elements). As such, when using @edx/brand-edx.org, the .pgn__modal-title's, while the font-size is correct per .pgn__modal-title, the overridden line-height applied for the h2 element used for the modal title vs. relying on the changed h3's line-height. Explicitly calculating the line-height for .pgn__modal-title ensures the overridden h2 element line-height does not apply to modal titles.

[adamstankiewicz]

Note: when this change gets ported to v23, the SCSS variables will need to change to the corresponding CSS variables, and likely using calc(...).

Source

[adamstankiewicz]

[inform] Per Figma, it appears all modal dialog types (including AlertModal should have title font size of $h3-font-size.

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.15.3 🎉

The release is available on:

• npm package (@release-22.x dist-tag)
• GitHub release

Your semantic-release bot 📦🚀