From df24c8c5ae0b493841c07c05e0d620fa4a90c05a Mon Sep 17 00:00:00 2001 From: Dominik Geng Date: Fri, 23 Jul 2021 18:46:01 +0200 Subject: [PATCH] feat(toast): add icon property to show icon at start of toast content (#23596) resolves #23524 Co-authored-by: William Martin Co-authored-by: Liam DeBeasi --- core/api.txt | 2 ++ core/src/components.d.ts | 8 +++++++ core/src/components/toast/readme.md | 23 +++++++++++++++---- .../components/toast/test/basic/index.html | 16 +++++++++++-- core/src/components/toast/toast.scss | 6 ++++- core/src/components/toast/toast.tsx | 13 ++++++++++- core/src/components/toast/usage/angular.md | 3 ++- core/src/components/toast/usage/javascript.md | 3 ++- core/src/components/toast/usage/react.md | 2 ++ core/src/components/toast/usage/stencil.md | 5 ++-- core/src/components/toast/usage/vue.md | 6 +++-- 11 files changed, 72 insertions(+), 15 deletions(-) diff --git a/core/api.txt b/core/api.txt index 2e4fda2c20..62110ab2d8 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1345,6 +1345,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false ion-toast,prop,duration,number,0,false,false ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,header,string | undefined,undefined,false,false +ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false @@ -1379,6 +1380,7 @@ ion-toast,css-prop,--width ion-toast,part,button ion-toast,part,container ion-toast,part,header +ion-toast,part,icon ion-toast,part,message ion-toggle,shadow diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 294b6291ae..d50346b42d 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2770,6 +2770,10 @@ export namespace Components { * Header to be shown in the toast. */ "header"?: string; + /** + * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons + */ + "icon"?: string; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -6366,6 +6370,10 @@ declare namespace LocalJSX { * Header to be shown in the toast. */ "header"?: string; + /** + * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons + */ + "icon"?: string; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index ea6324d5b5..8983111e71 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -10,6 +10,10 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `"cancel"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance. +## Icons + +An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](../alert) instead. + ## Interfaces ### ToastButton @@ -80,6 +84,7 @@ export class ToastExample { const toast = await this.toastController.create({ header: 'Toast header', message: 'Click to Close', + icon: 'information-circle', position: 'top', buttons: [ { @@ -99,7 +104,7 @@ export class ToastExample { ] }); await toast.present(); - + const { role } = await toast.onDidDismiss(); console.log('onDidDismiss resolved with role', role); } @@ -124,6 +129,7 @@ async function presentToastWithOptions() { const toast = document.createElement('ion-toast'); toast.header = 'Toast header'; toast.message = 'Click to Close'; + toast.icon = 'information-circle', toast.position = 'top'; toast.buttons = [ { @@ -144,7 +150,7 @@ async function presentToastWithOptions() { document.body.appendChild(toast); await toast.present(); - + const { role } = await toast.onDidDismiss(); console.log('onDidDismiss resolved with role', role); } @@ -198,6 +204,7 @@ const ToastExample: React.FC = () => { import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; +import { informationCircle } from 'ionicons/icons'; export const ToastExample: React.FC = () => { const [showToast1, setShowToast1] = useState(false); @@ -218,6 +225,7 @@ export const ToastExample: React.FC = () => { isOpen={showToast2} onDidDismiss={() => setShowToast2(false)} message="Click to Close" + icon={informationCircle} position="top" buttons={[ { @@ -267,6 +275,7 @@ export class ToastExample { const toast = await toastController.create({ header: 'Toast header', message: 'Click to Close', + icon: 'information-circle', position: 'top', buttons: [ { @@ -286,7 +295,7 @@ export class ToastExample { ] }); await toast.present(); - + const { role } = await toast.onDidDismiss(); console.log('onDidDismiss resolved with role', role); } @@ -317,6 +326,7 @@ export class ToastExample {