Ionic V4: ion-modal just like ion-alert - ionic-framework

Question

The following ion-alert would be exactly what we need if the input was replaced with a textarea; however, ion-alert doesn't support ion-textarea.
How can the exact same look and feel be implemented with an ion-modal?
We are using Ionic without Angular (Ionic core).
ion-alert code
const alert = await alertController.create({
header: 'Would you be willing to leave feedback?',
inputs: [
{
placeholder: 'enter text'
}],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: _ => {
alert.dismiss();
console.log('cancel');
}
}, {
text: 'Submit',
handler: _ => {
alert.dismiss();
console.log('submit');
}
}
]
});
alert.present();
attempted ion-modal code
const modalController = $('ion-modal-controller')[0];
await modalController.componentOnReady();
const modalElement = await modalController.create({
showBackdrop: true,
component:
$(`<div>
<h2>Would you be willing to provide feedback?</h2>
<div>
<ion-button>Cancel</ion-button>
<ion-button>Submit</ion-button>
</div>
</div>`)[0]
});
await modalElement.present();

Answer 1

In the page where you call the modal:
async book() {
const modal = await this.modalController.create({
component: BookModal,
componentProps: { value: 123 },
showBackdrop: true,
backdropDismiss: true,
cssClass: ['booking-modal']
});
return await modal.present();
}
The key point is the cssClass. Then in theme/variable.scss, add the class at the end of the file like below:
.booking-modal {
--height: 50% !important;
}
** Note: this might not be the correct way to do it, but it works for me at this stage. Looking for a better solution.