@aurodesignsystem-dev/auro-toast 0.0.0-pr141.0 → 0.0.0-pr141.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/api.md +222 -252
- package/demo/api.min.js +910 -1
- package/demo/index.md +18 -22
- package/demo/index.min.js +910 -1
- package/demo/readme.md +139 -0
- package/dist/{auro-toaster-yQM3ML8m.js → auro-toaster-BVtBRPDA.js} +11 -11
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +10 -10
- package/demo/basic.min.js +0 -912
package/demo/api.md
CHANGED
|
@@ -40,37 +40,35 @@ The `auro-toast` element provides users a way to display short, temporary messag
|
|
|
40
40
|
## Basic
|
|
41
41
|
|
|
42
42
|
<div class="exampleWrapper">
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
44
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
45
|
+
<auro-button id="basicToastBtn">
|
|
46
46
|
Show default notification
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
</auro-button>
|
|
48
|
+
<!--
|
|
49
49
|
NOTE: The manually added style is NOT necessary for use,
|
|
50
50
|
Demo purposes ONLY!
|
|
51
51
|
-->
|
|
52
|
-
|
|
52
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
53
53
|
Default notification with no error type.
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
</auro-toast>
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
56
56
|
</div>
|
|
57
57
|
<auro-accordion alignRight>
|
|
58
|
-
|
|
58
|
+
<span slot="trigger">See code</span>
|
|
59
59
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
60
60
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
<auro-button id="basicToastBtn">
|
|
62
|
+
<pre class="language-html"><code class="language-html"><auro-button id="basicToastBtn">
|
|
64
63
|
Show default notification
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
</auro-button>
|
|
65
|
+
<!--
|
|
67
66
|
NOTE: The manually added style is NOT necessary for use,
|
|
68
67
|
Demo purposes ONLY!
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
-->
|
|
69
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
71
70
|
Default notification with no error type.
|
|
72
|
-
|
|
73
|
-
```
|
|
71
|
+
</auro-toast></code></pre>
|
|
74
72
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
75
73
|
</auro-accordion>
|
|
76
74
|
|
|
@@ -81,29 +79,27 @@ Demo purposes ONLY!
|
|
|
81
79
|
Use the `disableAutoHide` attribute to prevent the toast from automatically dismissing itself.
|
|
82
80
|
|
|
83
81
|
<div class="exampleWrapper">
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disable-auto-hide.html) -->
|
|
83
|
+
<!-- The below content is automatically added from ./../apiExamples/disable-auto-hide.html -->
|
|
84
|
+
<auro-button id="disableHideToastBtn">
|
|
87
85
|
Show default notification
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
</auro-button>
|
|
87
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="disableHideToast">
|
|
90
88
|
Default notification with no error type.
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
</auro-toast>
|
|
90
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
91
|
</div>
|
|
94
92
|
<auro-accordion alignRight>
|
|
95
|
-
|
|
93
|
+
<span slot="trigger">See code</span>
|
|
96
94
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disable-auto-hide.html) -->
|
|
97
95
|
<!-- The below code snippet is automatically added from ./../apiExamples/disable-auto-hide.html -->
|
|
98
96
|
|
|
99
|
-
|
|
100
|
-
<auro-button id="disableHideToastBtn">
|
|
97
|
+
<pre class="language-html"><code class="language-html"><auro-button id="disableHideToastBtn">
|
|
101
98
|
Show default notification
|
|
102
|
-
|
|
103
|
-
|
|
99
|
+
</auro-button>
|
|
100
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="disableHideToast">
|
|
104
101
|
Default notification with no error type.
|
|
105
|
-
|
|
106
|
-
```
|
|
102
|
+
</auro-toast></code></pre>
|
|
107
103
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
108
104
|
</auro-accordion>
|
|
109
105
|
|
|
@@ -112,21 +108,19 @@ Use the `disableAutoHide` attribute to prevent the toast from automatically dism
|
|
|
112
108
|
Using the `noIcon` attribute will set no icon to be visible in the notification.
|
|
113
109
|
|
|
114
110
|
<div class="exampleWrapper">
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
111
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-icon.html) -->
|
|
112
|
+
<!-- The below content is automatically added from ./../apiExamples/no-icon.html -->
|
|
113
|
+
<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
|
|
114
|
+
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast. </auro-toast>
|
|
115
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
120
116
|
</div>
|
|
121
117
|
<auro-accordion alignRight>
|
|
122
|
-
|
|
118
|
+
<span slot="trigger">See code</span>
|
|
123
119
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-icon.html) -->
|
|
124
120
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-icon.html -->
|
|
125
121
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast. </auro-toast>
|
|
129
|
-
```
|
|
122
|
+
<pre class="language-html"><code class="language-html"><auro-button id="noIconBtn"> Show toast with no icon </auro-button>
|
|
123
|
+
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast. </auro-toast></code></pre>
|
|
130
124
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
131
125
|
</auro-accordion>
|
|
132
126
|
|
|
@@ -135,29 +129,27 @@ Using the `noIcon` attribute will set no icon to be visible in the notification.
|
|
|
135
129
|
Using the `timeTilHide` attribute will set a timer in milliseconds for how long the notification will be visible before it automatically hides. The default is `5000` milliseconds.
|
|
136
130
|
|
|
137
131
|
<div class="exampleWrapper">
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/time-til-hide.html) -->
|
|
133
|
+
<!-- The below content is automatically added from ./../apiExamples/time-til-hide.html -->
|
|
134
|
+
<auro-button id="timeTilHideToastBtn">
|
|
141
135
|
Show default notification
|
|
142
|
-
|
|
143
|
-
|
|
136
|
+
</auro-button>
|
|
137
|
+
<auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
|
|
144
138
|
Default notification with no error type.
|
|
145
|
-
|
|
146
|
-
|
|
139
|
+
</auro-toast>
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
147
141
|
</div>
|
|
148
142
|
<auro-accordion alignRight>
|
|
149
|
-
|
|
143
|
+
<span slot="trigger">See code</span>
|
|
150
144
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/time-til-hide.html) -->
|
|
151
145
|
<!-- The below code snippet is automatically added from ./../apiExamples/time-til-hide.html -->
|
|
152
146
|
|
|
153
|
-
|
|
154
|
-
<auro-button id="timeTilHideToastBtn">
|
|
147
|
+
<pre class="language-html"><code class="language-html"><auro-button id="timeTilHideToastBtn">
|
|
155
148
|
Show default notification
|
|
156
|
-
|
|
157
|
-
|
|
149
|
+
</auro-button>
|
|
150
|
+
<auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
|
|
158
151
|
Default notification with no error type.
|
|
159
|
-
|
|
160
|
-
```
|
|
152
|
+
</auro-toast></code></pre>
|
|
161
153
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
162
154
|
</auro-accordion>
|
|
163
155
|
|
|
@@ -168,53 +160,51 @@ What the component will render visually based on which variant value is set; cur
|
|
|
168
160
|
**Note:** The `error` variant does not automatically hide by default, like other variants.
|
|
169
161
|
|
|
170
162
|
<div class="exampleWrapper">
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
163
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant.html) -->
|
|
164
|
+
<!-- The below content is automatically added from ./../apiExamples/variant.html -->
|
|
165
|
+
<auro-button id="defaultVariantBtn">
|
|
174
166
|
Show default toast
|
|
175
|
-
|
|
176
|
-
|
|
167
|
+
</auro-button>
|
|
168
|
+
<auro-toast id="defaultVariant" style="display: block; margin: 0.5rem 0;">
|
|
177
169
|
Default toast.
|
|
178
|
-
|
|
179
|
-
|
|
170
|
+
</auro-toast>
|
|
171
|
+
<auro-button id="errorVariantBtn">
|
|
180
172
|
Show error toast
|
|
181
|
-
|
|
182
|
-
|
|
173
|
+
</auro-button>
|
|
174
|
+
<auro-toast id="errorVariant" variant="error" style="display: block; margin: 0.5rem 0;">
|
|
183
175
|
Unable to add lap infant. Please try again.
|
|
184
|
-
|
|
185
|
-
|
|
176
|
+
</auro-toast>
|
|
177
|
+
<auro-button id="successVariantBtn">
|
|
186
178
|
Show success toast
|
|
187
|
-
|
|
188
|
-
|
|
179
|
+
</auro-button>
|
|
180
|
+
<auro-toast id="successVariant" variant="success" style="display: block; margin: 0.5rem 0;">
|
|
189
181
|
Successfully added lap infant.
|
|
190
|
-
|
|
191
|
-
|
|
182
|
+
</auro-toast>
|
|
183
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
192
184
|
</div>
|
|
193
185
|
<auro-accordion alignRight>
|
|
194
|
-
|
|
186
|
+
<span slot="trigger">See code</span>
|
|
195
187
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
|
|
196
188
|
<!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->
|
|
197
189
|
|
|
198
|
-
|
|
199
|
-
<auro-button id="defaultVariantBtn">
|
|
190
|
+
<pre class="language-html"><code class="language-html"><auro-button id="defaultVariantBtn">
|
|
200
191
|
Show default toast
|
|
201
|
-
|
|
202
|
-
|
|
192
|
+
</auro-button>
|
|
193
|
+
<auro-toast id="defaultVariant" style="display: block; margin: 0.5rem 0;">
|
|
203
194
|
Default toast.
|
|
204
|
-
|
|
205
|
-
|
|
195
|
+
</auro-toast>
|
|
196
|
+
<auro-button id="errorVariantBtn">
|
|
206
197
|
Show error toast
|
|
207
|
-
|
|
208
|
-
|
|
198
|
+
</auro-button>
|
|
199
|
+
<auro-toast id="errorVariant" variant="error" style="display: block; margin: 0.5rem 0;">
|
|
209
200
|
Unable to add lap infant. Please try again.
|
|
210
|
-
|
|
211
|
-
|
|
201
|
+
</auro-toast>
|
|
202
|
+
<auro-button id="successVariantBtn">
|
|
212
203
|
Show success toast
|
|
213
|
-
|
|
214
|
-
|
|
204
|
+
</auro-button>
|
|
205
|
+
<auro-toast id="successVariant" variant="success" style="display: block; margin: 0.5rem 0;">
|
|
215
206
|
Successfully added lap infant.
|
|
216
|
-
|
|
217
|
-
```
|
|
207
|
+
</auro-toast></code></pre>
|
|
218
208
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
219
209
|
</auro-accordion>
|
|
220
210
|
|
|
@@ -241,34 +231,32 @@ The toast notification can be customized in several ways.
|
|
|
241
231
|
disableAutoHide
|
|
242
232
|
style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default); display: block; margin: 0.5rem 0;">
|
|
243
233
|
Did you know you can create a price alert for this route?
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
234
|
+
<br />
|
|
235
|
+
<auro-button variant="tertiary">Create Alert</auro-button>
|
|
236
|
+
<svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
|
|
247
237
|
</auro-toast>
|
|
248
238
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
249
239
|
</div>
|
|
250
240
|
<auro-accordion alignRight>
|
|
251
|
-
|
|
241
|
+
<span slot="trigger">See code</span>
|
|
252
242
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-toast.html) -->
|
|
253
243
|
<!-- The below code snippet is automatically added from ../apiExamples/custom-toast.html -->
|
|
254
244
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<auro-button id="customizedToastBtn">
|
|
245
|
+
<pre class="language-html"><code class="language-html"><!-- icon variant -->
|
|
246
|
+
<auro-button id="customizedToastBtn">
|
|
258
247
|
Show customized notification
|
|
259
|
-
|
|
260
|
-
|
|
248
|
+
</auro-button>
|
|
249
|
+
<auro-toast
|
|
261
250
|
id="customizedToast"
|
|
262
251
|
variant="custom"
|
|
263
252
|
visible
|
|
264
253
|
disableAutoHide
|
|
265
|
-
style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default); display: block; margin: 0.5rem 0;"
|
|
254
|
+
style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default); display: block; margin: 0.5rem 0;">
|
|
266
255
|
Did you know you can create a price alert for this route?
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
```
|
|
256
|
+
<br />
|
|
257
|
+
<auro-button variant="tertiary">Create Alert</auro-button>
|
|
258
|
+
<svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
|
|
259
|
+
</auro-toast></code></pre>
|
|
272
260
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
273
261
|
</auro-accordion>
|
|
274
262
|
|
|
@@ -277,29 +265,27 @@ The toast notification can be customized in several ways.
|
|
|
277
265
|
State of the push notification which determines if it is `visible`.
|
|
278
266
|
|
|
279
267
|
<div class="exampleWrapper">
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
268
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/visible.html) -->
|
|
269
|
+
<!-- The below content is automatically added from ./../apiExamples/visible.html -->
|
|
270
|
+
<auro-button id="visibleToastBtn">
|
|
283
271
|
Set visible to true
|
|
284
|
-
|
|
285
|
-
|
|
272
|
+
</auro-button>
|
|
273
|
+
<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
|
|
286
274
|
Default toast.
|
|
287
|
-
|
|
288
|
-
|
|
275
|
+
</auro-toast>
|
|
276
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
289
277
|
</div>
|
|
290
278
|
<auro-accordion alignRight>
|
|
291
|
-
|
|
279
|
+
<span slot="trigger">See code</span>
|
|
292
280
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/visible.html) -->
|
|
293
281
|
<!-- The below code snippet is automatically added from ./../apiExamples/visible.html -->
|
|
294
282
|
|
|
295
|
-
|
|
296
|
-
<auro-button id="visibleToastBtn">
|
|
283
|
+
<pre class="language-html"><code class="language-html"><auro-button id="visibleToastBtn">
|
|
297
284
|
Set visible to true
|
|
298
|
-
|
|
299
|
-
|
|
285
|
+
</auro-button>
|
|
286
|
+
<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
|
|
300
287
|
Default toast.
|
|
301
|
-
|
|
302
|
-
```
|
|
288
|
+
</auro-toast></code></pre>
|
|
303
289
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
304
290
|
</auro-accordion>
|
|
305
291
|
|
|
@@ -308,122 +294,118 @@ State of the push notification which determines if it is `visible`.
|
|
|
308
294
|
When a toast is manually dismissed via the close button, focus should return to the element that originally triggered it. Use the `trigger` attribute to specify the `id` of that element, or the `triggerElement` property to pass a direct element reference. The `trigger` attribute takes precedence when both are set.
|
|
309
295
|
|
|
310
296
|
<div class="exampleWrapper">
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
297
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/trigger.html) -->
|
|
298
|
+
<!-- The below content is automatically added from ./../apiExamples/trigger.html -->
|
|
299
|
+
<p>Use the <code>trigger</code> attribute to pass the <code>id</code> of the element that opened the toast. When the toast is manually closed, focus will return to that element.</p>
|
|
300
|
+
<auro-button id="triggerAttrBtn">
|
|
315
301
|
Show notification
|
|
316
|
-
|
|
317
|
-
|
|
302
|
+
</auro-button>
|
|
303
|
+
<!--
|
|
318
304
|
NOTE: The manually added style is NOT necessary for use,
|
|
319
305
|
Demo purposes ONLY!
|
|
320
306
|
-->
|
|
321
|
-
|
|
307
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerAttrToast" trigger="triggerAttrBtn" disableAutoHide>
|
|
322
308
|
Flight booked successfully
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
309
|
+
</auro-toast>
|
|
310
|
+
<p>Use the <code>triggerElement</code> property to pass a direct reference to the element that opened the toast. Useful when an <code>id</code> is not available or when working programmatically.</p>
|
|
311
|
+
<auro-button id="triggerPropBtn">
|
|
326
312
|
Show notification
|
|
327
|
-
|
|
328
|
-
|
|
313
|
+
</auro-button>
|
|
314
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerPropToast" disableAutoHide>
|
|
329
315
|
Flight booked successfully.
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
316
|
+
</auro-toast>
|
|
317
|
+
<p>When both <code>trigger</code> and <code>triggerElement</code> are set, <code>trigger</code> takes precedence. In this example, <code>triggerElement</code> points to the second button but <code>trigger</code> points to the first — focus returns to the first button on close.</p>
|
|
318
|
+
<auro-button id="triggerPrecedenceBtn1">
|
|
333
319
|
Button 1 (trigger attribute target)
|
|
334
|
-
|
|
335
|
-
|
|
320
|
+
</auro-button>
|
|
321
|
+
<auro-button id="triggerPrecedenceBtn2">
|
|
336
322
|
Button 2 (triggerElement target — ignored)
|
|
337
|
-
|
|
338
|
-
|
|
323
|
+
</auro-button>
|
|
324
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerPrecedenceToast" trigger="triggerPrecedenceBtn1" disableAutoHide>
|
|
339
325
|
Flight booked successfully.
|
|
340
|
-
|
|
341
|
-
|
|
326
|
+
</auro-toast>
|
|
327
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
342
328
|
</div>
|
|
343
329
|
<auro-accordion alignRight>
|
|
344
|
-
|
|
330
|
+
<span slot="trigger">See code</span>
|
|
345
331
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/trigger.html) -->
|
|
346
332
|
<!-- The below code snippet is automatically added from ./../apiExamples/trigger.html -->
|
|
347
333
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
<auro-button id="triggerAttrBtn">
|
|
334
|
+
<pre class="language-html"><code class="language-html"><p>Use the <code>trigger</code> attribute to pass the <code>id</code> of the element that opened the toast. When the toast is manually closed, focus will return to that element.</p>
|
|
335
|
+
<auro-button id="triggerAttrBtn">
|
|
351
336
|
Show notification
|
|
352
|
-
|
|
353
|
-
|
|
337
|
+
</auro-button>
|
|
338
|
+
<!--
|
|
354
339
|
NOTE: The manually added style is NOT necessary for use,
|
|
355
340
|
Demo purposes ONLY!
|
|
356
|
-
|
|
357
|
-
|
|
341
|
+
-->
|
|
342
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerAttrToast" trigger="triggerAttrBtn" disableAutoHide>
|
|
358
343
|
Flight booked successfully
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
344
|
+
</auro-toast>
|
|
345
|
+
<p>Use the <code>triggerElement</code> property to pass a direct reference to the element that opened the toast. Useful when an <code>id</code> is not available or when working programmatically.</p>
|
|
346
|
+
<auro-button id="triggerPropBtn">
|
|
362
347
|
Show notification
|
|
363
|
-
|
|
364
|
-
|
|
348
|
+
</auro-button>
|
|
349
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerPropToast" disableAutoHide>
|
|
365
350
|
Flight booked successfully.
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
351
|
+
</auro-toast>
|
|
352
|
+
<p>When both <code>trigger</code> and <code>triggerElement</code> are set, <code>trigger</code> takes precedence. In this example, <code>triggerElement</code> points to the second button but <code>trigger</code> points to the first — focus returns to the first button on close.</p>
|
|
353
|
+
<auro-button id="triggerPrecedenceBtn1">
|
|
369
354
|
Button 1 (trigger attribute target)
|
|
370
|
-
|
|
371
|
-
|
|
355
|
+
</auro-button>
|
|
356
|
+
<auro-button id="triggerPrecedenceBtn2">
|
|
372
357
|
Button 2 (triggerElement target — ignored)
|
|
373
|
-
|
|
374
|
-
|
|
358
|
+
</auro-button>
|
|
359
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="triggerPrecedenceToast" trigger="triggerPrecedenceBtn1" disableAutoHide>
|
|
375
360
|
Flight booked successfully.
|
|
376
|
-
|
|
377
|
-
```
|
|
361
|
+
</auro-toast></code></pre>
|
|
378
362
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
379
363
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/trigger.js) -->
|
|
380
364
|
<!-- The below code snippet is automatically added from ./../apiExamples/trigger.js -->
|
|
381
365
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
366
|
+
<pre class="language-js"><code class="language-js">/* eslint-disable jsdoc/require-jsdoc */
|
|
367
|
+
|
|
385
368
|
export function initTriggerExample() {
|
|
386
369
|
// trigger attribute — pass element id as a string
|
|
387
370
|
const attrBtn = document.querySelector("#triggerAttrBtn");
|
|
388
371
|
const attrToast = document.querySelector("#triggerAttrToast");
|
|
389
|
-
|
|
390
|
-
attrBtn.addEventListener("click", ()
|
|
372
|
+
|
|
373
|
+
attrBtn.addEventListener("click", () => {
|
|
391
374
|
if (!attrToast.hasAttribute("visible")) {
|
|
392
375
|
attrToast.setAttribute("visible", true);
|
|
393
376
|
}
|
|
394
377
|
});
|
|
395
|
-
|
|
378
|
+
|
|
396
379
|
// triggerElement property — pass a direct element reference
|
|
397
380
|
const propBtn = document.querySelector("#triggerPropBtn");
|
|
398
381
|
const propToast = document.querySelector("#triggerPropToast");
|
|
399
|
-
|
|
400
|
-
propBtn.addEventListener("click", ()
|
|
382
|
+
|
|
383
|
+
propBtn.addEventListener("click", () => {
|
|
401
384
|
if (!propToast.hasAttribute("visible")) {
|
|
402
385
|
propToast.triggerElement = propBtn;
|
|
403
386
|
propToast.setAttribute("visible", true);
|
|
404
387
|
}
|
|
405
388
|
});
|
|
406
|
-
|
|
389
|
+
|
|
407
390
|
// precedence — trigger attribute wins over triggerElement when both are set
|
|
408
391
|
const precedenceBtn1 = document.querySelector("#triggerPrecedenceBtn1");
|
|
409
392
|
const precedenceBtn2 = document.querySelector("#triggerPrecedenceBtn2");
|
|
410
393
|
const precedenceToast = document.querySelector("#triggerPrecedenceToast");
|
|
411
|
-
|
|
412
|
-
precedenceBtn1.addEventListener("click", ()
|
|
394
|
+
|
|
395
|
+
precedenceBtn1.addEventListener("click", () => {
|
|
413
396
|
if (!precedenceToast.hasAttribute("visible")) {
|
|
414
397
|
precedenceToast.triggerElement = precedenceBtn2;
|
|
415
398
|
precedenceToast.setAttribute("visible", true);
|
|
416
399
|
}
|
|
417
400
|
});
|
|
418
|
-
|
|
419
|
-
precedenceBtn2.addEventListener("click", ()
|
|
401
|
+
|
|
402
|
+
precedenceBtn2.addEventListener("click", () => {
|
|
420
403
|
if (!precedenceToast.hasAttribute("visible")) {
|
|
421
404
|
precedenceToast.triggerElement = precedenceBtn2;
|
|
422
405
|
precedenceToast.setAttribute("visible", true);
|
|
423
406
|
}
|
|
424
407
|
});
|
|
425
|
-
}
|
|
426
|
-
```
|
|
408
|
+
}</code></pre>
|
|
427
409
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
428
410
|
</auro-accordion>
|
|
429
411
|
|
|
@@ -434,33 +416,31 @@ export function initTriggerExample() {
|
|
|
434
416
|
The multi-notification use case requires the use of the `<auro-toaster>` component. Toaster will render the toasts at the bottom right of a page.
|
|
435
417
|
|
|
436
418
|
<div class="exampleWrapper">
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
419
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiple-toasts.html) -->
|
|
420
|
+
<!-- The below content is automatically added from ./../apiExamples/multiple-toasts.html -->
|
|
421
|
+
<auro-button id="multiToastBtn-default">Show default toast</auro-button>
|
|
422
|
+
<auro-button id="multiToastBtn-error">Show error toast</auro-button>
|
|
423
|
+
<auro-button id="multiToastBtn-success">Show success toast</auro-button>
|
|
424
|
+
<auro-toaster>
|
|
425
|
+
<auro-toast id="multiToast-default">Default toast.</auro-toast>
|
|
426
|
+
<auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again.</auro-toast>
|
|
427
|
+
<auro-toast id="multiToast-success" variant="success">Successfully added lap infant.</auro-toast>
|
|
428
|
+
</auro-toaster>
|
|
429
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
448
430
|
</div>
|
|
449
431
|
<auro-accordion alignRight>
|
|
450
|
-
|
|
432
|
+
<span slot="trigger">See code</span>
|
|
451
433
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiple-toasts.html) -->
|
|
452
434
|
<!-- The below code snippet is automatically added from ./../apiExamples/multiple-toasts.html -->
|
|
453
435
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
</auro-toaster>
|
|
463
|
-
```
|
|
436
|
+
<pre class="language-html"><code class="language-html"><auro-button id="multiToastBtn-default">Show default toast</auro-button>
|
|
437
|
+
<auro-button id="multiToastBtn-error">Show error toast</auro-button>
|
|
438
|
+
<auro-button id="multiToastBtn-success">Show success toast</auro-button>
|
|
439
|
+
<auro-toaster>
|
|
440
|
+
<auro-toast id="multiToast-default">Default toast.</auro-toast>
|
|
441
|
+
<auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again.</auro-toast>
|
|
442
|
+
<auro-toast id="multiToast-success" variant="success">Successfully added lap infant.</auro-toast>
|
|
443
|
+
</auro-toaster></code></pre>
|
|
464
444
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
465
445
|
</auro-accordion>
|
|
466
446
|
|
|
@@ -469,80 +449,76 @@ The multi-notification use case requires the use of the `<auro-toaster>` compone
|
|
|
469
449
|
The dynamic notification use case requires the use of the `<auro-toaster>` component. Toaster will render the toasts at the bottom right of a page.
|
|
470
450
|
|
|
471
451
|
<div class="exampleWrapper">
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
452
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic-toasts.html) -->
|
|
453
|
+
<!-- The below content is automatically added from ./../apiExamples/dynamic-toasts.html -->
|
|
454
|
+
<auro-button id="dynamicToastBtn-default">Show default toast</auro-button>
|
|
455
|
+
<auro-button id="dynamicToastBtn-error">Show error toast</auro-button>
|
|
456
|
+
<auro-button id="dynamicToastBtn-success">Show success toast</auro-button>
|
|
457
|
+
<auro-toaster id="dynamicToaster">
|
|
458
|
+
</auro-toaster>
|
|
459
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
480
460
|
</div>
|
|
481
461
|
<auro-accordion alignRight>
|
|
482
|
-
|
|
462
|
+
<span slot="trigger">See code</span>
|
|
483
463
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-toasts.html) -->
|
|
484
464
|
<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-toasts.html -->
|
|
485
465
|
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
</auro-toaster>
|
|
492
|
-
```
|
|
466
|
+
<pre class="language-html"><code class="language-html"><auro-button id="dynamicToastBtn-default">Show default toast</auro-button>
|
|
467
|
+
<auro-button id="dynamicToastBtn-error">Show error toast</auro-button>
|
|
468
|
+
<auro-button id="dynamicToastBtn-success">Show success toast</auro-button>
|
|
469
|
+
<auro-toaster id="dynamicToaster">
|
|
470
|
+
</auro-toaster></code></pre>
|
|
493
471
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
494
472
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-toasts.js) -->
|
|
495
473
|
<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-toasts.js -->
|
|
496
474
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
475
|
+
<pre class="language-js"><code class="language-js">/* eslint-disable jsdoc/require-jsdoc */
|
|
476
|
+
|
|
500
477
|
const toastDefs = [
|
|
501
478
|
{ id: "dynamicToast-default", variant: null, message: "Default toast.", btnId: "dynamicToastBtn-default" },
|
|
502
479
|
{ id: "dynamicToast-error", variant: "error", message: "Unable to add lap infant. Please try again.", btnId: "dynamicToastBtn-error" },
|
|
503
480
|
{ id: "dynamicToast-success", variant: "success", message: "Successfully added lap infant.", btnId: "dynamicToastBtn-success" },
|
|
504
481
|
];
|
|
505
|
-
|
|
482
|
+
|
|
506
483
|
// simple in-memory registry of active toasts
|
|
507
484
|
const activeToasts = new Map();
|
|
508
|
-
|
|
485
|
+
|
|
509
486
|
function generateToastId(baseId) {
|
|
510
487
|
return `${baseId}-${crypto.randomUUID()}`;
|
|
511
488
|
}
|
|
512
|
-
|
|
489
|
+
|
|
513
490
|
export function initDynamicToastsExample() {
|
|
514
491
|
const toaster = document.querySelector("#dynamicToaster");
|
|
515
|
-
|
|
516
|
-
toastDefs.forEach(({ id: baseId, variant, message, btnId })
|
|
517
|
-
document.querySelector(`#${btnId}`).addEventListener("click", ()
|
|
492
|
+
|
|
493
|
+
toastDefs.forEach(({ id: baseId, variant, message, btnId }) => {
|
|
494
|
+
document.querySelector(`#${btnId}`).addEventListener("click", () => {
|
|
518
495
|
const toast = document.createElement("auro-toast");
|
|
519
|
-
|
|
496
|
+
|
|
520
497
|
const toastId = generateToastId(baseId);
|
|
521
|
-
|
|
498
|
+
|
|
522
499
|
toast.id = toastId;
|
|
523
|
-
|
|
500
|
+
|
|
524
501
|
if (variant) {
|
|
525
502
|
toast.setAttribute("variant", variant);
|
|
526
503
|
}
|
|
527
|
-
|
|
504
|
+
|
|
528
505
|
toast.setAttribute("visible", true);
|
|
529
506
|
toast.textContent = message;
|
|
530
|
-
|
|
507
|
+
|
|
531
508
|
toaster.appendChild(toast);
|
|
532
|
-
|
|
509
|
+
|
|
533
510
|
// 👇 now the ID is actually used meaningfully
|
|
534
511
|
activeToasts.set(toastId, toast);
|
|
535
|
-
|
|
512
|
+
|
|
536
513
|
console.log("Toast added:", toastId);
|
|
537
|
-
|
|
514
|
+
|
|
538
515
|
// optional cleanup if your component doesn't auto-remove itself
|
|
539
|
-
toast.addEventListener("onToastClose", ()
|
|
516
|
+
toast.addEventListener("onToastClose", () => {
|
|
540
517
|
activeToasts.delete(toastId);
|
|
541
518
|
});
|
|
542
519
|
});
|
|
543
520
|
});
|
|
544
|
-
}
|
|
545
|
-
```
|
|
521
|
+
}</code></pre>
|
|
546
522
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
547
523
|
</auro-accordion>
|
|
548
524
|
|
|
@@ -559,40 +535,36 @@ The required pattern is a persistent container — a `div` or equivalent — wit
|
|
|
559
535
|
\* Only use `aria-live="assertive"` if your UI is making use of toasts that are alerting the user of important information. If you are not using `auro-toaster` you are responsible for managing the changes between `assertive` and `polite` announcement states.
|
|
560
536
|
|
|
561
537
|
<div class="exampleWrapper">
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
538
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/standalone-toast.html) -->
|
|
539
|
+
<!-- The below content is automatically added from ./../apiExamples/standalone-toast.html -->
|
|
540
|
+
<auro-button id="standaloneToastBtn">Show toast</auro-button>
|
|
541
|
+
<div id="standaloneContainer" aria-live="polite" aria-atomic="false"></div>
|
|
542
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
567
543
|
</div>
|
|
568
544
|
<auro-accordion alignRight>
|
|
569
|
-
|
|
545
|
+
<span slot="trigger">See code</span>
|
|
570
546
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/standalone-toast.html) -->
|
|
571
547
|
<!-- The below code snippet is automatically added from ./../apiExamples/standalone-toast.html -->
|
|
572
548
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
<div id="standaloneContainer" aria-live="polite" aria-atomic="false"></div>
|
|
576
|
-
```
|
|
549
|
+
<pre class="language-html"><code class="language-html"><auro-button id="standaloneToastBtn">Show toast</auro-button>
|
|
550
|
+
<div id="standaloneContainer" aria-live="polite" aria-atomic="false"></div></code></pre>
|
|
577
551
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
578
552
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/standalone-toast.js) -->
|
|
579
553
|
<!-- The below code snippet is automatically added from ./../apiExamples/standalone-toast.js -->
|
|
580
554
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
555
|
+
<pre class="language-js"><code class="language-js">/* eslint-disable jsdoc/require-jsdoc */
|
|
556
|
+
|
|
584
557
|
export function initStandaloneToastExample() {
|
|
585
558
|
const container = document.querySelector("#standaloneContainer");
|
|
586
|
-
|
|
587
|
-
document.querySelector("#standaloneToastBtn").addEventListener("click", ()
|
|
559
|
+
|
|
560
|
+
document.querySelector("#standaloneToastBtn").addEventListener("click", () => {
|
|
588
561
|
const toast = document.createElement("auro-toast");
|
|
589
562
|
toast.setAttribute("visible", "");
|
|
590
563
|
toast.setAttribute("variant", "success");
|
|
591
564
|
toast.textContent = "Successfully added lap infant";
|
|
592
565
|
container.appendChild(toast);
|
|
593
566
|
});
|
|
594
|
-
}
|
|
595
|
-
```
|
|
567
|
+
}</code></pre>
|
|
596
568
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
597
569
|
</auro-accordion>
|
|
598
570
|
|
|
@@ -603,14 +575,12 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
603
575
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
604
576
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
605
577
|
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
578
|
+
<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
579
|
+
|
|
609
580
|
:host {
|
|
610
581
|
--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, #{v.$ds-advanced-color-button-tertiary-background-hover});
|
|
611
582
|
--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #{v.$ds-advanced-color-shared-background-strong});
|
|
612
583
|
--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
613
584
|
--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
614
|
-
}
|
|
615
|
-
```
|
|
585
|
+
}</code></pre>
|
|
616
586
|
<!-- AURO-GENERATED-CONTENT:END -->
|