feat: allow consumers to configure ModalDialog to allow overflow

[brian-smith-tcril]

Description

Resolves #2938

Deploy Preview

Playground

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 add wittjeff and adamstankiewicz as reviewers on this PR.

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 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2fb98e0
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/659ed41339f1c600085532b5
😎 Deploy Preview	https://deploy-preview-2939--paragon-openedx.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.

[PKulkoRaccoonGang]

Please try this. I think this option looks better:

Suggested change

	&.pgn__modal-visible-overflow {
	overflow: visible;
	.pgn__modal-body {
	overflow: visible;
	}
	}
	&.pgn__modal-visible-overflow .pgn__modal-body {
	overflow: visible;
	}

[brian-smith-tcril]

That doesn't work as we need to overflow both pgn__modal-body and pgn__modal. Your suggestion is missing the

  &.pgn__modal-visible-overflow {
    overflow: visible;
  }

part.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (6927788) 93.00% compared to head (a1acfa0) 93.00%.

❗ Current head a1acfa0 differs from pull request most recent head 2fb98e0. Consider uploading reports for the commit 2fb98e0 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2939   +/-   ##
=======================================
  Coverage   93.00%   93.00%           
=======================================
  Files         236      236           
  Lines        4273     4273           
  Branches     1033     1033           
=======================================
  Hits         3974     3974           
  Misses        295      295           
  Partials        4        4           

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

[rpenido]

Thank you for this PR @brian-smith-tcril! 👍
I'm using this CSS before we merge and update the package!

I found a nit: The top border of the dialog is not rounded after setting the overflow.

But if it's not easily fixed, I don't think this should prevent this PR from getting merged.

[brian-smith-tcril]

Thank you for this PR @brian-smith-tcril! 👍 I'm using this CSS before we merge and update the package!

I found a nit: The top border of the dialog is not rounded after setting the overflow.

But if it's not easily fixed, I don't think this should prevent this PR from getting merged.

Fixed! https://github.com/openedx/paragon/compare/6b611a0cdf4a65826a3ce48491ea173a35a3ce16..a1acfa0375f16088d49ea46a6f2acfa94a222bcf

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀