-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(toast): add ability to use toast inline (#26215)
- Loading branch information
1 parent
92b763a
commit 003de44
Showing
12 changed files
with
322 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="ltr"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Toast - 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>Toast - isOpen</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content class="ion-padding"> | ||
| <ion-button id="default" onclick="openToast()">Open Toast, 2s Duration</ion-button> | ||
| <ion-button id="timeout" onclick="openToast(500)">Open Toast, Close Manually After 500ms</ion-button> | ||
|
|
||
| <ion-toast message="Hello World" duration="2000"></ion-toast> | ||
| </ion-content> | ||
| </ion-app> | ||
|
|
||
| <script> | ||
| const toast = document.querySelector('ion-toast'); | ||
|
|
||
| const openToast = (timeout) => { | ||
| toast.isOpen = true; | ||
|
|
||
| if (timeout) { | ||
| setTimeout(() => { | ||
| toast.isOpen = false; | ||
| }, timeout); | ||
| } | ||
| }; | ||
|
|
||
| toast.addEventListener('ionToastDidDismiss', () => { | ||
| toast.isOpen = false; | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { test } from '@utils/test/playwright'; | ||
|
|
||
| test.describe('toast: 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/toast/test/isOpen'); | ||
| }); | ||
|
|
||
| test('should open the toast', async ({ page }) => { | ||
| const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); | ||
| await page.click('#default'); | ||
|
|
||
| await ionToastDidPresent.next(); | ||
| await page.waitForSelector('ion-toast', { state: 'visible' }); | ||
| }); | ||
|
|
||
| test('should open the toast then close after a timeout', async ({ page }) => { | ||
| const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); | ||
| const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss'); | ||
| await page.click('#timeout'); | ||
|
|
||
| await ionToastDidPresent.next(); | ||
| await page.waitForSelector('ion-toast', { state: 'visible' }); | ||
|
|
||
| await ionToastDidDismiss.next(); | ||
|
|
||
| await page.waitForSelector('ion-toast', { state: 'hidden' }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="ltr"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Toast - 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>Toast - Trigger</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content class="ion-padding"> | ||
| <ion-button id="default">Open Toast, 2s Duration</ion-button> | ||
| <ion-button id="timeout">Open Toast, Close Manually After 500ms</ion-button> | ||
|
|
||
| <ion-toast id="default-toast" trigger="default" message="Hello World" duration="2000"></ion-toast> | ||
| <ion-toast id="timeout-toast" trigger="timeout" message="Hello World" duration="2000"></ion-toast> | ||
| </ion-content> | ||
| </ion-app> | ||
|
|
||
| <script> | ||
| const timeoutToast = document.querySelector('#timeout-toast'); | ||
|
|
||
| timeoutToast.addEventListener('didPresent', () => { | ||
| setTimeout(() => { | ||
| timeoutToast.dismiss(); | ||
| }, 500); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { test } from '@utils/test/playwright'; | ||
|
|
||
| test.describe('toast: trigger', () => { | ||
| test.beforeEach(async ({ page, skip }) => { | ||
| skip.rtl('trigger does not behave differently in RTL'); | ||
| skip.mode('md'); | ||
| await page.goto('/src/components/toast/test/trigger'); | ||
| }); | ||
|
|
||
| test('should open the toast', async ({ page }) => { | ||
| const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); | ||
| await page.click('#default'); | ||
|
|
||
| await ionToastDidPresent.next(); | ||
| await page.waitForSelector('#default-toast', { state: 'visible' }); | ||
| }); | ||
|
|
||
| test('should present a previously presented toast', async ({ page }) => { | ||
| const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); | ||
| const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss'); | ||
|
|
||
| await page.click('#timeout'); | ||
|
|
||
| await ionToastDidDismiss.next(); | ||
|
|
||
| await page.click('#timeout'); | ||
|
|
||
| await ionToastDidPresent.next(); | ||
| await page.waitForSelector('#timeout-toast', { state: 'visible' }); | ||
| }); | ||
| }); |
Oops, something went wrong.