feat: improve api for controlling modal size with datetime

[patriksh]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When using ion-datetime in a modal as suggested by the documentation:

<ion-button id="open-modal">Open Datetime Modal</ion-button>
    <ion-modal trigger="open-modal">
    <ion-content>
        <ion-datetime></ion-datetime>
    </ion-content>
</ion-modal>

the modal is opened fullscreen and it looks nothing like the example in docs.

Expected Behavior

Modal shouldn't have background, datetime should be centered.

Steps to Reproduce

Use the above mentioned example code in an Ionic Vue project.

Code Reproduction URL

https://github.com/dftd/ionic-6-vue-datetime-modal

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.0-rc.3

Capacitor:

Capacitor CLI : 3.3.2
@capacitor/android : not installed
@capacitor/core : 3.3.2
@capacitor/ios : not installed

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node)
npm : 6.14.15
OS : Linux 5.15

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Modal does not currently make any assumptions about the content inside of it, so it is on the user to ensure the modal is properly sized. For now, you will need to use the --width and --height CSS Variables on ion-modal to get the modal size properly.

It was previously discussed (I think in #23518) to have an API for modal that automatically snaps to fit the size of the inner content. Now that we have more use cases, it might be worth looking into this a bit more. This may not end up being the correct solution, but regardless I think this developer experience needs to be improved a bit.

[liamdebeasi]

Thanks for the issue. In the next minor release of Ionic, we will be introducing a component called ion-datetime-button which will make it easy to display a datetime in a modal or popover. By using this component, the overlay will be sized automatically.

Below is a demo of the new component:

datetime-button-demo.mp4

This feature can also be customized according to the presentation property on ion-datetime to show the different selection types. Additionally, the buttons that are rendered can be customized to show other text or icons.

edit: Docs for this are on the way. But for now you can see a work-in-progress version here: https://ionic-docs-git-546-docs-ionic1.vercel.app/docs/api/datetime-button

[patriksh]

Great, thank you! This will finally force me to upgrade the rest of my projects to Ionic 6. Didn't want to bother with the datetime before. :)

[liamdebeasi]

Great! Let me know if you run into any issues with the migration.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.