Implementing new shapes for ion-toast

Author: OS-pedrolourenco

core/api.txt

@@ -2376,6 +2376,7 @@ ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,fals
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
+ion-toast,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false
 ion-toast,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false

core/src/components.d.ts

@@ -3771,6 +3771,10 @@ export namespace Components {
           * Present the toast overlay after it has been created.
          */
         "present": () => Promise<void>;
+        /**
+          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
          */
@@ -9161,6 +9165,10 @@ declare namespace LocalJSX {
           * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
          */
         "positionAnchor"?: HTMLElement | string;
+        /**
+          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
          */

core/src/components/toast/test/basic/index.html

@@ -169,6 +169,30 @@
           Toast with Icon 3
         </button>
 
+        <button
+          class="expand"
+          id="soft-shape-toast"
+          onclick="openToast({ message: 'click to close', duration: 2000, shape: 'soft' })"
+        >
+          Soft Toast
+        </button>
+
+        <button
+          class="expand"
+          id="round-shape-toast"
+          onclick="openToast({ message: 'click to close', duration: 2000, shape: 'round' })"
+        >
+          Round Toast
+        </button>
+
+        <button
+          class="expand"
+          id="rect-shape-toast"
+          onclick="openToast({ message: 'click to close', duration: 2000, shape: 'rectangular' })"
+        >
+          Rectangular Toast
+        </button>
+
         <ion-grid>
           <ion-row>
             <ion-col size="6">

core/src/components/toast/toast.ionic.scss

@@ -6,7 +6,6 @@
 
 :host {
   --background: #{globals.$ionic-color-neutral-1200};
-  --border-radius: #{globals.$ionic-border-radius-400};
   --box-shadow: #{globals.$ionic-elevation-400};
   --button-color: #{globals.$ionic-color-base-white};
   --color: #{globals.$ionic-color-base-white};
@@ -36,6 +35,21 @@
   @include globals.padding(globals.$ionic-space-300, globals.$ionic-space-400);
 }
 
+// Toast Shapes
+// --------------------------------------------------
+
+:host(.toast-shape-soft) {
+  --border-radius: #{globals.$ionic-border-radius-200};
+}
+
+:host(.toast-shape-round) {
+  --border-radius: #{globals.$ionic-border-radius-400};
+}
+
+:host(.toast-shape-rectangular) {
+  --border-radius: #{globals.$ionic-border-radius-0};
+}
+
 // Toast Header
 // --------------------------------------------------
 

core/src/components/toast/toast.tsx

@@ -22,7 +22,7 @@ import { createColorClasses, getClassMap } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
+import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate, Theme } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
@@ -172,6 +172,15 @@ export class Toast implements ComponentInterface, OverlayInterface {
    */
   @Prop() positionAnchor?: HTMLElement | string;
 
+  /**
+   * Set to `"soft"` for a toast with slightly rounded corners,
+   * `"round"` for a toast with fully rounded corners, or `"rectangular"`
+   * for a toast without rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
   /**
    * An array of buttons for the toast.
    */
@@ -484,6 +493,16 @@ export class Toast implements ComponentInterface, OverlayInterface {
     return buttons;
   }
 
+  private getShape(theme: Theme): string | undefined {
+    const { shape } = this;
+
+    if (theme === 'ionic' && shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
   /**
    * Returns the element specified by the positionAnchor prop,
    * or undefined if prop's value is an ID string and the element
@@ -696,6 +715,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
     const theme = getIonTheme(this);
+    const shape = this.getShape(theme);
     const wrapperClass = {
       'toast-wrapper': true,
       [`toast-${this.position}`]: true,
@@ -725,6 +745,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
           ...getClassMap(this.cssClass),
           'overlay-hidden': true,
           'toast-translucent': this.translucent,
+          [`toast-shape-${shape}`]: shape !== undefined,
         })}
         onIonToastWillDismiss={this.dispatchCancelHandler}
       >

packages/angular/src/directives/proxies.ts

@@ -2341,15 +2341,15 @@ export declare interface IonTitle extends Components.IonTitle {}
 
 
 @ProxyCmp({
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'theme', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'theme', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
 })
 export class IonToast {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -2092,15 +2092,15 @@ export declare interface IonTitle extends Components.IonTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonToast,
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'theme', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'theme', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
   standalone: true
 })
 export class IonToast {