Mercurial
comparison design_system/src/components/alert.js @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | 117c4d53c9a4 |
| children |
comparison
equal
deleted
inserted
replaced
| 253:fdf3816959cb | 254:2b6e732087ff |
|---|---|
| 1 /** | |
| 2 * Presents a semantic status message with optional dismissal. | |
| 3 * | |
| 4 * @extends {HTMLElement} | |
| 5 */ | |
| 1 export class ZenAlert extends HTMLElement { | 6 export class ZenAlert extends HTMLElement { |
| 2 static get observedAttributes() { | 7 static get observedAttributes() { |
| 3 return ["dismissible", "tone"]; | 8 return ["dismissible", "tone"]; |
| 4 } | 9 } |
| 5 | 10 |
| 48 dismiss = document.createElement("button"); | 53 dismiss = document.createElement("button"); |
| 49 dismiss.type = "button"; | 54 dismiss.type = "button"; |
| 50 dismiss.dataset.zenDismiss = ""; | 55 dismiss.dataset.zenDismiss = ""; |
| 51 dismiss.dataset.zenGenerated = "true"; | 56 dismiss.dataset.zenGenerated = "true"; |
| 52 dismiss.setAttribute("aria-label", "Dismiss message"); | 57 dismiss.setAttribute("aria-label", "Dismiss message"); |
| 53 dismiss.textContent = "×"; | 58 const icon = document.createElement("zen-icon"); |
| 59 icon.setAttribute("name", "close"); | |
| 60 dismiss.append(icon); | |
| 54 this.append(dismiss); | 61 this.append(dismiss); |
| 55 } | 62 } |
| 56 if (dismiss === this._dismissControl) return; | 63 if (dismiss === this._dismissControl) return; |
| 57 | 64 |
| 58 this.unbindDismissControl(); | 65 this.unbindDismissControl(); |