Mercurial

comparison design_system/README.md @ 252:7a7581f040e8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add scoped notification component Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 11:57:16 -0700
parents 117c4d53c9a4
children 2b6e732087ff
comparison
equal deleted inserted replaced
251:117c4d53c9a4 252:7a7581f040e8
58 | --- | --- | --- | --- | 58 | --- | --- | --- | --- |
59 | `zen-button` | direct `button` or `a` | `variant`, `loading`, `disabled` | native click/form events | 59 | `zen-button` | direct `button` or `a` | `variant`, `loading`, `disabled` | native click/form events |
60 | `zen-card` | direct `article` or `section` | `interactive` | native descendant events | 60 | `zen-card` | direct `article` or `section` | `interactive` | native descendant events |
61 | `zen-alert` | message HTML | `tone`, `dismissible` | `zen-dismiss` | 61 | `zen-alert` | message HTML | `tone`, `dismissible` | `zen-dismiss` |
62 | `zen-field` | direct `label`, form control, help text | native control attributes | native input/change/invalid | 62 | `zen-field` | direct `label`, form control, help text | native control attributes | native input/change/invalid |
63 | `zen-notifications` | descendant event producers | `aria-label`, `dismiss-label` | `zen-notification-action`, `zen-notification-removed` |
63 | `zen-stack` | any HTML | `direction`, `gap` | native descendant events | 64 | `zen-stack` | any HTML | `direction`, `gap` | native descendant events |
64 65
65 Do not put business state into the design-system components. They provide 66 Do not put business state into the design-system components. They provide
66 presentation, small accessibility wiring, and interaction affordances while 67 presentation, small accessibility wiring, and interaction affordances while
67 applications retain data and workflow ownership. 68 applications retain data and workflow ownership.
69
70 ### Notifications
71
72 See [`NOTIFICATIONS.md`](NOTIFICATIONS.md) for the complete event contract,
73 queue semantics, actions, timing, and accessibility behavior.
74
75 Place one scope around the part of the application that owns notifications:
76
77 ```html
78 <zen-notifications aria-label="Notifications">
79 <main id="application"></main>
80 </zen-notifications>
81 ```
82
83 Any descendant can dispatch a non-composed bubbling event:
84
85 ```js
86 source.dispatchEvent(new CustomEvent("zen-notify", {
87 bubbles: true,
88 composed: false,
89 detail: {
90 version: 1,
91 id: "deployment-complete",
92 tone: "success",
93 message: "Deployment complete",
94 announcement: "polite",
95 durationMs: 5000,
96 },
97 }));
98 ```
99
100 Use `zen-dismiss-notification` with `{ version: 1, id }` to dismiss by ID.
101 Actions contain only an opaque token and label; clicking dispatches
102 `zen-notification-action`. Tokens are held in private component state and never
103 written to DOM attributes. The component renders three records and retains up
104 to 20 additional queued records.
68 105
69 ## Tests 106 ## Tests
70 107
71 ```bash 108 ```bash
72 bazel test //design_system/test:storybook_test 109 bazel test //design_system/test:storybook_test