feat(alert): added alert component #7
Conversation
| getAlertClass() { | ||
| return `container --${AlertType[this.type()]}`; | ||
| } | ||
|
|
||
| getIconClass() { | ||
| return `icon --${AlertType[this.type()]}`; | ||
| } | ||
|
|
||
| getIcon(): string | undefined { | ||
| return AlertIcon[this.type()]; | ||
| } |
There was a problem hiding this comment.
On pourrait utiliser le computed pour optimiser
| getAlertClass() { | |
| return `container --${AlertType[this.type()]}`; | |
| } | |
| getIconClass() { | |
| return `icon --${AlertType[this.type()]}`; | |
| } | |
| getIcon(): string | undefined { | |
| return AlertIcon[this.type()]; | |
| } | |
| typeName = computed(() => AlertType[this.type()]); | |
| iconName = computed(() => AlertIcon[this.type()]); |
| {{ message() }} | ||
| </div> | ||
| @if (closeable()) { | ||
| <mat-icon class="close" (click)="showAlert = !showAlert">close</mat-icon> |
There was a problem hiding this comment.
Habituellement, les actions pour un usager devrait être déclancher via un bouton. Cela nous permet de normaliser l'accessibilité du site. <button mat-icon-button>?
| styleUrls: ['./alert.component.scss'] | ||
| }) | ||
| export class AlertComponent { | ||
| constructor() {} |
| closeable = input<boolean>(false); | ||
| isHandset = input<boolean>(); | ||
|
|
||
| showAlert = true; |
There was a problem hiding this comment.
Pour le controle de la visibilité de cette composante, la problématique que je vois c'est qu'une fois fermé on ne peut pas l'ouvrir de nouveau?
C'est le concept de "controlled" vs "uncontrolled" components, ici vu que la composante peut disparaitre, j'ai l'impression qu'elle devrait être une composante controllé. C'est à dire, laisser la composante parente controllé la visibilité. Soit avoir un input isOpen ou laisser le parent gérer via un NgIf dans le template. Le bouton onClose émetterait un événement lorsqu'il est cliqué. Sinon, on pourrait avoir un Signal.Model qui permet le two-way communication.
# [1.0.0-next.15](v1.0.0-next.14...v1.0.0-next.15) (2024-08-22) ### Features * **alert:** added alert component ([#7](#7)) ([360d8f3](360d8f3))
|
🎉 This PR is included in version 1.0.0-next.15 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Nouveau composant pour les alertes. Ajout dans la démo.