inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-50043 Improve notification snackbar buttons style (#12164)

Browse Source 
* AAE-50043 Improve notification snackbar buttons style

* replace direct mat styling by class

* adjust padding

* add data automation id
This commit is contained in:
Tomasz Gnyp
2026-08-11 12:47:04 +02:00
committed by GitHub
parent 5712f2742c
commit e188e9316d
2 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/snackbar-content/snackbar-content.component.html
+14 -5
View File
@@ -1,6 +1,6 @@
<p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content"> <p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content">
@if (data.decorativeIcon) { @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 }} {{ data.message }}
</p> </p>
@@ -8,14 +8,23 @@
@if (data.showAction) { @if (data.showAction) {
<div class="adf-snackbar-message-content-action"> <div class="adf-snackbar-message-content-action">
@if (data.actionLabel) { @if (data.actionLabel) {
<button mat-button (click)="snackBarRef.dismissWithAction()" class="adf-snackbar-message-content-action-button" <button
data-automation-id="adf-snackbar-message-content-action-button"> matButton
(click)="snackBarRef.dismissWithAction()"
class="adf-snackbar-message-content-action-button"
data-automation-id="adf-snackbar-message-content-action-button"
>
{{ data.actionLabel }} {{ data.actionLabel }}
</button> </button>
} }
@if (data.actionIcon) { @if (data.actionIcon) {
<button mat-button (click)="onIconClicked()" class="adf-snackbar-message-content-action-icon" <button
[attr.aria-label]="data.actionIconAriaLabel | translate"> 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" /> <mat-icon [adf-icon]="data.actionIcon" />
</button> </button>
} }
lib/core/src/lib/snackbar-content/snackbar-content.component.scss
+20 -23
View File
@@ -1,4 +1,4 @@
@use '../styles/mat-selectors' as ms; @use '@angular/material' as mat;
:host { :host {
display: flex; display: flex;
@@ -12,41 +12,38 @@
overflow-wrap: anywhere; overflow-wrap: anywhere;
gap: 8px; gap: 8px;
mat-icon { &-icon {
flex: 0 0 auto; flex: 0 0 auto;
align-self: flex-start; align-self: flex-start;
} }
}
.adf-snackbar-message-content-action { &-action {
margin-left: 24px; margin-left: 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
gap: 16px;
#{ms.$mat-button} { &-button {
min-width: 0; min-width: 0;
margin: -8px;
height: unset; height: unset;
padding-top: 4px;
&.adf-snackbar-message-content-action-button { padding-bottom: 4px;
margin-right: 8px;
padding-left: 16px;
padding-right: 16px;
width: auto;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
@include mat.button-overrides(
(
text-horizontal-padding: 16px
)
);
} }
&.adf-snackbar-message-content-action-icon { &-icon {
padding: 0; @include mat.icon-button-overrides(
width: auto; (
state-layer-size: 24px
mat-icon { )
height: 24px; );
width: 24px;
font-size: 24px;
margin-right: 0;
margin-top: 4px;
}
} }
} }
} }