fix(modal): allow for custom dialog implementations

[liamdebeasi]

Docs: ionic-team/ionic-docs#2444

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #24080

What is the new behavior?

• Allows developers to use ion-modal without ion-content in order to make custom dialogs. It also allows developers to have these dialogs be automatically sized by the browser (such as width: fit-content)

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 6.1.15-dev.11657743655.1e3dcc3c

[sean-perkins]

Nice work, opens up some creative options for modal implementations 🎉

[EinfachHans]

@liamdebeasi is this only for inline modals? Looks like it doesn't work for modals created via ModalController

[sean-perkins]

@EinfachHans this applies to all modals. The style changes are to the inner .ion-page element for all modals.

Inline example: https://stackblitz.com/edit/angular-nagmrz?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html

Controller example: https://stackblitz.com/edit/angular-4sfe9x?file=src%2Fstyles.css,src%2Fapp%2Fmodal-example.component.html

[EinfachHans]

@sean-perkins you're right, but doesn't work very well with ion-content inside of the modal 🤔

[sean-perkins]

@EinfachHans The intention of this feature is to be used without ion-content. The use case is when you have a modal that you want to size to its content's height.

e.g.: https://raw.githubusercontent.com/ionic-team/ionic-framework/ef8c2baffcf6ca3bef89841e9c1c7cb557fe6ec7/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png

We are not intending this to be used in combination with ion-content at this time.