From e188e9316d271917229029a2f1f3d2df1af09476 Mon Sep 17 00:00:00 2001
From: Tomasz Gnyp <49343696+tomgny@users.noreply.github.com>
Date: Tue, 11 Aug 2026 12:47:04 +0200
Subject: [PATCH] AAE-50043 Improve notification snackbar buttons style
 (#12164)

* AAE-50043 Improve notification snackbar buttons style

* replace direct mat styling by class

* adjust padding

* add data automation id
---
 .../snackbar-content.component.html           | 21 +++++---
 .../snackbar-content.component.scss           | 53 +++++++++----------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.html b/lib/core/src/lib/snackbar-content/snackbar-content.component.html
index 87abd9831f..0d1f5bddd5 100644
--- a/lib/core/src/lib/snackbar-content/snackbar-content.component.html
+++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.html
@@ -1,6 +1,6 @@
 <p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content">
     @if (data.decorativeIcon) {
-        <mat-icon data-automation-id="adf-snackbar-decorative-icon" [adf-icon]="data.decorativeIcon" />
+        <mat-icon class="adf-snackbar-message-content-icon" data-automation-id="adf-snackbar-decorative-icon" [adf-icon]="data.decorativeIcon" />
     }
     {{ data.message }}
 </p>
@@ -8,14 +8,23 @@
 @if (data.showAction) {
     <div class="adf-snackbar-message-content-action">
         @if (data.actionLabel) {
-            <button mat-button (click)="snackBarRef.dismissWithAction()" class="adf-snackbar-message-content-action-button"
-                    data-automation-id="adf-snackbar-message-content-action-button">
-                {{data.actionLabel}}
+            <button
+                matButton
+                (click)="snackBarRef.dismissWithAction()"
+                class="adf-snackbar-message-content-action-button"
+                data-automation-id="adf-snackbar-message-content-action-button"
+            >
+                {{ data.actionLabel }}
             </button>
         }
         @if (data.actionIcon) {
-            <button mat-button (click)="onIconClicked()" class="adf-snackbar-message-content-action-icon"
-                    [attr.aria-label]="data.actionIconAriaLabel | translate">
+            <button
+                matIconButton
+                (click)="onIconClicked()"
+                class="adf-snackbar-message-content-action-icon"
+                data-automation-id="adf-snackbar-message-content-action-icon"
+                [attr.aria-label]="data.actionIconAriaLabel | translate"
+            >
                 <mat-icon [adf-icon]="data.actionIcon" />
             </button>
         }
diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss
index e1eb2143de..c371f77f1f 100644
--- a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss
+++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss
@@ -1,4 +1,4 @@
-@use '../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 :host {
     display: flex;
@@ -12,41 +12,38 @@
         overflow-wrap: anywhere;
         gap: 8px;
 
-        mat-icon {
+        &-icon {
             flex: 0 0 auto;
             align-self: flex-start;
         }
-    }
 
-    .adf-snackbar-message-content-action {
-        margin-left: 24px;
-        display: flex;
-        flex-direction: row;
+        &-action {
+            margin-left: 24px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 16px;
 
-        #{ms.$mat-button} {
-            min-width: 0;
-            margin: -8px;
-            height: unset;
-
-            &.adf-snackbar-message-content-action-button {
-                margin-right: 8px;
-                padding-left: 16px;
-                padding-right: 16px;
-                width: auto;
+            &-button {
+                min-width: 0;
+                height: unset;
+                padding-top: 4px;
+                padding-bottom: 4px;
                 -webkit-font-smoothing: subpixel-antialiased;
+
+                @include mat.button-overrides(
+                    (
+                        text-horizontal-padding: 16px
+                    )
+                );
             }
 
-            &.adf-snackbar-message-content-action-icon {
-                padding: 0;
-                width: auto;
-
-                mat-icon {
-                    height: 24px;
-                    width: 24px;
-                    font-size: 24px;
-                    margin-right: 0;
-                    margin-top: 4px;
-                }
+            &-icon {
+                @include mat.icon-button-overrides(
+                    (
+                        state-layer-size: 24px
+                    )
+                );
             }
         }
     }