@aurodesignsystem-dev/auro-dialog 0.0.0-pr103.0
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/CHANGELOG.md +295 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +189 -0
- package/demo/api.html +64 -0
- package/demo/api.js +33 -0
- package/demo/api.md +803 -0
- package/demo/api.min.js +219 -0
- package/demo/auro-dialog.min.js +950 -0
- package/demo/index.html +63 -0
- package/demo/index.js +24 -0
- package/demo/index.md +151 -0
- package/demo/index.min.js +41 -0
- package/dist/auro-dialog-BNnIwNXB.js +128 -0
- package/dist/index.d.ts +230 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +93 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,803 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-dialog
|
|
5
|
+
|
|
6
|
+
The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| --------------------- | ----------------------- | --------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds. |
|
|
13
|
+
| lg | lg | | boolean | | Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
|
|
14
|
+
| md | md | | boolean | | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
|
|
15
|
+
| modal | modal | | boolean | | Modal dialog restricts the user to take an action (no default close actions). |
|
|
16
|
+
| onDark | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead. |
|
|
17
|
+
| open | open | | boolean | | Sets state of dialog to open. |
|
|
18
|
+
| sm | sm | | boolean | | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |
|
|
19
|
+
| triggerElement | | | HTMLElement | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
|
|
20
|
+
| unformatted | unformatted | | boolean | | Unformatted dialog window, edge-to-edge fill for content. |
|
|
21
|
+
|
|
22
|
+
### Methods
|
|
23
|
+
|
|
24
|
+
| Name | Parameters | Return | Description |
|
|
25
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
26
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
27
|
+
|
|
28
|
+
### Events
|
|
29
|
+
|
|
30
|
+
| Name | Description |
|
|
31
|
+
| ------ | -------------------------------------- |
|
|
32
|
+
| toggle | Event fires when the element is closed |
|
|
33
|
+
|
|
34
|
+
### Slots
|
|
35
|
+
|
|
36
|
+
| Name | Description |
|
|
37
|
+
| ---------------------- | -------------------------------------------------------------------------------- |
|
|
38
|
+
| ariaLabel.dialog.close | Text to describe the "x" icon close button for screen readers. Default: "Close". |
|
|
39
|
+
| content | Injects content into the body of the modal |
|
|
40
|
+
| footer | Used for action options, e.g. buttons |
|
|
41
|
+
| header | Text to display as the header of the modal |
|
|
42
|
+
|
|
43
|
+
### CSS Shadow Parts
|
|
44
|
+
|
|
45
|
+
| Name | Description |
|
|
46
|
+
| -------------- | -------------------------------------------------------- |
|
|
47
|
+
| close-button | adjust position of the close X icon in the dialog window |
|
|
48
|
+
| dialog | apply CSS to the entire dialog |
|
|
49
|
+
| dialog-content | apply CSS to the content of the dialog |
|
|
50
|
+
| dialog-footer | apply CSS to the footer of the dialog |
|
|
51
|
+
| dialog-header | apply CSS to the header of the dialog |
|
|
52
|
+
| dialog-overlay | apply CSS on the overlay of the dialog |
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
|
+
|
|
55
|
+
## Basic
|
|
56
|
+
|
|
57
|
+
<div class="exampleWrapper">
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
59
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
60
|
+
<div>
|
|
61
|
+
<auro-button id="openBasic">Open default dialog</auro-button>
|
|
62
|
+
</div>
|
|
63
|
+
<auro-dialog id="defaultDialog">
|
|
64
|
+
<span slot="header">Default Dialog</span>
|
|
65
|
+
<div slot="content">
|
|
66
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
67
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
68
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
69
|
+
<ul>
|
|
70
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
71
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
72
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
73
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</div>
|
|
76
|
+
<div slot="footer">
|
|
77
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
78
|
+
</div>
|
|
79
|
+
</auro-dialog>
|
|
80
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
81
|
+
</div>
|
|
82
|
+
<auro-accordion alignRight>
|
|
83
|
+
<span slot="trigger">See code</span>
|
|
84
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
85
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<div>
|
|
89
|
+
<auro-button id="openBasic">Open default dialog</auro-button>
|
|
90
|
+
</div>
|
|
91
|
+
<auro-dialog id="defaultDialog">
|
|
92
|
+
<span slot="header">Default Dialog</span>
|
|
93
|
+
<div slot="content">
|
|
94
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
95
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
96
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
97
|
+
<ul>
|
|
98
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
99
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
100
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
101
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</div>
|
|
104
|
+
<div slot="footer">
|
|
105
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
106
|
+
</div>
|
|
107
|
+
</auro-dialog>
|
|
108
|
+
```
|
|
109
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
110
|
+
</auro-accordion>
|
|
111
|
+
|
|
112
|
+
## Property & Attribute Examples
|
|
113
|
+
|
|
114
|
+
### Size Options
|
|
115
|
+
|
|
116
|
+
The auro-dialog supports three different sizes via attribute, `sm`, `md`, and `lg`. The default size is `lg`.
|
|
117
|
+
|
|
118
|
+
#### Size Effects
|
|
119
|
+
|
|
120
|
+
##### Desktop
|
|
121
|
+
At desktop resolutions, size affects the width of the dialog, and its height is dictated by its contents with a max height of 80%.
|
|
122
|
+
|
|
123
|
+
##### Mobile
|
|
124
|
+
At mobile resolutions the size affects the maximum height the dialog will use of the browser viewport with a fixed width of 100%.
|
|
125
|
+
|
|
126
|
+
> *Note: `lg` may be added in addition to `sm` or `md` to force the `lg` size on mobile while using the other size for desktop.*
|
|
127
|
+
|
|
128
|
+
#### Single Size Examples:
|
|
129
|
+
|
|
130
|
+
<div class="exampleWrapper">
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size-options.html) -->
|
|
132
|
+
<!-- The below content is automatically added from ./../apiExamples/size-options.html -->
|
|
133
|
+
<div>
|
|
134
|
+
<auro-button id="openDefaultSize">Open default dialog</auro-button>
|
|
135
|
+
<auro-button id="openMediumSize">Open medium dialog</auro-button>
|
|
136
|
+
<auro-button id="openSmallSize">Open small dialog</auro-button>
|
|
137
|
+
</div>
|
|
138
|
+
<auro-dialog id="defaultSizeDialog">
|
|
139
|
+
<span slot="header">Default Dialog</span>
|
|
140
|
+
<div slot="content">
|
|
141
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
142
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
143
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
144
|
+
<ul>
|
|
145
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
146
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
147
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
148
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
149
|
+
</ul>
|
|
150
|
+
</div>
|
|
151
|
+
<div slot="footer">
|
|
152
|
+
<auro-button secondary id="closeDefaultSize">Close</auro-button>
|
|
153
|
+
</div>
|
|
154
|
+
</auro-dialog>
|
|
155
|
+
<auro-dialog id="mediumSizeDialog" md>
|
|
156
|
+
<span slot="header">Medium Dialog</span>
|
|
157
|
+
<div slot="content">
|
|
158
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
159
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
160
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
161
|
+
<ul>
|
|
162
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
163
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
164
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
165
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
166
|
+
</ul>
|
|
167
|
+
</div>
|
|
168
|
+
<div slot="footer">
|
|
169
|
+
<auro-button secondary id="closeMediumSize">Close</auro-button>
|
|
170
|
+
</div>
|
|
171
|
+
</auro-dialog>
|
|
172
|
+
<auro-dialog id="smallSizeDialog" sm>
|
|
173
|
+
<span slot="header">Small Dialog</span>
|
|
174
|
+
<div slot="content">
|
|
175
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
176
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
177
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
178
|
+
<ul>
|
|
179
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
180
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
181
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
182
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
183
|
+
</ul>
|
|
184
|
+
</div>
|
|
185
|
+
<div slot="footer">
|
|
186
|
+
<auro-button secondary id="closeSmallSize">Close</auro-button>
|
|
187
|
+
</div>
|
|
188
|
+
</auro-dialog>
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
190
|
+
</div>
|
|
191
|
+
<auro-accordion alignRight>
|
|
192
|
+
<span slot="trigger">See code</span>
|
|
193
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size-options.html) -->
|
|
194
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/size-options.html -->
|
|
195
|
+
|
|
196
|
+
```html
|
|
197
|
+
<div>
|
|
198
|
+
<auro-button id="openDefaultSize">Open default dialog</auro-button>
|
|
199
|
+
<auro-button id="openMediumSize">Open medium dialog</auro-button>
|
|
200
|
+
<auro-button id="openSmallSize">Open small dialog</auro-button>
|
|
201
|
+
</div>
|
|
202
|
+
<auro-dialog id="defaultSizeDialog">
|
|
203
|
+
<span slot="header">Default Dialog</span>
|
|
204
|
+
<div slot="content">
|
|
205
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
206
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
207
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
208
|
+
<ul>
|
|
209
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
210
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
211
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
212
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
213
|
+
</ul>
|
|
214
|
+
</div>
|
|
215
|
+
<div slot="footer">
|
|
216
|
+
<auro-button secondary id="closeDefaultSize">Close</auro-button>
|
|
217
|
+
</div>
|
|
218
|
+
</auro-dialog>
|
|
219
|
+
<auro-dialog id="mediumSizeDialog" md>
|
|
220
|
+
<span slot="header">Medium Dialog</span>
|
|
221
|
+
<div slot="content">
|
|
222
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
223
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
224
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
225
|
+
<ul>
|
|
226
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
227
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
228
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
229
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
230
|
+
</ul>
|
|
231
|
+
</div>
|
|
232
|
+
<div slot="footer">
|
|
233
|
+
<auro-button secondary id="closeMediumSize">Close</auro-button>
|
|
234
|
+
</div>
|
|
235
|
+
</auro-dialog>
|
|
236
|
+
<auro-dialog id="smallSizeDialog" sm>
|
|
237
|
+
<span slot="header">Small Dialog</span>
|
|
238
|
+
<div slot="content">
|
|
239
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
240
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
241
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
242
|
+
<ul>
|
|
243
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
244
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
245
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
246
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
247
|
+
</ul>
|
|
248
|
+
</div>
|
|
249
|
+
<div slot="footer">
|
|
250
|
+
<auro-button secondary id="closeSmallSize">Close</auro-button>
|
|
251
|
+
</div>
|
|
252
|
+
</auro-dialog>
|
|
253
|
+
```
|
|
254
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
255
|
+
</auro-accordion>
|
|
256
|
+
|
|
257
|
+
#### Mixed Size Examples:
|
|
258
|
+
|
|
259
|
+
<div class="exampleWrapper">
|
|
260
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/decoupled.html) -->
|
|
261
|
+
<!-- The below content is automatically added from ./../apiExamples/decoupled.html -->
|
|
262
|
+
<div>
|
|
263
|
+
<auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
|
|
264
|
+
<auro-button id="openMdLg">Open [md lg] dialog</auro-button>
|
|
265
|
+
</div>
|
|
266
|
+
<auro-dialog id="smLgDialog" sm lg>
|
|
267
|
+
<span slot="header">Small Modal Dialog</span>
|
|
268
|
+
<div slot="content">
|
|
269
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
270
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
271
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
272
|
+
<ul>
|
|
273
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
274
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
275
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
276
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</div>
|
|
279
|
+
<div slot="footer">
|
|
280
|
+
<auro-button id="closeSmLg">
|
|
281
|
+
I understand
|
|
282
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
283
|
+
</auro-button>
|
|
284
|
+
</div>
|
|
285
|
+
</auro-dialog>
|
|
286
|
+
<auro-dialog id="mdLgDialog" md lg>
|
|
287
|
+
<span slot="header">Medium Modal Dialog</span>
|
|
288
|
+
<div slot="content">
|
|
289
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
290
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
291
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
292
|
+
<ul>
|
|
293
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
294
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
295
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
296
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
297
|
+
</ul>
|
|
298
|
+
</div>
|
|
299
|
+
<div slot="footer">
|
|
300
|
+
<auro-button id="closeMdLg">
|
|
301
|
+
I understand
|
|
302
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
303
|
+
</auro-button>
|
|
304
|
+
</div>
|
|
305
|
+
</auro-dialog>
|
|
306
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
307
|
+
</div>
|
|
308
|
+
<auro-accordion alignRight>
|
|
309
|
+
<span slot="trigger">See code</span>
|
|
310
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/decoupled.html) -->
|
|
311
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/decoupled.html -->
|
|
312
|
+
|
|
313
|
+
```html
|
|
314
|
+
<div>
|
|
315
|
+
<auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
|
|
316
|
+
<auro-button id="openMdLg">Open [md lg] dialog</auro-button>
|
|
317
|
+
</div>
|
|
318
|
+
<auro-dialog id="smLgDialog" sm lg>
|
|
319
|
+
<span slot="header">Small Modal Dialog</span>
|
|
320
|
+
<div slot="content">
|
|
321
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
322
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
323
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
324
|
+
<ul>
|
|
325
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
326
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
327
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
328
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
329
|
+
</ul>
|
|
330
|
+
</div>
|
|
331
|
+
<div slot="footer">
|
|
332
|
+
<auro-button id="closeSmLg">
|
|
333
|
+
I understand
|
|
334
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
335
|
+
</auro-button>
|
|
336
|
+
</div>
|
|
337
|
+
</auro-dialog>
|
|
338
|
+
<auro-dialog id="mdLgDialog" md lg>
|
|
339
|
+
<span slot="header">Medium Modal Dialog</span>
|
|
340
|
+
<div slot="content">
|
|
341
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
342
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
343
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
344
|
+
<ul>
|
|
345
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
346
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
347
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
348
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
349
|
+
</ul>
|
|
350
|
+
</div>
|
|
351
|
+
<div slot="footer">
|
|
352
|
+
<auro-button id="closeMdLg">
|
|
353
|
+
I understand
|
|
354
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
355
|
+
</auro-button>
|
|
356
|
+
</div>
|
|
357
|
+
</auro-dialog>
|
|
358
|
+
```
|
|
359
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
360
|
+
</auro-accordion>
|
|
361
|
+
|
|
362
|
+
### Modal
|
|
363
|
+
|
|
364
|
+
The auro-dialog supports a modal dialog state that will lock a user into interacting with the modal dialog via the `modal` attribute.
|
|
365
|
+
|
|
366
|
+
When using this state, the modal dialog must include a button action to dismiss the modal dialog as the closing icon will not be available and the user will not be able to click outside the `modal` dialog to dismiss.
|
|
367
|
+
|
|
368
|
+
<div class="exampleWrapper">
|
|
369
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
|
|
370
|
+
<!-- The below content is automatically added from ./../apiExamples/modal.html -->
|
|
371
|
+
<div>
|
|
372
|
+
<auro-button id="openDefaultModal">Open default modal</auro-button>
|
|
373
|
+
<auro-button id="openMediumModal">Open medium modal</auro-button>
|
|
374
|
+
<auro-button id="openSmallModal">Open small modal</auro-button>
|
|
375
|
+
</div>
|
|
376
|
+
<auro-dialog id="defaultModalDialog" modal>
|
|
377
|
+
<span slot="header">Default Modal Dialog</span>
|
|
378
|
+
<div slot="content">
|
|
379
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
380
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
381
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
382
|
+
<ul>
|
|
383
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
384
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
385
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
386
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
387
|
+
</ul>
|
|
388
|
+
</div>
|
|
389
|
+
<div slot="footer">
|
|
390
|
+
<auro-button id="closeDefaultModal">I understand
|
|
391
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
392
|
+
</auro-button>
|
|
393
|
+
</div>
|
|
394
|
+
</auro-dialog>
|
|
395
|
+
<auro-dialog id="mediumModalDialog" md modal>
|
|
396
|
+
<span slot="header">Medium Dialog</span>
|
|
397
|
+
<div slot="content">
|
|
398
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
399
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
400
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
401
|
+
<ul>
|
|
402
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
403
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
404
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
405
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
406
|
+
</ul>
|
|
407
|
+
</div>
|
|
408
|
+
<div slot="footer">
|
|
409
|
+
<auro-button id="closeMediumModal">I understand
|
|
410
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
411
|
+
</auro-button>
|
|
412
|
+
</div>
|
|
413
|
+
</auro-dialog>
|
|
414
|
+
<auro-dialog id="smallModalDialog" sm modal>
|
|
415
|
+
<span slot="header">Small Dialog</span>
|
|
416
|
+
<div slot="content">
|
|
417
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
418
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
419
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
420
|
+
<ul>
|
|
421
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
422
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
423
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
424
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
425
|
+
</ul>
|
|
426
|
+
</div>
|
|
427
|
+
<div slot="footer">
|
|
428
|
+
<auro-button id="closeSmallModal">I understand
|
|
429
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
430
|
+
</auro-button>
|
|
431
|
+
</div>
|
|
432
|
+
</auro-dialog>
|
|
433
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
434
|
+
</div>
|
|
435
|
+
<auro-accordion alignRight>
|
|
436
|
+
<span slot="trigger">See code</span>
|
|
437
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
|
|
438
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->
|
|
439
|
+
|
|
440
|
+
```html
|
|
441
|
+
<div>
|
|
442
|
+
<auro-button id="openDefaultModal">Open default modal</auro-button>
|
|
443
|
+
<auro-button id="openMediumModal">Open medium modal</auro-button>
|
|
444
|
+
<auro-button id="openSmallModal">Open small modal</auro-button>
|
|
445
|
+
</div>
|
|
446
|
+
<auro-dialog id="defaultModalDialog" modal>
|
|
447
|
+
<span slot="header">Default Modal Dialog</span>
|
|
448
|
+
<div slot="content">
|
|
449
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
450
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
451
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
452
|
+
<ul>
|
|
453
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
454
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
455
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
456
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
457
|
+
</ul>
|
|
458
|
+
</div>
|
|
459
|
+
<div slot="footer">
|
|
460
|
+
<auro-button id="closeDefaultModal">I understand
|
|
461
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
462
|
+
</auro-button>
|
|
463
|
+
</div>
|
|
464
|
+
</auro-dialog>
|
|
465
|
+
<auro-dialog id="mediumModalDialog" md modal>
|
|
466
|
+
<span slot="header">Medium Dialog</span>
|
|
467
|
+
<div slot="content">
|
|
468
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
469
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
470
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
471
|
+
<ul>
|
|
472
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
473
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
474
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
475
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
476
|
+
</ul>
|
|
477
|
+
</div>
|
|
478
|
+
<div slot="footer">
|
|
479
|
+
<auro-button id="closeMediumModal">I understand
|
|
480
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
481
|
+
</auro-button>
|
|
482
|
+
</div>
|
|
483
|
+
</auro-dialog>
|
|
484
|
+
<auro-dialog id="smallModalDialog" sm modal>
|
|
485
|
+
<span slot="header">Small Dialog</span>
|
|
486
|
+
<div slot="content">
|
|
487
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
488
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
489
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
490
|
+
<ul>
|
|
491
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
492
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
493
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
494
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
495
|
+
</ul>
|
|
496
|
+
</div>
|
|
497
|
+
<div slot="footer">
|
|
498
|
+
<auro-button id="closeSmallModal">I understand
|
|
499
|
+
<auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
|
|
500
|
+
</auro-button>
|
|
501
|
+
</div>
|
|
502
|
+
</auro-dialog>
|
|
503
|
+
```
|
|
504
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
505
|
+
</auro-accordion>
|
|
506
|
+
|
|
507
|
+
### Unformatted dialog
|
|
508
|
+
|
|
509
|
+
For use case where the use of a dialog is to be more freeform, but the experience and base tooling for the dialog are still requested, there is the `unformatted` property.
|
|
510
|
+
|
|
511
|
+
This property can be used in combination with any other use case of the dialog, but it will render an unformatted dialog window, allowing for full customization of content within the scope of the window.
|
|
512
|
+
|
|
513
|
+
## Slot Examples
|
|
514
|
+
|
|
515
|
+
### Close button aria-label slot
|
|
516
|
+
|
|
517
|
+
To customize the aria-label text for the close button, use the `ariaLabel.dialog.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
|
|
518
|
+
|
|
519
|
+
<div class="exampleWrapper">
|
|
520
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label.html) -->
|
|
521
|
+
<!-- The below content is automatically added from ./../apiExamples/aria-label.html -->
|
|
522
|
+
<div>
|
|
523
|
+
<auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
|
|
524
|
+
</div>
|
|
525
|
+
<auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
|
|
526
|
+
<span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
|
|
527
|
+
<span slot="content">
|
|
528
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
529
|
+
<div class="unformattedWrapper">
|
|
530
|
+
<h1 id="dialog-header" class="heading-lg">This is a header</h1>
|
|
531
|
+
These are words that are slotted into the scope of the custom element.
|
|
532
|
+
</div>
|
|
533
|
+
</span>
|
|
534
|
+
</auro-dialog>
|
|
535
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
536
|
+
</div>
|
|
537
|
+
<auro-accordion alignRight>
|
|
538
|
+
<span slot="trigger">See code</span>
|
|
539
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
|
|
540
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
|
|
541
|
+
|
|
542
|
+
```html
|
|
543
|
+
<div>
|
|
544
|
+
<auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
|
|
545
|
+
</div>
|
|
546
|
+
<auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
|
|
547
|
+
<span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
|
|
548
|
+
<span slot="content">
|
|
549
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
550
|
+
<div class="unformattedWrapper">
|
|
551
|
+
<h1 id="dialog-header" class="heading-lg">This is a header</h1>
|
|
552
|
+
These are words that are slotted into the scope of the custom element.
|
|
553
|
+
</div>
|
|
554
|
+
</span>
|
|
555
|
+
</auro-dialog>
|
|
556
|
+
```
|
|
557
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
558
|
+
</auro-accordion>
|
|
559
|
+
|
|
560
|
+
## CSS Shadow Part Examples
|
|
561
|
+
|
|
562
|
+
### Close Button
|
|
563
|
+
|
|
564
|
+
The close button can be targetted via the `close-button` CSS part, e.g. `auro-dialog::part(close-button)`.
|
|
565
|
+
|
|
566
|
+
<div class="exampleWrapper">
|
|
567
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button.html) -->
|
|
568
|
+
<!-- The below content is automatically added from ./../apiExamples/close-button.html -->
|
|
569
|
+
<div>
|
|
570
|
+
<auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
|
|
571
|
+
</div>
|
|
572
|
+
<style>
|
|
573
|
+
.example::part(close-button) {
|
|
574
|
+
top: var(--ds-size-400);
|
|
575
|
+
right: var(--ds-size-400);
|
|
576
|
+
}
|
|
577
|
+
</style>
|
|
578
|
+
<auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
|
|
579
|
+
<span slot="content">
|
|
580
|
+
<img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
|
|
581
|
+
<div class="unformattedWrapper">
|
|
582
|
+
<h1 id="dialog-header" class="heading-lg">Unformatted w/custom close button</h1>
|
|
583
|
+
Notice the custom location of the close button as well as the custom color.
|
|
584
|
+
</div>
|
|
585
|
+
</span>
|
|
586
|
+
</auro-dialog>
|
|
587
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
588
|
+
</div>
|
|
589
|
+
<auro-accordion alignRight>
|
|
590
|
+
<span slot="trigger">See code</span>
|
|
591
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/close-button.html) -->
|
|
592
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/close-button.html -->
|
|
593
|
+
|
|
594
|
+
```html
|
|
595
|
+
<div>
|
|
596
|
+
<auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
|
|
597
|
+
</div>
|
|
598
|
+
<style>
|
|
599
|
+
.example::part(close-button) {
|
|
600
|
+
top: var(--ds-size-400);
|
|
601
|
+
right: var(--ds-size-400);
|
|
602
|
+
}
|
|
603
|
+
</style>
|
|
604
|
+
<auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
|
|
605
|
+
<span slot="content">
|
|
606
|
+
<img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
|
|
607
|
+
<div class="unformattedWrapper">
|
|
608
|
+
<h1 id="dialog-header" class="heading-lg">Unformatted w/custom close button</h1>
|
|
609
|
+
Notice the custom location of the close button as well as the custom color.
|
|
610
|
+
</div>
|
|
611
|
+
</span>
|
|
612
|
+
</auro-dialog>
|
|
613
|
+
```
|
|
614
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
615
|
+
</auro-accordion>
|
|
616
|
+
|
|
617
|
+
## Common Usage Patterns & Functional Examples
|
|
618
|
+
|
|
619
|
+
### Dialog with Popover and Dropdown Components
|
|
620
|
+
|
|
621
|
+
This is a use case where there is a popover and combobox component inside the dialog component, creating a stack of layered components.
|
|
622
|
+
|
|
623
|
+
<div class="exampleWrapper">
|
|
624
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-and-dropdown.html) -->
|
|
625
|
+
<!-- The below content is automatically added from ./../apiExamples/popover-and-dropdown.html -->
|
|
626
|
+
<div>
|
|
627
|
+
<auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
|
|
628
|
+
</div>
|
|
629
|
+
<auro-dialog id="popover-dialog" sm lg>
|
|
630
|
+
<span slot="header">Small Modal Dialog</span>
|
|
631
|
+
<div slot="content">
|
|
632
|
+
<p>
|
|
633
|
+
When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
|
|
634
|
+
</p>
|
|
635
|
+
<p>
|
|
636
|
+
Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
|
|
637
|
+
</p>
|
|
638
|
+
<auro-header level="3" display="500">
|
|
639
|
+
Before checking your bags, remember to:
|
|
640
|
+
</auro-header>
|
|
641
|
+
<auro-popover>
|
|
642
|
+
<div class="content">
|
|
643
|
+
<ul>
|
|
644
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
645
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
646
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
647
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
648
|
+
</ul>
|
|
649
|
+
</div>
|
|
650
|
+
<auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
|
|
651
|
+
</auro-popover>
|
|
652
|
+
<auro-combobox>
|
|
653
|
+
<span slot="label">Name</span>
|
|
654
|
+
<auro-menu>
|
|
655
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
656
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
657
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
658
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
659
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
660
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
661
|
+
</auro-menu>
|
|
662
|
+
</auro-combobox>
|
|
663
|
+
</div>
|
|
664
|
+
<div slot="footer">
|
|
665
|
+
<auro-button id="closePopAndDrop">
|
|
666
|
+
I understand
|
|
667
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
668
|
+
</auro-button>
|
|
669
|
+
</div>
|
|
670
|
+
</auro-dialog>
|
|
671
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
672
|
+
</div>
|
|
673
|
+
<auro-accordion alignRight>
|
|
674
|
+
<span slot="trigger">See code</span>
|
|
675
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popover-and-dropdown.html) -->
|
|
676
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/popover-and-dropdown.html -->
|
|
677
|
+
|
|
678
|
+
```html
|
|
679
|
+
<div>
|
|
680
|
+
<auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
|
|
681
|
+
</div>
|
|
682
|
+
<auro-dialog id="popover-dialog" sm lg>
|
|
683
|
+
<span slot="header">Small Modal Dialog</span>
|
|
684
|
+
<div slot="content">
|
|
685
|
+
<p>
|
|
686
|
+
When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
|
|
687
|
+
</p>
|
|
688
|
+
<p>
|
|
689
|
+
Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
|
|
690
|
+
</p>
|
|
691
|
+
<auro-header level="3" display="500">
|
|
692
|
+
Before checking your bags, remember to:
|
|
693
|
+
</auro-header>
|
|
694
|
+
<auro-popover>
|
|
695
|
+
<div class="content">
|
|
696
|
+
<ul>
|
|
697
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
698
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
699
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
700
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
701
|
+
</ul>
|
|
702
|
+
</div>
|
|
703
|
+
<auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
|
|
704
|
+
</auro-popover>
|
|
705
|
+
<auro-combobox>
|
|
706
|
+
<span slot="label">Name</span>
|
|
707
|
+
<auro-menu>
|
|
708
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
709
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
710
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
711
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
712
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
713
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
714
|
+
</auro-menu>
|
|
715
|
+
</auro-combobox>
|
|
716
|
+
</div>
|
|
717
|
+
<div slot="footer">
|
|
718
|
+
<auro-button id="closePopAndDrop">
|
|
719
|
+
I understand
|
|
720
|
+
<auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
|
|
721
|
+
</auro-button>
|
|
722
|
+
</div>
|
|
723
|
+
</auro-dialog>
|
|
724
|
+
```
|
|
725
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
726
|
+
</auro-accordion>
|
|
727
|
+
|
|
728
|
+
### Accessibility
|
|
729
|
+
|
|
730
|
+
Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`. To make proper use of this, in an unformatted dialog, the developer is required to add `id="dialog-header"` to the content header within the dialog content.
|
|
731
|
+
|
|
732
|
+
<div class="exampleWrapper">
|
|
733
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility.html) -->
|
|
734
|
+
<!-- The below content is automatically added from ./../apiExamples/accessibility.html -->
|
|
735
|
+
<div>
|
|
736
|
+
<auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
|
|
737
|
+
</div>
|
|
738
|
+
<auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
|
|
739
|
+
<span slot="content">
|
|
740
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
741
|
+
<div class="unformattedWrapper">
|
|
742
|
+
<h1 id="dialog-header" class="heading-lg">This is a header</h1>
|
|
743
|
+
These are words that are slotted into the scope of the custom element.
|
|
744
|
+
</div>
|
|
745
|
+
</span>
|
|
746
|
+
</auro-dialog>
|
|
747
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
748
|
+
</div>
|
|
749
|
+
<auro-accordion alignRight>
|
|
750
|
+
<span slot="trigger">See code</span>
|
|
751
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility.html) -->
|
|
752
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/accessibility.html -->
|
|
753
|
+
|
|
754
|
+
```html
|
|
755
|
+
<div>
|
|
756
|
+
<auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
|
|
757
|
+
</div>
|
|
758
|
+
<auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
|
|
759
|
+
<span slot="content">
|
|
760
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
761
|
+
<div class="unformattedWrapper">
|
|
762
|
+
<h1 id="dialog-header" class="heading-lg">This is a header</h1>
|
|
763
|
+
These are words that are slotted into the scope of the custom element.
|
|
764
|
+
</div>
|
|
765
|
+
</span>
|
|
766
|
+
</auro-dialog>
|
|
767
|
+
```
|
|
768
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
769
|
+
</auro-accordion>
|
|
770
|
+
|
|
771
|
+
### Responsive padding
|
|
772
|
+
|
|
773
|
+
Part of the dialog design spec is its responsive padding. To take advantage of this for your content within the scope of the dialog, be sure to use the selector `unformattedWrapper` that can be imported from the package here:
|
|
774
|
+
|
|
775
|
+
```css
|
|
776
|
+
import '@aurodesignsystem/auro-dialog/dist/style-unformatted.scss'
|
|
777
|
+
|
|
778
|
+
or
|
|
779
|
+
|
|
780
|
+
import '@aurodesignsystem/auro-dialog/dist/style-unformatted.css'
|
|
781
|
+
```
|
|
782
|
+
|
|
783
|
+
## Restyle Component with CSS Variables
|
|
784
|
+
|
|
785
|
+
The component may be restyled by changing the values of the following token(s).
|
|
786
|
+
|
|
787
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
788
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
789
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
790
|
+
|
|
791
|
+
```scss
|
|
792
|
+
@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
|
|
793
|
+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
794
|
+
|
|
795
|
+
:host {
|
|
796
|
+
--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
|
|
797
|
+
--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{vac.$ds-elevation-300});
|
|
798
|
+
--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, #{v.$ds-advanced-color-shared-scrim});
|
|
799
|
+
--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, #{v.$ds-advanced-color-shared-scrim});
|
|
800
|
+
--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
801
|
+
}
|
|
802
|
+
```
|
|
803
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|