Adding ng-content to IgxSnackbar - master (#3548)

* test(snackbar): add tests for ng-content #3328

* chore(snackbar): blank spaces update #3328

* feat(snackbar): add ng-content #3328

* docs(snackbar): update README #3328

* test(snackbar): update test for ng-content #3328

* feat(snackbar): update ng-content logic and README #3328

* test(snackbar): update tests #3328

* feat(snackbar): update the snackbar template #3328

* test(snackbar): change tests #3328

* feat(snackbar): update template #3328

* chore(snackbar): remove f from a test #3328

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

@@ -40,3 +40,17 @@ You can hide the Snackbar by using `snackbar.hide()` method.
 By default, the IgxSnackbar will be automatically hidden after 4000 milliseconds. The automatic hiding behavior can be controlled via the following attributes:
  - `autoHide` - whether the snackbar should be hidden after a certain time interval.
  - `displayTime` - the time interval in which the snackbar would hide.
+
+
+## Snackbar with custom content
+
+```html
+<button (click)="snackbar.show()">Show snackbar</button>
+
+<igx-snackbar #snackbar
+             actionName="Dismiss"
+             (onAction)="snackbar.hide()">
+    <span>Custom content</span>
+</igx-snackbar>
+```
+You can display custom content by adding elements inside the snackbar.

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

@@ -1,6 +1,9 @@
 <div class="igx-snackbar" *ngIf="isVisible" (@slideInOut.start)="snackbarAnimationStarted($event)" (@slideInOut.done)="snackbarAnimationDone($event)"
     [@slideInOut]="isVisible">
-    <span class="igx-snackbar__message" [@fadeInOut]="isVisible">{{ message }}</span>
+    <div class="igx-snackbar__message" [@fadeInOut]="isVisible">
+        {{ message }}
+        <ng-content></ng-content>
+    </div>
     <button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" [@fadeInOut] (click)="triggerAction()">
         {{ actionText }}
     </button>

projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts

@@ -11,7 +11,8 @@ describe('IgxSnackbar', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
-                SnackbarInitializeTestComponent
+                SnackbarInitializeTestComponent,
+                SnackbarCustomContentComponent
             ],
             imports: [
                 BrowserAnimationsModule,
@@ -35,7 +36,6 @@ describe('IgxSnackbar', () => {
         expect(snackbar.displayTime).toBe(4000);
         expect(snackbar.autoHide).toBeTruthy();
         expect(snackbar.isVisible).toBeFalsy();
-        expect(snackbar.actionText).toBeUndefined();
 
         expect(domSnackbar.id).toContain('igx-snackbar-');
         snackbar.id = 'customId';
@@ -67,6 +67,7 @@ describe('IgxSnackbar', () => {
 
         snackbar.show();
 
+        fixture.detectChanges();
         expect(snackbar.isVisible).toBeTruthy();
         expect(snackbar.autoHide).toBeFalsy();
 
@@ -90,6 +91,53 @@ describe('IgxSnackbar', () => {
     });
 });
 
+describe('IgxSnackbar with custom content', () => {
+    configureTestSuite();
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                SnackbarCustomContentComponent
+            ],
+            imports: [
+                BrowserAnimationsModule,
+                IgxSnackbarModule
+            ]
+        }).compileComponents();
+    }));
+
+    let fixture, domSnackbar, snackbar;
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(SnackbarCustomContentComponent);
+        fixture.detectChanges();
+        snackbar = fixture.componentInstance.snackbar;
+        domSnackbar = fixture.debugElement.query(By.css('igx-snackbar')).nativeElement;
+    }));
+
+    it('should display a message, a custom content element and a button', () => {
+        fixture.componentInstance.text = 'Undo';
+        snackbar.message = 'Item shown';
+        snackbar.isVisible = true;
+        fixture.detectChanges();
+
+        const messageEl = fixture.debugElement.query(By.css('.igx-snackbar__message'));
+        expect(messageEl.nativeElement.innerText).toContain('Item shown');
+
+        const customContent = fixture.debugElement.query(By.css('.igx-snackbar__content'));
+        expect(customContent).toBeTruthy('Custom content is not found');
+
+        // Verify the message is displayed on the left side of the custom content
+        const messageElRect = (<HTMLElement>messageEl.nativeElement).getBoundingClientRect();
+        const customContentRect = (<HTMLElement>customContent.nativeElement).getBoundingClientRect();
+        expect(messageElRect.left <= customContentRect.left).toBe(true, 'The message is not on the left of the custom content');
+
+        // Verify the custom content element is on the left side of the button
+        const button = fixture.debugElement.query(By.css('.igx-snackbar__button'));
+        const buttonRect = (<HTMLElement>button.nativeElement).getBoundingClientRect();
+        expect(customContentRect.right <= buttonRect.left).toBe(true, 'The custom element is not on the left of the button');
+        expect(messageElRect.right <= buttonRect.left).toBe(true, 'The button is not on the right side of the snackbar content');
+    });
+});
+
 @Component({
     template: `<igx-snackbar #snackbar [actionText]="text">
                </igx-snackbar>`
@@ -98,3 +146,13 @@ class SnackbarInitializeTestComponent {
     public text: string;
     @ViewChild(IgxSnackbarComponent) public snackbar: IgxSnackbarComponent;
 }
+
+@Component({
+    template: `<igx-snackbar #snackbar [actionText]="text">
+                    <span class="igx-snackbar__content">Custom content</span>
+               </igx-snackbar>`
+})
+class SnackbarCustomContentComponent {
+    public text: string;
+    @ViewChild(IgxSnackbarComponent) public snackbar: IgxSnackbarComponent;
+}