fix(snackbar): use igxButton (#13584)

* fix(snackbar): use igxButton
---------

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss

@@ -81,8 +81,6 @@
 
     $snackbar-min-height: rem(48px);
     $snackbar-padding: rem(7px) rem(24px);
-    $snackbar-button-left-margin: rem(24px);
-    $snackbar-button-line-height: rem(16px);
     $snackbar-button-font-weight: 600;
 
     %igx-snackbar-display {
@@ -94,38 +92,30 @@
         min-height: $snackbar-min-height;
         padding: $snackbar-padding;
         margin: rem(8px);
+        gap: rem(24px);
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
         backface-visibility: hidden;
         box-shadow: var-get($theme, 'shadow');
         border-radius: var-get($theme, 'border-radius');
         backdrop-filter: blur(8px);
-    }
 
-    %igx-snackbar-message {
-        @include animation('fade-in' .35s ease-out);
+        [igxButton] {
+            @include animation(fade-in .35s ease-out);
+            --ig-size: 1;
+            background: transparent;
+            color: var-get($theme, 'button-color');
+            -webkit-tap-highlight-color: transparent;
+            box-shadow: none;
+        }
     }
 
     %igx-snackbar-button {
-        background: transparent;
-        color: var-get($theme, 'button-color');
-        border: 0;
-        line-height: $snackbar-button-line-height;
-        margin-inline-start: $snackbar-button-left-margin;
-        text-transform: uppercase;
-        user-select: none;
-        font-weight: $snackbar-button-font-weight;
-        -webkit-tap-highlight-color: transparent;
-        outline: none;
-        transition: color .2s ease;
-        font-size: inherit;
-        font-family: inherit;
-        cursor: pointer;
-        @include animation('fade-in' .35s ease-out);
-
-        &:hover {
-            color: var-get($theme, 'button-color');
-        }
+        display: contents;
+    }
+
+    %igx-snackbar-message {
+        @include animation(fade-in .35s ease-out);
     }
 }
 

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

@@ -2,6 +2,9 @@
     {{ textMessage }}
     <ng-content></ng-content>
 </div>
-<button type="button" class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" (click)="triggerAction()">
+<div #customButton class="igx-snackbar__button">
+    <ng-content select="[igxButton]"></ng-content>
+</div>
+<button *ngIf="!customButton.children.length && actionText" igxButton (click)="triggerAction()">
     {{ actionText }}
 </button>

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

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSnackbarComponent } from './snackbar.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
+import { HorizontalAlignment, IgxButtonDirective, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
 import { useAnimation } from '@angular/animations';
 
 describe('IgxSnackbar', () => {
@@ -215,13 +215,17 @@ describe('IgxSnackbar with custom content', () => {
         const customContent = fixture.debugElement.query(By.css('.igx-snackbar__content'));
         expect(customContent).toBeTruthy('Custom content is not found');
 
+        // Verify the custom button is displayed instead of the snackbar actionText
+        const button = fixture.debugElement.query(By.css('.igx-button'));
+        expect(button.nativeElement.innerText).toEqual('Read More');
+        expect(button.nativeElement.innerText).not.toContain(snackbar.actionText);
+
         // Verify the message is displayed on the left side of the custom content
         const messageElRect = messageEl.nativeElement.getBoundingClientRect();
         const customContentRect = 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 = 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');
@@ -263,9 +267,10 @@ class SnackbarInitializeTestComponent {
 @Component({
     template: `<igx-snackbar #snackbar [actionText]="text">
                     <span class="igx-snackbar__content">Custom content</span>
+                    <button igxButton>Read More</button>
                </igx-snackbar>`,
     standalone: true,
-    imports: [IgxSnackbarComponent]
+    imports: [IgxSnackbarComponent, IgxButtonDirective]
 })
 class SnackbarCustomContentComponent {
     @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;

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

@@ -14,6 +14,7 @@ import { ContainerPositionStrategy, GlobalPositionStrategy, HorizontalAlignment,
     PositionSettings, VerticalAlignment } from '../services/public_api';
 import { IgxNotificationsDirective } from '../directives/notification/notifications.directive';
 import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
+import { IgxButtonDirective } from '../directives/button/button.directive';
 
 let NEXT_ID = 0;
 /**
@@ -37,7 +38,7 @@ let NEXT_ID = 0;
     selector: 'igx-snackbar',
     templateUrl: 'snackbar.component.html',
     standalone: true,
-    imports: [NgIf]
+    imports: [NgIf, IgxButtonDirective]
 })
 export class IgxSnackbarComponent extends IgxNotificationsDirective
     implements OnInit {
@@ -102,7 +103,6 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective
      */
     @Output() public animationDone = new EventEmitter<ToggleViewEventArgs>();
 
-
     /**
      * Get the position and animation settings used by the snackbar.
      * ```typescript
@@ -160,7 +160,6 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective
             this.textMessage = message;
         }
 
-
         this.strategy = this.outlet ? new ContainerPositionStrategy(this.positionSettings)
             : new GlobalPositionStrategy(this.positionSettings);
         super.open();
@@ -203,4 +202,3 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective
         });
     }
 }
-