apply requested changes; edit ChangeLog & ReadMe

Author: SisIvanova

CHANGELOG.md

@@ -46,6 +46,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
+- `IgxToast`:
+    - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
+
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss

@@ -121,6 +121,7 @@
 
     %igx-toast--top {
         top: 0;
+        margin-top: 16px;
     }
 
     %igx-toast--middle {
@@ -130,6 +131,7 @@
 
     %igx-toast--bottom {
         bottom: 0;
+        margin-bottom: 16px;
     }
 }
 
@@ -143,7 +145,7 @@
 @mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) {
     $text: map-get($categories, 'text');
 
-    %igx-toast-display {
+    %igx-toast-display > *{
         @include igx-type-style($type-scale, $text) {
             margin: 0;
         }

projects/igniteui-angular/src/lib/toast/README.md

@@ -36,6 +36,17 @@ You can show hide toast by using `toast.hide()` method.
 
 You can modify the position of the toast by setting `postion="IgxToastPosition.Top"`.
 
+## Toast with different content
+
+```html
+<igx-toast #toast [position]="toastPosition">
+    <igx-icon>notifications</igx-icon>
+    This message will self-destruct in 4 seconds.
+</igx-toast>
+```
+
+You can display various content by placing it between the igx-toast tags. If so, the message property will be overwritten.
+
 ## Toast with events
 
 ```html

projects/igniteui-angular/src/lib/toast/toast.component.html

@@ -1,5 +1,5 @@
 <div #content>
     <ng-content></ng-content>
 </div>
-<span *ngIf="content.children.length == 0">{{ message }}</span>
+<span *ngIf="content.childNodes.length == 0">{{ message }}</span>
 

projects/igniteui-angular/src/lib/toast/toast.component.ts

@@ -307,17 +307,17 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
     }
 
     @HostBinding('class.igx-toast--top')
-    public get cssClassTop(): boolean {
+    public get cssClassTop() {
        return this.position === IgxToastPosition.Top;
     }
 
     @HostBinding('class.igx-toast--middle')
-    public get cssClassMiddle(): boolean {
+    public get cssClassMiddle() {
        return this.position === IgxToastPosition.Middle;
     }
 
     @HostBinding('class.igx-toast--bottom')
-    public get cssClassBottom(): boolean {
+    public get cssClassBottom() {
        return this.position === IgxToastPosition.Bottom;
     }
 

src/app/toast/toast.sample.css

@@ -8,11 +8,3 @@
     margin-top: 16px;
     justify-content: space-between;
 }
-
-.igx-toast--bottom {
-    margin-bottom: 16px;
-}
-
-.igx-toast--top {
-    margin-top: 16px;
-}

src/app/toast/toast.sample.html

@@ -23,7 +23,8 @@ <h4 class="sample-title">Middle Position</h4>
             <h4 class="sample-title">Top Position</h4>
             <div class="preview top"></div>
             <div class="btn-group">
-                <button igxButton="raised" igxRipple="white" (click)="toast.toggle()">Toggle Toast</button>
+                <button igxButton="raised" igxRipple="white" (click)="showToast(toast, 'top')" [disabled]="toast.isVisible">Show Toast</button>
+                <button igxButton="raised" igxRipple="white" (click)="toast.hide()" [disabled]="!toast.isVisible">Hide Toast</button>
             </div>
         </article>
     </section>