fix(core/toast): add new hide-icon property for toast component

.changeset/metal-bats-burn.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": minor
+---
+
+add new `hide-icon` property for *ix-toast* component

packages/angular/src/components.ts

@@ -2663,15 +2663,15 @@ export declare interface IxTimePicker extends Components.IxTimePicker {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
+  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'hideIcon', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
   methods: ['pause', 'resume', 'isPaused']
 })
 @Component({
   selector: 'ix-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
+  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'hideIcon', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
   outputs: ['closeToast'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -2764,15 +2764,15 @@ export declare interface IxTimePicker extends Components.IxTimePicker {
 
 @ProxyCmp({
   defineCustomElementFn: defineIxToast,
-  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
+  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'hideIcon', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
   methods: ['pause', 'resume', 'isPaused']
 })
 @Component({
   selector: 'ix-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
+  inputs: ['ariaLabelCloseIconButton', 'autoCloseDelay', 'hideIcon', 'icon', 'iconColor', 'preventAutoClose', 'toastTitle', 'type'],
   outputs: ['closeToast'],
 })
 export class IxToast {

packages/core/src/components.d.ts

@@ -3702,6 +3702,11 @@ export namespace Components {
           * @default 5000
          */
         "autoCloseDelay": number;
+        /**
+          * Allows to hide the icon in the toast Defaults to false
+          * @default false
+         */
+        "hideIcon": boolean;
         /**
           * Icon of toast
          */
@@ -9686,6 +9691,11 @@ declare namespace LocalJSX {
           * @default 5000
          */
         "autoCloseDelay"?: number;
+        /**
+          * Allows to hide the icon in the toast Defaults to false
+          * @default false
+         */
+        "hideIcon"?: boolean;
         /**
           * Icon of toast
          */

packages/core/src/components/toast/toast-container.tsx

@@ -89,6 +89,7 @@ export class ToastContainer {
     toast.autoCloseDelay = config.autoCloseDelay ?? 5000;
     toast.icon = config.icon;
     toast.iconColor = config.iconColor;
+    toast.hideIcon = config.hideIcon ?? false;
     toast.addEventListener(
       'closeToast',
       (event: CustomEvent<any | undefined>) => {

packages/core/src/components/toast/toast-utils.ts

@@ -43,6 +43,10 @@ export interface ToastConfig {
    * Color of the icon
    */
   iconColor?: string;
+  /**
+   * Allows to hide the icon in the toast
+   */
+  hideIcon?: boolean;
 }
 
 export function getToastContainer() {

packages/core/src/components/toast/toast.tsx

@@ -63,6 +63,11 @@ export class Toast {
    */
   @Prop() iconColor?: string;
 
+  /**
+   * Allows to hide the icon in the toast.
+   */
+  @Prop() hideIcon: boolean = false;
+
   /**
    * ARIA label for the close icon button
    * Will be set as aria-label on the nested HTML button element
@@ -197,7 +202,7 @@ export class Toast {
             this.touched = true;
           }}
         >
-          {this.type || this.icon ? (
+          {(this.type || this.icon) && !this.hideIcon ? (
             <div class="toast-icon">{this.getIcon()}</div>
           ) : null}
           <div class="toast-content">

packages/react/src/components.server.ts

@@ -1843,6 +1843,7 @@ export const IxToast: StencilReactComponent<IxToastElement, IxToastEvents> = /*@
         preventAutoClose: 'prevent-auto-close',
         icon: 'icon',
         iconColor: 'icon-color',
+        hideIcon: 'hide-icon',
         ariaLabelCloseIconButton: 'aria-label-close-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate') as Promise<HydrateModule>,

packages/vue/src/components.ts

@@ -1380,6 +1380,7 @@ export const IxToast: StencilVueComponent<JSX.IxToast> = /*@__PURE__*/ defineCon
   'preventAutoClose',
   'icon',
   'iconColor',
+  'hideIcon',
   'ariaLabelCloseIconButton',
   'closeToast'
 ], [

testing/visual-testing/tests/toast/basic/index.html

@@ -78,6 +78,10 @@
           icon: 'bulb',
           message: 'Custom icon',
         });
+        toast.info({
+          message: 'Info - Icon Hidden',
+          hideIcon: true,
+        });
       })();
     </script>
     <script src="./../../utils/test/runtime/main.ts" type="module"></script>

testing/visual-testing/tests/toast/custom/index.html

@@ -75,6 +75,15 @@
           autoClose: false,
           type: 'success',
         });
+
+        toastContainer.showToast({
+          title: 'Toast headline',
+          message: 'Toast message text',
+          action: createActionFromTemplate('basic-undo'),
+          autoClose: false,
+          type: 'success',
+          hideIcon: true,
+        });
       })();
     </script>
     <script src="./../../utils/test/runtime/main.ts" type="module"></script>

testing/visual-testing/tests/toast/position/index.html

@@ -80,6 +80,10 @@
           icon: 'bulb',
           message: 'Custom icon',
         });
+        toast.info({
+          message: 'Info - Icon Hidden',
+          hideIcon: true,
+        });
       })();
     </script>
     <script src="./../../utils/test/runtime/main.ts" type="module"></script>