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
+15 -6
View File
@@ -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>
}
lib/core/src/lib/snackbar-content/snackbar-content.component.scss
+25 -28
View File
@@ -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
)
);
}
}
}