feat(alert): add ability to use alert inline (#26316)

core/api.txt

@@ -80,20 +80,26 @@ ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-alert,prop,header,string | undefined,undefined,false,false
 ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-alert,prop,inputs,AlertInput[],[],false,false
+ion-alert,prop,isOpen,boolean,false,false,false
 ion-alert,prop,keyboardClose,boolean,true,false,false
 ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
 ion-alert,prop,translucent,boolean,false,false,false
+ion-alert,prop,trigger,string | undefined,undefined,false,false
 ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-alert,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-alert,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-alert,method,present,present() => Promise<void>
+ion-alert,event,didDismiss,OverlayEventDetail<any>,true
+ion-alert,event,didPresent,void,true
 ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertDidPresent,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertWillPresent,void,true
+ion-alert,event,willDismiss,OverlayEventDetail<any>,true
+ion-alert,event,willPresent,void,true
 ion-alert,css-prop,--backdrop-opacity
 ion-alert,css-prop,--background
 ion-alert,css-prop,--height

core/src/components.d.ts

@@ -171,6 +171,7 @@ export namespace Components {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Dismiss the alert overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
@@ -181,6 +182,7 @@ export namespace Components {
           * Animation to use when the alert is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController": boolean;
         /**
           * The main title in the heading of the alert.
          */
@@ -193,6 +195,10 @@ export namespace Components {
           * Array of input to show in the alert.
          */
         "inputs": AlertInput[];
+        /**
+          * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
+         */
+        "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -230,6 +236,10 @@ export namespace Components {
           * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the alert to open when clicked.
+         */
+        "trigger": string | undefined;
     }
     interface IonApp {
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
@@ -3998,10 +4008,12 @@ declare namespace LocalJSX {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Animation to use when the alert is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController"?: boolean;
         /**
           * The main title in the heading of the alert.
          */
@@ -4014,6 +4026,10 @@ declare namespace LocalJSX {
           * Array of input to show in the alert.
          */
         "inputs"?: AlertInput[];
+        /**
+          * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
+         */
+        "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -4030,6 +4046,14 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.
+         */
+        "onDidDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.
+         */
+        "onDidPresent"?: (event: IonAlertCustomEvent<void>) => void;
         /**
           * Emitted after the alert has dismissed.
          */
@@ -4046,6 +4070,14 @@ declare namespace LocalJSX {
           * Emitted before the alert has presented.
          */
         "onIonAlertWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
+        /**
+          * Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.
+         */
+        "onWillDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the alert has presented. Shorthand for ionAlertWillPresent.
+         */
+        "onWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * The subtitle in the heading of the alert. Displayed under the title.
@@ -4055,6 +4087,10 @@ declare namespace LocalJSX {
           * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the alert to open when clicked.
+         */
+        "trigger"?: string | undefined;
     }
     interface IonApp {
     }

core/src/components/alert/alert.tsx

@@ -9,10 +9,21 @@ import type {
   CssClassMap,
   OverlayEventDetail,
   OverlayInterface,
+  FrameworkDelegate,
 } from '../../interface';
 import type { Gesture } from '../../utils/gesture';
 import { createButtonActiveGesture } from '../../utils/gesture/button-active';
-import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
+import {
+  createDelegateController,
+  createTriggerController,
+  BACKDROP,
+  dismiss,
+  eventMethod,
+  isCancel,
+  prepareOverlay,
+  present,
+  safeCall,
+} from '../../utils/overlays';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -34,12 +45,16 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Alert implements ComponentInterface, OverlayInterface {
+  private readonly delegateController = createDelegateController(this);
+  private readonly triggerController = createTriggerController();
+
   private activeId?: string;
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
   private processedButtons: AlertButton[] = [];
   private wrapperEl?: HTMLElement;
   private gesture?: Gesture;
+  private currentTransition?: Promise<any>;
 
   presented = false;
   lastFocus?: HTMLElement;
@@ -49,6 +64,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /** @internal */
+  @Prop() delegate?: FrameworkDelegate;
+
+  /** @internal */
+  @Prop() hasController = false;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -123,6 +144,36 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Prop() htmlAttributes?: { [key: string]: any };
 
+  /**
+   * If `true`, the alert will open. If `false`, the alert will close.
+   * Use this if you need finer grained control over presentation, otherwise
+   * just use the alertController or the `trigger` property.
+   * Note: `isOpen` will not automatically be set back to `false` when
+   * the alert dismisses. You will need to do that in your code.
+   */
+  @Prop() isOpen = false;
+  @Watch('isOpen')
+  onIsOpenChange(newValue: boolean, oldValue: boolean) {
+    if (newValue === true && oldValue === false) {
+      this.present();
+    } else if (newValue === false && oldValue === true) {
+      this.dismiss();
+    }
+  }
+
+  /**
+   * An ID corresponding to the trigger element that
+   * causes the alert to open when clicked.
+   */
+  @Prop() trigger: string | undefined;
+  @Watch('trigger')
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
+    }
+  }
+
   /**
    * Emitted after the alert has presented.
    */
@@ -143,6 +194,30 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionAlertDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  /**
+   * Emitted after the alert has presented.
+   * Shorthand for ionAlertWillDismiss.
+   */
+  @Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the alert has presented.
+   * Shorthand for ionAlertWillPresent.
+   */
+  @Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the alert has dismissed.
+   * Shorthand for ionAlertWillDismiss.
+   */
+  @Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
+  /**
+   * Emitted after the alert has dismissed.
+   * Shorthand for ionAlertDidDismiss.
+   */
+  @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
   @Listen('keydown', { target: 'document' })
   onKeydown(ev: any) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
@@ -247,6 +322,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   connectedCallback() {
     prepareOverlay(this.el);
+    this.triggerChanged();
   }
 
   componentWillLoad() {
@@ -255,6 +331,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 
   disconnectedCallback() {
+    this.triggerController.removeClickListener();
+
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -282,8 +360,24 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * Present the alert overlay after it has been created.
    */
   @Method()
-  present(): Promise<void> {
+  async present(): Promise<void> {
-    return present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    /**
+     * When using an inline alert
+     * and dismissing an alert it is possible to
+     * quickly present the alert while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
+
+    await this.delegateController.attachViewToDom();
+
+    this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    await this.currentTransition;
+    this.currentTransition = undefined;
   }
 
   /**
@@ -296,8 +390,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
-  dismiss(data?: any, role?: string): Promise<boolean> {
+  async dismiss(data?: any, role?: string): Promise<boolean> {
-    return dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
+    const dismissed = await this.currentTransition;
+
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
+    }
+
+    return dismissed;
   }
 
   /**

core/src/components/alert/test/isOpen/alert.e2e.ts

@@ -0,0 +1,30 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('alert: isOpen', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('isOpen does not behave differently in RTL');
+    skip.mode('md', 'isOpen does not behave differently in MD');
+    await page.goto('/src/components/alert/test/isOpen');
+  });
+
+  test('should open the alert', async ({ page }) => {
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    await page.click('#default');
+
+    await ionAlertDidPresent.next();
+    await page.waitForSelector('ion-alert', { state: 'visible' });
+  });
+
+  test('should open the alert then close after a timeout', async ({ page }) => {
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+    await page.click('#timeout');
+
+    await ionAlertDidPresent.next();
+    await page.waitForSelector('ion-alert', { state: 'visible' });
+
+    await ionAlertDidDismiss.next();
+
+    await page.waitForSelector('ion-alert', { state: 'hidden' });
+  });
+});

core/src/components/alert/test/isOpen/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Alert - isOpen</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Alert - isOpen</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-button id="default" onclick="openAlert()">Open Alert</ion-button>
+        <ion-button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</ion-button>
+
+        <ion-alert header="Alert" message="Hello World!"></ion-alert>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const alert = document.querySelector('ion-alert');
+      alert.buttons = ['OK'];
+
+      const openAlert = (timeout) => {
+        alert.isOpen = true;
+
+        if (timeout) {
+          setTimeout(() => {
+            alert.isOpen = false;
+          }, timeout);
+        }
+      };
+
+      alert.addEventListener('ionAlertDidDismiss', () => {
+        alert.isOpen = false;
+      });
+    </script>
+  </body>
+</html>

core/src/components/alert/test/trigger/alert.e2e.ts

@@ -0,0 +1,31 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('alert: trigger', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('trigger does not behave differently in RTL');
+    skip.mode('md');
+    await page.goto('/src/components/alert/test/trigger');
+  });
+
+  test('should open the alert', async ({ page }) => {
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    await page.click('#default');
+
+    await ionAlertDidPresent.next();
+    await page.waitForSelector('#default-alert', { state: 'visible' });
+  });
+
+  test('should present a previously presented alert', async ({ page }) => {
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+    await page.click('#timeout');
+
+    await ionAlertDidDismiss.next();
+
+    await page.click('#timeout');
+
+    await ionAlertDidPresent.next();
+    await page.waitForSelector('#timeout-alert', { state: 'visible' });
+  });
+});

core/src/components/alert/test/trigger/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Alert - Trigger</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Alert - Trigger</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-button id="default">Open Alert</ion-button>
+        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
+
+        <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
+        <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const defaultAlert = document.querySelector('#default-alert');
+      const timeoutAlert = document.querySelector('#timeout-alert');
+
+      defaultAlert.buttons = ['OK'];
+      timeoutAlert.buttons = ['OK'];
+
+      timeoutAlert.addEventListener('didPresent', () => {
+        setTimeout(() => {
+          timeoutAlert.dismiss();
+        }, 500);
+      });
+    </script>
+  </body>
+</html>

core/src/utils/framework-delegate.ts

@@ -86,7 +86,14 @@ export const CoreDelegate = () => {
       BaseComponent.appendChild(el);
 
       await new Promise((resolve) => componentOnReady(el, resolve));
-    } else if (BaseComponent.children.length > 0) {
+    } else if (
+      BaseComponent.children.length > 0 &&
+      (BaseComponent.tagName === 'ION-MODAL' || BaseComponent.tagName === 'ION-POPOVER')
+    ) {
+      /**
+       * The delegate host wrapper el is only needed for modals and popovers
+       * because they allow the dev to provide custom content to the overlay.
+       */
       const root = BaseComponent.children[0] as HTMLElement;
       if (!root.classList.contains('ion-delegate-host')) {
         /**

packages/react/src/components/IonAlert.tsx

@@ -1,10 +1,9 @@
-import { AlertOptions, alertController } from '@ionic/core/components';
+import { JSX } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-alert.js';
 
-import { createControllerComponent } from './createControllerComponent';
+import { createInlineOverlayComponent } from './createInlineOverlayComponent';
 
-export const IonAlert = /*@__PURE__*/ createControllerComponent<AlertOptions, HTMLIonAlertElement>(
+export const IonAlert = /*@__PURE__*/ createInlineOverlayComponent<JSX.IonAlert, HTMLIonAlertElement>(
   'ion-alert',
-  alertController,
   defineCustomElement
 );

packages/react/test-app/tests/e2e/specs/overlay-components/IonAlert.cy.ts

@@ -13,7 +13,7 @@ describe('IonAlert', () => {
     //click ok
     cy.get('ion-alert').get('button:contains("Ok")').click();
     cy.get('div').contains('Ok clicked');
-    cy.get('ion-alert').should('not.exist');
+    cy.get('ion-alert').should('not.be.visible');
   });
 
   it('display alert and call dismiss to close it', () => {
@@ -22,6 +22,6 @@ describe('IonAlert', () => {
     cy.get('ion-alert').contains('Alert');
 
     //verify alert is gone
-    cy.get('ion-alert').should('not.exist');
+    cy.get('ion-alert').should('not.be.visible');
   });
 });

packages/vue/scripts/copy-overlays.js

@@ -9,7 +9,6 @@ function generateOverlays() {
     },
     {
       tag: 'ion-alert',
-      controller: 'alertController',
       name: 'IonAlert'
     },
     {

packages/vue/src/components/Overlays.ts

@@ -5,7 +5,6 @@
 
 import {
   JSX,
-  alertController,
   pickerController,
 } from '@ionic/core/components';
 
@@ -21,7 +20,7 @@ import { defineOverlayContainer } from '../vue-component-lib/overlays';
 
 export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
     
-export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
+export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
     
 export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
     

packages/vue/test/base/tests/e2e/specs/overlays.cy.js

@@ -94,7 +94,7 @@ describe('Overlays', () => {
   });
 
   it(`should open and close ion-alert via component`, () => {
-    testComponent('ion-alert');
+    testInlineOverlay('ion-alert');
   });
 
   it(`should open and close ion-action-sheet via component`, () => {