@patternfly/patternfly 5.0.0-prerelease.2 → 5.0.0-prerelease.4

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.
Files changed (53) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-themes.css +6 -0
  5. package/base/patternfly-variables.css +0 -6
  6. package/components/AboutModalBox/about-modal-box.css +6 -0
  7. package/components/Banner/banner.css +6 -0
  8. package/components/LogViewer/log-viewer.css +6 -0
  9. package/components/Login/login.css +7 -0
  10. package/components/Masthead/masthead.css +8 -6
  11. package/components/Masthead/masthead.scss +1 -7
  12. package/components/Masthead/themes/dark/masthead.scss +1 -0
  13. package/components/MenuToggle/menu-toggle.css +13 -11
  14. package/components/MenuToggle/menu-toggle.scss +14 -12
  15. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  16. package/components/Page/page.css +8 -0
  17. package/components/Wizard/wizard.css +6 -0
  18. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  19. package/docs/demos/Alert/examples/Alert.md +126 -2322
  20. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  21. package/docs/demos/Banner/examples/Banner.md +84 -1588
  22. package/docs/demos/CardView/examples/CardView.md +42 -774
  23. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  24. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  25. package/docs/demos/DataList/examples/DataList.md +191 -3119
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  27. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  29. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  30. package/docs/demos/Modal/examples/Modal.md +252 -4644
  31. package/docs/demos/Nav/examples/Nav.md +336 -6192
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  33. package/docs/demos/Page/examples/Page.md +378 -6966
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  35. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  36. package/docs/demos/Table/examples/Table.md +752 -11732
  37. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  38. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  39. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +9 -6
  42. package/patternfly-base-no-globals.css +9 -6
  43. package/patternfly-base-theme-dark-unversioned.css +9 -6
  44. package/patternfly-base.css +9 -6
  45. package/patternfly-no-globals.css +342 -23
  46. package/patternfly-theme-dark-unversioned.css +342 -23
  47. package/patternfly.css +342 -23
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/placeholders.scss +4 -0
  51. package/sass-utilities/themes/dark/placeholders.scss +4 -0
  52. package/RELEASE-NOTES.md +0 -1815
  53. package/UPGRADE-GUIDE.md +0 -1298
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -55,800 +55,68 @@ section: components
55
55
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
56
56
  >
57
57
  <div class="pf-v5-c-toolbar__item">
58
- <nav
59
- class="pf-v5-c-app-launcher"
58
+ <button
59
+ class="pf-v5-c-menu-toggle pf-m-plain"
60
+ type="button"
61
+ aria-expanded="false"
60
62
  aria-label="Application launcher"
61
- id="alert-basic-example-masthead-application-launcher"
62
63
  >
63
- <button
64
- class="pf-v5-c-app-launcher__toggle"
65
- type="button"
66
- id="alert-basic-example-masthead-application-launcher-button"
67
- aria-expanded="false"
68
- aria-label="Application launcher"
69
- >
70
- <i class="fas fa-th" aria-hidden="true"></i>
71
- </button>
72
- <div
73
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
74
- hidden
75
- >
76
- <div class="pf-v5-c-app-launcher__menu-search">
77
- <div class="pf-v5-c-text-input-group">
78
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
79
- <span class="pf-v5-c-text-input-group__text">
80
- <span class="pf-v5-c-text-input-group__icon">
81
- <i class="fas fa-fw fa-search"></i>
82
- </span>
83
- <input
84
- class="pf-v5-c-text-input-group__text-input"
85
- type="text"
86
- placeholder="Filer by name"
87
- value
88
- aria-label="Search input"
89
- />
90
- </span>
91
- </div>
92
- </div>
93
- </div>
94
- <section class="pf-v5-c-app-launcher__group">
95
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
96
- <ul role="list">
97
- <li
98
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
99
- >
100
- <a class="pf-v5-c-app-launcher__menu-item">
101
- Link 1
102
- <span
103
- class="pf-v5-c-app-launcher__menu-item-external-icon"
104
- >
105
- <i
106
- class="fas fa-external-link-alt"
107
- aria-hidden="true"
108
- ></i>
109
- </span>
110
- <span
111
- class="pf-v5-screen-reader"
112
- >(opens new window)</span>
113
- </a>
114
- <button
115
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
116
- type="button"
117
- aria-label="Favorite"
118
- >
119
- <i class="fas fa-star" aria-hidden="true"></i>
120
- </button>
121
- </li>
122
- <li
123
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
124
- >
125
- <a class="pf-v5-c-app-launcher__menu-item">
126
- Link 2
127
- <span
128
- class="pf-v5-c-app-launcher__menu-item-external-icon"
129
- >
130
- <i
131
- class="fas fa-external-link-alt"
132
- aria-hidden="true"
133
- ></i>
134
- </span>
135
- <span
136
- class="pf-v5-screen-reader"
137
- >(opens new window)</span>
138
- </a>
139
- <button
140
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
141
- type="button"
142
- aria-label="Favorite"
143
- >
144
- <i class="fas fa-star" aria-hidden="true"></i>
145
- </button>
146
- </li>
147
- </ul>
148
- </section>
149
- <hr class="pf-v5-c-divider" />
150
- <section class="pf-v5-c-app-launcher__group">
151
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
152
- <ul role="list">
153
- <li
154
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
155
- >
156
- <a class="pf-v5-c-app-launcher__menu-item">
157
- Link 1
158
- <span
159
- class="pf-v5-c-app-launcher__menu-item-external-icon"
160
- >
161
- <i
162
- class="fas fa-external-link-alt"
163
- aria-hidden="true"
164
- ></i>
165
- </span>
166
- <span
167
- class="pf-v5-screen-reader"
168
- >(opens new window)</span>
169
- </a>
170
- <button
171
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
172
- type="button"
173
- aria-label="Favorite"
174
- >
175
- <i class="fas fa-star" aria-hidden="true"></i>
176
- </button>
177
- </li>
178
- <li
179
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
180
- >
181
- <a class="pf-v5-c-app-launcher__menu-item">
182
- Link 2
183
- <span
184
- class="pf-v5-c-app-launcher__menu-item-external-icon"
185
- >
186
- <i
187
- class="fas fa-external-link-alt"
188
- aria-hidden="true"
189
- ></i>
190
- </span>
191
- <span
192
- class="pf-v5-screen-reader"
193
- >(opens new window)</span>
194
- </a>
195
- <button
196
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
197
- type="button"
198
- aria-label="Favorite"
199
- >
200
- <i class="fas fa-star" aria-hidden="true"></i>
201
- </button>
202
- </li>
203
- </ul>
204
- </section>
205
- </div>
206
- </nav>
64
+ <i class="fas fa-th" aria-hidden="true"></i>
65
+ </button>
207
66
  </div>
208
67
  <div class="pf-v5-c-toolbar__item">
209
- <div class="pf-v5-c-dropdown">
210
- <button
211
- class="pf-v5-c-dropdown__toggle pf-m-plain"
212
- id="alert-basic-example-masthead-settings-button"
213
- aria-expanded="false"
214
- type="button"
215
- aria-label="Settings"
216
- >
217
- <i class="fas fa-cog" aria-hidden="true"></i>
218
- </button>
219
- <ul
220
- class="pf-v5-c-dropdown__menu pf-m-align-right"
221
- aria-labelledby="alert-basic-example-masthead-settings-button"
222
- hidden
223
- >
224
- <li>
225
- <button
226
- class="pf-v5-c-dropdown__menu-item"
227
- type="button"
228
- >Settings</button>
229
- </li>
230
- <li>
231
- <button
232
- class="pf-v5-c-dropdown__menu-item"
233
- type="button"
234
- >Use the beta release</button>
235
- </li>
236
- </ul>
237
- </div>
68
+ <button
69
+ class="pf-v5-c-menu-toggle pf-m-plain"
70
+ type="button"
71
+ aria-expanded="false"
72
+ aria-label="Settings"
73
+ >
74
+ <i class="fas fa-cog" aria-hidden="true"></i>
75
+ </button>
238
76
  </div>
239
77
  <div class="pf-v5-c-toolbar__item">
240
- <div class="pf-v5-c-dropdown">
241
- <button
242
- class="pf-v5-c-dropdown__toggle pf-m-plain"
243
- id="alert-basic-example-masthead-help-button"
244
- aria-expanded="false"
245
- type="button"
246
- aria-label="Help"
247
- >
248
- <i class="fas fa-question-circle" aria-hidden="true"></i>
249
- </button>
250
- <ul
251
- class="pf-v5-c-dropdown__menu pf-m-align-right"
252
- aria-labelledby="alert-basic-example-masthead-help-button"
253
- hidden
254
- >
255
- <li>
256
- <button
257
- class="pf-v5-c-dropdown__menu-item"
258
- type="button"
259
- >Support options</button>
260
- </li>
261
- <li>
262
- <button
263
- class="pf-v5-c-dropdown__menu-item"
264
- type="button"
265
- >Open support case</button>
266
- </li>
267
- <li>
268
- <button
269
- class="pf-v5-c-dropdown__menu-item"
270
- type="button"
271
- >API documentation</button>
272
- </li>
273
- </ul>
274
- </div>
275
- </div>
276
- </div>
277
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
278
- <div class="pf-v5-c-dropdown">
279
78
  <button
280
79
  class="pf-v5-c-menu-toggle pf-m-plain"
281
80
  type="button"
282
81
  aria-expanded="false"
283
- aria-label="Actions"
82
+ aria-label="Help"
284
83
  >
285
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
84
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
286
85
  </button>
287
- <div
288
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
289
- hidden
290
- >
291
- <div class="pf-v5-c-menu__content">
292
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
293
- <ul class="pf-v5-c-menu__list" role="menu">
294
- <li
295
- class="pf-v5-c-menu__list-item pf-m-disabled"
296
- role="none"
297
- >
298
- <button
299
- class="pf-v5-c-menu__item"
300
- type="button"
301
- disabled
302
- role="menuitem"
303
- >
304
- <span class="pf-v5-c-menu__item-description">
305
- <div class="pf-v5-u-font-size-sm">Username:</div>
306
- <div class="pf-v5-u-font-size-md">ned_username</div>
307
- </span>
308
- </button>
309
- </li>
310
- <li
311
- class="pf-v5-c-menu__list-item pf-m-disabled"
312
- role="none"
313
- >
314
- <button
315
- class="pf-v5-c-menu__item"
316
- type="button"
317
- disabled
318
- role="menuitem"
319
- >
320
- <span class="pf-v5-c-menu__item-description">
321
- <div
322
- class="pf-v5-u-font-size-sm"
323
- >Account number:</div>
324
- <div class="pf-v5-u-font-size-md">123456789</div>
325
- </span>
326
- </button>
327
- </li>
328
- <li class="pf-v5-c-divider" role="separator"></li>
329
- <li class="pf-v5-c-menu__list-item" role="none">
330
- <button
331
- class="pf-v5-c-menu__item"
332
- type="button"
333
- role="menuitem"
334
- >
335
- <span class="pf-v5-c-menu__item-main">
336
- <span class="pf-v5-c-menu__item-text">My profile</span>
337
- </span>
338
- </button>
339
- </li>
340
- <li class="pf-v5-c-menu__list-item" role="none">
341
- <button
342
- class="pf-v5-c-menu__item"
343
- type="button"
344
- role="menuitem"
345
- >
346
- <span class="pf-v5-c-menu__item-main">
347
- <span
348
- class="pf-v5-c-menu__item-text"
349
- >User management</span>
350
- </span>
351
- </button>
352
- </li>
353
- <li class="pf-v5-c-menu__list-item" role="none">
354
- <button
355
- class="pf-v5-c-menu__item"
356
- type="button"
357
- role="menuitem"
358
- >
359
- <span class="pf-v5-c-menu__item-main">
360
- <span class="pf-v5-c-menu__item-text">Logout</span>
361
- </span>
362
- </button>
363
- </li>
364
- </ul>
365
- </section>
366
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
367
- <section class="pf-v5-c-menu__group">
368
- <ul class="pf-v5-c-menu__list" role="menu">
369
- <li class="pf-v5-c-menu__list-item" role="none">
370
- <button
371
- class="pf-v5-c-menu__item"
372
- type="button"
373
- role="menuitem"
374
- aria-expanded="false"
375
- >
376
- <span class="pf-v5-c-menu__item-main">
377
- <span class="pf-v5-c-menu__item-icon">
378
- <i
379
- class="fas fa-fw fa-cog"
380
- aria-hidden="true"
381
- ></i>
382
- </span>
383
- <span class="pf-v5-c-menu__item-text">Settings</span>
384
- <span class="pf-v5-c-menu__item-toggle-icon">
385
- <i class="fas fa-angle-right"></i>
386
- </span>
387
- </span>
388
- </button>
389
- <div class="pf-v5-c-menu" hidden>
390
- <div class="pf-v5-c-menu__content">
391
- <ul class="pf-v5-c-menu__list" role="menu">
392
- <li
393
- class="pf-v5-c-menu__list-item pf-m-drill-up"
394
- role="none"
395
- >
396
- <button
397
- class="pf-v5-c-menu__item"
398
- type="button"
399
- role="menuitem"
400
- >
401
- <span class="pf-v5-c-menu__item-main">
402
- <span
403
- class="pf-v5-c-menu__item-toggle-icon"
404
- >
405
- <i class="fas fa-angle-left"></i>
406
- </span>
407
- <span class="pf-v5-c-menu__item-icon">
408
- <i
409
- class="fas fa-fw fa-cog"
410
- aria-hidden="true"
411
- ></i>
412
- </span>
413
- <span
414
- class="pf-v5-c-menu__item-text"
415
- >Settings</span>
416
- </span>
417
- </button>
418
- </li>
419
- <li class="pf-v5-c-divider" role="separator"></li>
420
- <li
421
- class="pf-v5-c-menu__list-item"
422
- role="none"
423
- >
424
- <a
425
- class="pf-v5-c-menu__item"
426
- href="#"
427
- role="menuitem"
428
- >
429
- <span class="pf-v5-c-menu__item-main">
430
- <span
431
- class="pf-v5-c-menu__item-text"
432
- >Customer support</span>
433
- </span>
434
- </a>
435
- </li>
436
- <li
437
- class="pf-v5-c-menu__list-item"
438
- role="none"
439
- >
440
- <a
441
- class="pf-v5-c-menu__item"
442
- href="#"
443
- role="menuitem"
444
- >
445
- <span class="pf-v5-c-menu__item-main">
446
- <span
447
- class="pf-v5-c-menu__item-text"
448
- >About</span>
449
- </span>
450
- </a>
451
- </li>
452
- </ul>
453
- </div>
454
- </div>
455
- </li>
456
-
457
- <li class="pf-v5-c-menu__list-item" role="none">
458
- <button
459
- class="pf-v5-c-menu__item"
460
- type="button"
461
- role="menuitem"
462
- aria-expanded="false"
463
- >
464
- <span class="pf-v5-c-menu__item-main">
465
- <span class="pf-v5-c-menu__item-icon">
466
- <i
467
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
468
- aria-hidden="true"
469
- ></i>
470
- </span>
471
- <span class="pf-v5-c-menu__item-text">Help</span>
472
- <span class="pf-v5-c-menu__item-toggle-icon">
473
- <i class="fas fa-angle-right"></i>
474
- </span>
475
- </span>
476
- </button>
477
- <div class="pf-v5-c-menu" hidden>
478
- <div class="pf-v5-c-menu__content">
479
- <ul class="pf-v5-c-menu__list" role="menu">
480
- <li
481
- class="pf-v5-c-menu__list-item pf-m-drill-up"
482
- role="none"
483
- >
484
- <button
485
- class="pf-v5-c-menu__item"
486
- type="button"
487
- role="menuitem"
488
- >
489
- <span class="pf-v5-c-menu__item-main">
490
- <span
491
- class="pf-v5-c-menu__item-toggle-icon"
492
- >
493
- <i class="fas fa-angle-left"></i>
494
- </span>
495
- <span class="pf-v5-c-menu__item-icon">
496
- <i
497
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
498
- aria-hidden="true"
499
- ></i>
500
- </span>
501
- <span
502
- class="pf-v5-c-menu__item-text"
503
- >Help</span>
504
- </span>
505
- </button>
506
- </li>
507
- <li class="pf-v5-c-divider" role="separator"></li>
508
- <li
509
- class="pf-v5-c-menu__list-item"
510
- role="none"
511
- >
512
- <a
513
- class="pf-v5-c-menu__item"
514
- href="#"
515
- role="menuitem"
516
- >
517
- <span class="pf-v5-c-menu__item-main">
518
- <span
519
- class="pf-v5-c-menu__item-text"
520
- >Support options</span>
521
- </span>
522
- </a>
523
- </li>
524
- <li
525
- class="pf-v5-c-menu__list-item"
526
- role="none"
527
- >
528
- <a
529
- class="pf-v5-c-menu__item"
530
- href="#"
531
- role="menuitem"
532
- >
533
- <span class="pf-v5-c-menu__item-main">
534
- <span
535
- class="pf-v5-c-menu__item-text"
536
- >Open support case</span>
537
- </span>
538
- </a>
539
- </li>
540
- <li
541
- class="pf-v5-c-menu__list-item"
542
- role="none"
543
- >
544
- <a
545
- class="pf-v5-c-menu__item"
546
- href="#"
547
- role="menuitem"
548
- >
549
- <span class="pf-v5-c-menu__item-main">
550
- <span
551
- class="pf-v5-c-menu__item-text"
552
- >API documentation</span>
553
- </span>
554
- </a>
555
- </li>
556
- </ul>
557
- </div>
558
- </div>
559
- </li>
560
-
561
- <li class="pf-v5-c-menu__list-item" role="none">
562
- <button
563
- class="pf-v5-c-menu__item"
564
- type="button"
565
- role="menuitem"
566
- >
567
- <span class="pf-v5-c-menu__item-main">
568
- <span class="pf-v5-c-menu__item-icon">
569
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
570
- </span>
571
- <span
572
- class="pf-v5-c-menu__item-text"
573
- >Application launcher</span>
574
- <span class="pf-v5-c-menu__item-toggle-icon">
575
- <i class="fas fa-angle-right"></i>
576
- </span>
577
- </span>
578
- </button>
579
- <div class="pf-v5-c-menu" hidden>
580
- <div class="pf-v5-c-menu__header">
581
- <button
582
- class="pf-v5-c-menu__item"
583
- type="button"
584
- role="menuitem"
585
- >
586
- <span class="pf-v5-c-menu__item-main">
587
- <span
588
- class="pf-v5-c-menu__item-toggle-icon"
589
- >
590
- <i class="fas fa-angle-left"></i>
591
- </span>
592
- <span class="pf-v5-c-menu__item-icon">
593
- <i
594
- class="fas fa-fw fa-th"
595
- aria-hidden="true"
596
- ></i>
597
- </span>
598
- <span
599
- class="pf-v5-c-menu__item-text"
600
- >Application launcher</span>
601
- </span>
602
- </button>
603
- </div>
604
- <div class="pf-v5-c-menu__search">
605
- <div class="pf-v5-c-menu__search-input">
606
- <div class="pf-v5-c-text-input-group">
607
- <div
608
- class="pf-v5-c-text-input-group__main pf-m-icon"
609
- >
610
- <span
611
- class="pf-v5-c-text-input-group__text"
612
- >
613
- <span
614
- class="pf-v5-c-text-input-group__icon"
615
- >
616
- <i class="fas fa-fw fa-search"></i>
617
- </span>
618
- <input
619
- class="pf-v5-c-text-input-group__text-input"
620
- type="text"
621
- placeholder="Search"
622
- value
623
- aria-label="Search input"
624
- />
625
- </span>
626
- </div>
627
- </div>
628
- </div>
629
- </div>
630
- <hr class="pf-v5-c-divider" />
631
- <section class="pf-v5-c-menu__group">
632
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
633
- <ul class="pf-v5-c-menu__list" role="menu">
634
- <li
635
- class="pf-v5-c-menu__list-item"
636
- role="none"
637
- >
638
- <a
639
- class="pf-v5-c-menu__item"
640
- href="#"
641
- role="menuitem"
642
- >
643
- <span class="pf-v5-c-menu__item-main">
644
- <span
645
- class="pf-v5-c-menu__item-text"
646
- >Link 1</span>
647
- </span>
648
- </a>
649
- <button
650
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
651
- type="button"
652
- aria-label="Starred"
653
- >
654
- <span
655
- class="pf-v5-c-menu__item-action-icon"
656
- >
657
- <i
658
- class="fas fa-star"
659
- aria-hidden="true"
660
- ></i>
661
- </span>
662
- </button>
663
- </li>
664
- <li
665
- class="pf-v5-c-menu__list-item"
666
- role="none"
667
- >
668
- <a
669
- class="pf-v5-c-menu__item"
670
- href="#"
671
- role="menuitem"
672
- target="_blank"
673
- >
674
- <span class="pf-v5-c-menu__item-main">
675
- <span
676
- class="pf-v5-c-menu__item-text"
677
- >Link 2</span>
678
- <span
679
- class="pf-v5-c-menu__item-external-icon"
680
- >
681
- <i
682
- class="fas fa-external-link-alt"
683
- aria-hidden="true"
684
- ></i>
685
- </span>
686
- <span
687
- class="pf-v5-screen-reader"
688
- >(opens new window)</span>
689
- </span>
690
- </a>
691
- <button
692
- class="pf-v5-c-menu__item-action pf-m-favorite"
693
- type="button"
694
- aria-label="Not starred"
695
- >
696
- <span
697
- class="pf-v5-c-menu__item-action-icon"
698
- >
699
- <i
700
- class="fas fa-star"
701
- aria-hidden="true"
702
- ></i>
703
- </span>
704
- </button>
705
- </li>
706
- </ul>
707
- </section>
708
- <hr class="pf-v5-c-divider" />
709
- <section class="pf-v5-c-menu__group">
710
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
711
- <ul class="pf-v5-c-menu__list" role="menu">
712
- <li
713
- class="pf-v5-c-menu__list-item"
714
- role="none"
715
- >
716
- <a
717
- class="pf-v5-c-menu__item"
718
- href="#"
719
- role="menuitem"
720
- >
721
- <span class="pf-v5-c-menu__item-main">
722
- <span
723
- class="pf-v5-c-menu__item-text"
724
- >Link 1</span>
725
- </span>
726
- </a>
727
- <button
728
- class="pf-v5-c-menu__item-action pf-m-favorite"
729
- type="button"
730
- aria-label="Not starred"
731
- >
732
- <span
733
- class="pf-v5-c-menu__item-action-icon"
734
- >
735
- <i
736
- class="fas fa-star"
737
- aria-hidden="true"
738
- ></i>
739
- </span>
740
- </button>
741
- </li>
742
- <li
743
- class="pf-v5-c-menu__list-item"
744
- role="none"
745
- >
746
- <a
747
- class="pf-v5-c-menu__item"
748
- href="#"
749
- role="menuitem"
750
- target="_blank"
751
- >
752
- <span class="pf-v5-c-menu__item-main">
753
- <span
754
- class="pf-v5-c-menu__item-text"
755
- >Link 2</span>
756
- <span
757
- class="pf-v5-c-menu__item-external-icon"
758
- >
759
- <i
760
- class="fas fa-external-link-alt"
761
- aria-hidden="true"
762
- ></i>
763
- </span>
764
- <span
765
- class="pf-v5-screen-reader"
766
- >(opens new window)</span>
767
- </span>
768
- </a>
769
- <button
770
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
771
- type="button"
772
- aria-label="Starred"
773
- >
774
- <span
775
- class="pf-v5-c-menu__item-action-icon"
776
- >
777
- <i
778
- class="fas fa-star"
779
- aria-hidden="true"
780
- ></i>
781
- </span>
782
- </button>
783
- </li>
784
- </ul>
785
- </section>
786
- </div>
787
- </li>
788
- </ul>
789
- </section>
790
- </div>
791
- </div>
792
86
  </div>
793
87
  </div>
794
- </div>
795
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
796
- <div
797
- class="pf-v5-c-dropdown pf-m-full-height"
798
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
799
- >
88
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
800
89
  <button
801
- class="pf-v5-c-dropdown__toggle"
802
- id="alert-basic-example-masthead-profile-button"
803
- aria-expanded="false"
90
+ class="pf-v5-c-menu-toggle pf-m-plain"
804
91
  type="button"
92
+ aria-expanded="false"
93
+ aria-label="Actions"
805
94
  >
806
- <span class="pf-v5-c-dropdown__toggle-image">
807
- <img
808
- class="pf-v5-c-avatar"
809
- alt="Avatar image"
810
- src="/assets/images/img_avatar-light.svg"
811
- />
812
- </span>
813
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
814
- <span class="pf-v5-c-dropdown__toggle-icon">
815
- <i class="fas fa-caret-down" aria-hidden="true"></i>
816
- </span>
95
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
817
96
  </button>
818
- <div class="pf-v5-c-dropdown__menu" hidden>
819
- <section class="pf-v5-c-dropdown__group">
820
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
821
- <div class="pf-v5-u-font-size-sm">Account number:</div>
822
- <div>123456789</div>
823
- </div>
824
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
825
- <div class="pf-v5-u-font-size-sm">Username:</div>
826
- <div>mshaksho@redhat.com</div>
827
- </div>
828
- </section>
829
- <hr class="pf-v5-c-divider" />
830
- <section class="pf-v5-c-dropdown__group">
831
- <ul>
832
- <li>
833
- <a
834
- class="pf-v5-c-dropdown__menu-item"
835
- href="#"
836
- >My profile</a>
837
- </li>
838
- <li>
839
- <a
840
- class="pf-v5-c-dropdown__menu-item"
841
- href="#"
842
- >User management</a>
843
- </li>
844
- <li>
845
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
846
- </li>
847
- </ul>
848
- </section>
849
- </div>
850
97
  </div>
851
98
  </div>
99
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
100
+ <button
101
+ class="pf-v5-c-menu-toggle pf-m-full-height"
102
+ type="button"
103
+ aria-expanded="false"
104
+ >
105
+ <span class="pf-v5-c-menu-toggle__icon">
106
+ <img
107
+ class="pf-v5-c-avatar"
108
+ alt="Avatar image"
109
+ src="/assets/images/img_avatar-light.svg"
110
+ />
111
+ </span>
112
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
113
+ <span class="pf-v5-c-menu-toggle__controls">
114
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
115
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
116
+ </span>
117
+ </span>
118
+ </button>
119
+ </div>
852
120
  </div>
853
121
  </div>
854
122
  </div>
@@ -1098,800 +366,68 @@ section: components
1098
366
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1099
367
  >
1100
368
  <div class="pf-v5-c-toolbar__item">
1101
- <nav
1102
- class="pf-v5-c-app-launcher"
369
+ <button
370
+ class="pf-v5-c-menu-toggle pf-m-plain"
371
+ type="button"
372
+ aria-expanded="false"
1103
373
  aria-label="Application launcher"
1104
- id="alert-horizontal-example-masthead-application-launcher"
1105
374
  >
1106
- <button
1107
- class="pf-v5-c-app-launcher__toggle"
1108
- type="button"
1109
- id="alert-horizontal-example-masthead-application-launcher-button"
1110
- aria-expanded="false"
1111
- aria-label="Application launcher"
1112
- >
1113
- <i class="fas fa-th" aria-hidden="true"></i>
1114
- </button>
1115
- <div
1116
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
1117
- hidden
1118
- >
1119
- <div class="pf-v5-c-app-launcher__menu-search">
1120
- <div class="pf-v5-c-text-input-group">
1121
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1122
- <span class="pf-v5-c-text-input-group__text">
1123
- <span class="pf-v5-c-text-input-group__icon">
1124
- <i class="fas fa-fw fa-search"></i>
1125
- </span>
1126
- <input
1127
- class="pf-v5-c-text-input-group__text-input"
1128
- type="text"
1129
- placeholder="Filer by name"
1130
- value
1131
- aria-label="Search input"
1132
- />
1133
- </span>
1134
- </div>
1135
- </div>
1136
- </div>
1137
- <section class="pf-v5-c-app-launcher__group">
1138
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
1139
- <ul role="list">
1140
- <li
1141
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1142
- >
1143
- <a class="pf-v5-c-app-launcher__menu-item">
1144
- Link 1
1145
- <span
1146
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1147
- >
1148
- <i
1149
- class="fas fa-external-link-alt"
1150
- aria-hidden="true"
1151
- ></i>
1152
- </span>
1153
- <span
1154
- class="pf-v5-screen-reader"
1155
- >(opens new window)</span>
1156
- </a>
1157
- <button
1158
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1159
- type="button"
1160
- aria-label="Favorite"
1161
- >
1162
- <i class="fas fa-star" aria-hidden="true"></i>
1163
- </button>
1164
- </li>
1165
- <li
1166
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1167
- >
1168
- <a class="pf-v5-c-app-launcher__menu-item">
1169
- Link 2
1170
- <span
1171
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1172
- >
1173
- <i
1174
- class="fas fa-external-link-alt"
1175
- aria-hidden="true"
1176
- ></i>
1177
- </span>
1178
- <span
1179
- class="pf-v5-screen-reader"
1180
- >(opens new window)</span>
1181
- </a>
1182
- <button
1183
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1184
- type="button"
1185
- aria-label="Favorite"
1186
- >
1187
- <i class="fas fa-star" aria-hidden="true"></i>
1188
- </button>
1189
- </li>
1190
- </ul>
1191
- </section>
1192
- <hr class="pf-v5-c-divider" />
1193
- <section class="pf-v5-c-app-launcher__group">
1194
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
1195
- <ul role="list">
1196
- <li
1197
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1198
- >
1199
- <a class="pf-v5-c-app-launcher__menu-item">
1200
- Link 1
1201
- <span
1202
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1203
- >
1204
- <i
1205
- class="fas fa-external-link-alt"
1206
- aria-hidden="true"
1207
- ></i>
1208
- </span>
1209
- <span
1210
- class="pf-v5-screen-reader"
1211
- >(opens new window)</span>
1212
- </a>
1213
- <button
1214
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1215
- type="button"
1216
- aria-label="Favorite"
1217
- >
1218
- <i class="fas fa-star" aria-hidden="true"></i>
1219
- </button>
1220
- </li>
1221
- <li
1222
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1223
- >
1224
- <a class="pf-v5-c-app-launcher__menu-item">
1225
- Link 2
1226
- <span
1227
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1228
- >
1229
- <i
1230
- class="fas fa-external-link-alt"
1231
- aria-hidden="true"
1232
- ></i>
1233
- </span>
1234
- <span
1235
- class="pf-v5-screen-reader"
1236
- >(opens new window)</span>
1237
- </a>
1238
- <button
1239
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1240
- type="button"
1241
- aria-label="Favorite"
1242
- >
1243
- <i class="fas fa-star" aria-hidden="true"></i>
1244
- </button>
1245
- </li>
1246
- </ul>
1247
- </section>
1248
- </div>
1249
- </nav>
375
+ <i class="fas fa-th" aria-hidden="true"></i>
376
+ </button>
1250
377
  </div>
1251
378
  <div class="pf-v5-c-toolbar__item">
1252
- <div class="pf-v5-c-dropdown">
1253
- <button
1254
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1255
- id="alert-horizontal-example-masthead-settings-button"
1256
- aria-expanded="false"
1257
- type="button"
1258
- aria-label="Settings"
1259
- >
1260
- <i class="fas fa-cog" aria-hidden="true"></i>
1261
- </button>
1262
- <ul
1263
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1264
- aria-labelledby="alert-horizontal-example-masthead-settings-button"
1265
- hidden
1266
- >
1267
- <li>
1268
- <button
1269
- class="pf-v5-c-dropdown__menu-item"
1270
- type="button"
1271
- >Settings</button>
1272
- </li>
1273
- <li>
1274
- <button
1275
- class="pf-v5-c-dropdown__menu-item"
1276
- type="button"
1277
- >Use the beta release</button>
1278
- </li>
1279
- </ul>
1280
- </div>
379
+ <button
380
+ class="pf-v5-c-menu-toggle pf-m-plain"
381
+ type="button"
382
+ aria-expanded="false"
383
+ aria-label="Settings"
384
+ >
385
+ <i class="fas fa-cog" aria-hidden="true"></i>
386
+ </button>
1281
387
  </div>
1282
388
  <div class="pf-v5-c-toolbar__item">
1283
- <div class="pf-v5-c-dropdown">
1284
- <button
1285
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1286
- id="alert-horizontal-example-masthead-help-button"
1287
- aria-expanded="false"
1288
- type="button"
1289
- aria-label="Help"
1290
- >
1291
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1292
- </button>
1293
- <ul
1294
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1295
- aria-labelledby="alert-horizontal-example-masthead-help-button"
1296
- hidden
1297
- >
1298
- <li>
1299
- <button
1300
- class="pf-v5-c-dropdown__menu-item"
1301
- type="button"
1302
- >Support options</button>
1303
- </li>
1304
- <li>
1305
- <button
1306
- class="pf-v5-c-dropdown__menu-item"
1307
- type="button"
1308
- >Open support case</button>
1309
- </li>
1310
- <li>
1311
- <button
1312
- class="pf-v5-c-dropdown__menu-item"
1313
- type="button"
1314
- >API documentation</button>
1315
- </li>
1316
- </ul>
1317
- </div>
1318
- </div>
1319
- </div>
1320
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1321
- <div class="pf-v5-c-dropdown">
1322
389
  <button
1323
390
  class="pf-v5-c-menu-toggle pf-m-plain"
1324
391
  type="button"
1325
392
  aria-expanded="false"
1326
- aria-label="Actions"
393
+ aria-label="Help"
1327
394
  >
1328
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
395
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1329
396
  </button>
1330
- <div
1331
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
1332
- hidden
1333
- >
1334
- <div class="pf-v5-c-menu__content">
1335
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
1336
- <ul class="pf-v5-c-menu__list" role="menu">
1337
- <li
1338
- class="pf-v5-c-menu__list-item pf-m-disabled"
1339
- role="none"
1340
- >
1341
- <button
1342
- class="pf-v5-c-menu__item"
1343
- type="button"
1344
- disabled
1345
- role="menuitem"
1346
- >
1347
- <span class="pf-v5-c-menu__item-description">
1348
- <div class="pf-v5-u-font-size-sm">Username:</div>
1349
- <div class="pf-v5-u-font-size-md">ned_username</div>
1350
- </span>
1351
- </button>
1352
- </li>
1353
- <li
1354
- class="pf-v5-c-menu__list-item pf-m-disabled"
1355
- role="none"
1356
- >
1357
- <button
1358
- class="pf-v5-c-menu__item"
1359
- type="button"
1360
- disabled
1361
- role="menuitem"
1362
- >
1363
- <span class="pf-v5-c-menu__item-description">
1364
- <div
1365
- class="pf-v5-u-font-size-sm"
1366
- >Account number:</div>
1367
- <div class="pf-v5-u-font-size-md">123456789</div>
1368
- </span>
1369
- </button>
1370
- </li>
1371
- <li class="pf-v5-c-divider" role="separator"></li>
1372
- <li class="pf-v5-c-menu__list-item" role="none">
1373
- <button
1374
- class="pf-v5-c-menu__item"
1375
- type="button"
1376
- role="menuitem"
1377
- >
1378
- <span class="pf-v5-c-menu__item-main">
1379
- <span class="pf-v5-c-menu__item-text">My profile</span>
1380
- </span>
1381
- </button>
1382
- </li>
1383
- <li class="pf-v5-c-menu__list-item" role="none">
1384
- <button
1385
- class="pf-v5-c-menu__item"
1386
- type="button"
1387
- role="menuitem"
1388
- >
1389
- <span class="pf-v5-c-menu__item-main">
1390
- <span
1391
- class="pf-v5-c-menu__item-text"
1392
- >User management</span>
1393
- </span>
1394
- </button>
1395
- </li>
1396
- <li class="pf-v5-c-menu__list-item" role="none">
1397
- <button
1398
- class="pf-v5-c-menu__item"
1399
- type="button"
1400
- role="menuitem"
1401
- >
1402
- <span class="pf-v5-c-menu__item-main">
1403
- <span class="pf-v5-c-menu__item-text">Logout</span>
1404
- </span>
1405
- </button>
1406
- </li>
1407
- </ul>
1408
- </section>
1409
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
1410
- <section class="pf-v5-c-menu__group">
1411
- <ul class="pf-v5-c-menu__list" role="menu">
1412
- <li class="pf-v5-c-menu__list-item" role="none">
1413
- <button
1414
- class="pf-v5-c-menu__item"
1415
- type="button"
1416
- role="menuitem"
1417
- aria-expanded="false"
1418
- >
1419
- <span class="pf-v5-c-menu__item-main">
1420
- <span class="pf-v5-c-menu__item-icon">
1421
- <i
1422
- class="fas fa-fw fa-cog"
1423
- aria-hidden="true"
1424
- ></i>
1425
- </span>
1426
- <span class="pf-v5-c-menu__item-text">Settings</span>
1427
- <span class="pf-v5-c-menu__item-toggle-icon">
1428
- <i class="fas fa-angle-right"></i>
1429
- </span>
1430
- </span>
1431
- </button>
1432
- <div class="pf-v5-c-menu" hidden>
1433
- <div class="pf-v5-c-menu__content">
1434
- <ul class="pf-v5-c-menu__list" role="menu">
1435
- <li
1436
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1437
- role="none"
1438
- >
1439
- <button
1440
- class="pf-v5-c-menu__item"
1441
- type="button"
1442
- role="menuitem"
1443
- >
1444
- <span class="pf-v5-c-menu__item-main">
1445
- <span
1446
- class="pf-v5-c-menu__item-toggle-icon"
1447
- >
1448
- <i class="fas fa-angle-left"></i>
1449
- </span>
1450
- <span class="pf-v5-c-menu__item-icon">
1451
- <i
1452
- class="fas fa-fw fa-cog"
1453
- aria-hidden="true"
1454
- ></i>
1455
- </span>
1456
- <span
1457
- class="pf-v5-c-menu__item-text"
1458
- >Settings</span>
1459
- </span>
1460
- </button>
1461
- </li>
1462
- <li class="pf-v5-c-divider" role="separator"></li>
1463
- <li
1464
- class="pf-v5-c-menu__list-item"
1465
- role="none"
1466
- >
1467
- <a
1468
- class="pf-v5-c-menu__item"
1469
- href="#"
1470
- role="menuitem"
1471
- >
1472
- <span class="pf-v5-c-menu__item-main">
1473
- <span
1474
- class="pf-v5-c-menu__item-text"
1475
- >Customer support</span>
1476
- </span>
1477
- </a>
1478
- </li>
1479
- <li
1480
- class="pf-v5-c-menu__list-item"
1481
- role="none"
1482
- >
1483
- <a
1484
- class="pf-v5-c-menu__item"
1485
- href="#"
1486
- role="menuitem"
1487
- >
1488
- <span class="pf-v5-c-menu__item-main">
1489
- <span
1490
- class="pf-v5-c-menu__item-text"
1491
- >About</span>
1492
- </span>
1493
- </a>
1494
- </li>
1495
- </ul>
1496
- </div>
1497
- </div>
1498
- </li>
1499
-
1500
- <li class="pf-v5-c-menu__list-item" role="none">
1501
- <button
1502
- class="pf-v5-c-menu__item"
1503
- type="button"
1504
- role="menuitem"
1505
- aria-expanded="false"
1506
- >
1507
- <span class="pf-v5-c-menu__item-main">
1508
- <span class="pf-v5-c-menu__item-icon">
1509
- <i
1510
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1511
- aria-hidden="true"
1512
- ></i>
1513
- </span>
1514
- <span class="pf-v5-c-menu__item-text">Help</span>
1515
- <span class="pf-v5-c-menu__item-toggle-icon">
1516
- <i class="fas fa-angle-right"></i>
1517
- </span>
1518
- </span>
1519
- </button>
1520
- <div class="pf-v5-c-menu" hidden>
1521
- <div class="pf-v5-c-menu__content">
1522
- <ul class="pf-v5-c-menu__list" role="menu">
1523
- <li
1524
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1525
- role="none"
1526
- >
1527
- <button
1528
- class="pf-v5-c-menu__item"
1529
- type="button"
1530
- role="menuitem"
1531
- >
1532
- <span class="pf-v5-c-menu__item-main">
1533
- <span
1534
- class="pf-v5-c-menu__item-toggle-icon"
1535
- >
1536
- <i class="fas fa-angle-left"></i>
1537
- </span>
1538
- <span class="pf-v5-c-menu__item-icon">
1539
- <i
1540
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1541
- aria-hidden="true"
1542
- ></i>
1543
- </span>
1544
- <span
1545
- class="pf-v5-c-menu__item-text"
1546
- >Help</span>
1547
- </span>
1548
- </button>
1549
- </li>
1550
- <li class="pf-v5-c-divider" role="separator"></li>
1551
- <li
1552
- class="pf-v5-c-menu__list-item"
1553
- role="none"
1554
- >
1555
- <a
1556
- class="pf-v5-c-menu__item"
1557
- href="#"
1558
- role="menuitem"
1559
- >
1560
- <span class="pf-v5-c-menu__item-main">
1561
- <span
1562
- class="pf-v5-c-menu__item-text"
1563
- >Support options</span>
1564
- </span>
1565
- </a>
1566
- </li>
1567
- <li
1568
- class="pf-v5-c-menu__list-item"
1569
- role="none"
1570
- >
1571
- <a
1572
- class="pf-v5-c-menu__item"
1573
- href="#"
1574
- role="menuitem"
1575
- >
1576
- <span class="pf-v5-c-menu__item-main">
1577
- <span
1578
- class="pf-v5-c-menu__item-text"
1579
- >Open support case</span>
1580
- </span>
1581
- </a>
1582
- </li>
1583
- <li
1584
- class="pf-v5-c-menu__list-item"
1585
- role="none"
1586
- >
1587
- <a
1588
- class="pf-v5-c-menu__item"
1589
- href="#"
1590
- role="menuitem"
1591
- >
1592
- <span class="pf-v5-c-menu__item-main">
1593
- <span
1594
- class="pf-v5-c-menu__item-text"
1595
- >API documentation</span>
1596
- </span>
1597
- </a>
1598
- </li>
1599
- </ul>
1600
- </div>
1601
- </div>
1602
- </li>
1603
-
1604
- <li class="pf-v5-c-menu__list-item" role="none">
1605
- <button
1606
- class="pf-v5-c-menu__item"
1607
- type="button"
1608
- role="menuitem"
1609
- >
1610
- <span class="pf-v5-c-menu__item-main">
1611
- <span class="pf-v5-c-menu__item-icon">
1612
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
1613
- </span>
1614
- <span
1615
- class="pf-v5-c-menu__item-text"
1616
- >Application launcher</span>
1617
- <span class="pf-v5-c-menu__item-toggle-icon">
1618
- <i class="fas fa-angle-right"></i>
1619
- </span>
1620
- </span>
1621
- </button>
1622
- <div class="pf-v5-c-menu" hidden>
1623
- <div class="pf-v5-c-menu__header">
1624
- <button
1625
- class="pf-v5-c-menu__item"
1626
- type="button"
1627
- role="menuitem"
1628
- >
1629
- <span class="pf-v5-c-menu__item-main">
1630
- <span
1631
- class="pf-v5-c-menu__item-toggle-icon"
1632
- >
1633
- <i class="fas fa-angle-left"></i>
1634
- </span>
1635
- <span class="pf-v5-c-menu__item-icon">
1636
- <i
1637
- class="fas fa-fw fa-th"
1638
- aria-hidden="true"
1639
- ></i>
1640
- </span>
1641
- <span
1642
- class="pf-v5-c-menu__item-text"
1643
- >Application launcher</span>
1644
- </span>
1645
- </button>
1646
- </div>
1647
- <div class="pf-v5-c-menu__search">
1648
- <div class="pf-v5-c-menu__search-input">
1649
- <div class="pf-v5-c-text-input-group">
1650
- <div
1651
- class="pf-v5-c-text-input-group__main pf-m-icon"
1652
- >
1653
- <span
1654
- class="pf-v5-c-text-input-group__text"
1655
- >
1656
- <span
1657
- class="pf-v5-c-text-input-group__icon"
1658
- >
1659
- <i class="fas fa-fw fa-search"></i>
1660
- </span>
1661
- <input
1662
- class="pf-v5-c-text-input-group__text-input"
1663
- type="text"
1664
- placeholder="Search"
1665
- value
1666
- aria-label="Search input"
1667
- />
1668
- </span>
1669
- </div>
1670
- </div>
1671
- </div>
1672
- </div>
1673
- <hr class="pf-v5-c-divider" />
1674
- <section class="pf-v5-c-menu__group">
1675
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
1676
- <ul class="pf-v5-c-menu__list" role="menu">
1677
- <li
1678
- class="pf-v5-c-menu__list-item"
1679
- role="none"
1680
- >
1681
- <a
1682
- class="pf-v5-c-menu__item"
1683
- href="#"
1684
- role="menuitem"
1685
- >
1686
- <span class="pf-v5-c-menu__item-main">
1687
- <span
1688
- class="pf-v5-c-menu__item-text"
1689
- >Link 1</span>
1690
- </span>
1691
- </a>
1692
- <button
1693
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1694
- type="button"
1695
- aria-label="Starred"
1696
- >
1697
- <span
1698
- class="pf-v5-c-menu__item-action-icon"
1699
- >
1700
- <i
1701
- class="fas fa-star"
1702
- aria-hidden="true"
1703
- ></i>
1704
- </span>
1705
- </button>
1706
- </li>
1707
- <li
1708
- class="pf-v5-c-menu__list-item"
1709
- role="none"
1710
- >
1711
- <a
1712
- class="pf-v5-c-menu__item"
1713
- href="#"
1714
- role="menuitem"
1715
- target="_blank"
1716
- >
1717
- <span class="pf-v5-c-menu__item-main">
1718
- <span
1719
- class="pf-v5-c-menu__item-text"
1720
- >Link 2</span>
1721
- <span
1722
- class="pf-v5-c-menu__item-external-icon"
1723
- >
1724
- <i
1725
- class="fas fa-external-link-alt"
1726
- aria-hidden="true"
1727
- ></i>
1728
- </span>
1729
- <span
1730
- class="pf-v5-screen-reader"
1731
- >(opens new window)</span>
1732
- </span>
1733
- </a>
1734
- <button
1735
- class="pf-v5-c-menu__item-action pf-m-favorite"
1736
- type="button"
1737
- aria-label="Not starred"
1738
- >
1739
- <span
1740
- class="pf-v5-c-menu__item-action-icon"
1741
- >
1742
- <i
1743
- class="fas fa-star"
1744
- aria-hidden="true"
1745
- ></i>
1746
- </span>
1747
- </button>
1748
- </li>
1749
- </ul>
1750
- </section>
1751
- <hr class="pf-v5-c-divider" />
1752
- <section class="pf-v5-c-menu__group">
1753
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
1754
- <ul class="pf-v5-c-menu__list" role="menu">
1755
- <li
1756
- class="pf-v5-c-menu__list-item"
1757
- role="none"
1758
- >
1759
- <a
1760
- class="pf-v5-c-menu__item"
1761
- href="#"
1762
- role="menuitem"
1763
- >
1764
- <span class="pf-v5-c-menu__item-main">
1765
- <span
1766
- class="pf-v5-c-menu__item-text"
1767
- >Link 1</span>
1768
- </span>
1769
- </a>
1770
- <button
1771
- class="pf-v5-c-menu__item-action pf-m-favorite"
1772
- type="button"
1773
- aria-label="Not starred"
1774
- >
1775
- <span
1776
- class="pf-v5-c-menu__item-action-icon"
1777
- >
1778
- <i
1779
- class="fas fa-star"
1780
- aria-hidden="true"
1781
- ></i>
1782
- </span>
1783
- </button>
1784
- </li>
1785
- <li
1786
- class="pf-v5-c-menu__list-item"
1787
- role="none"
1788
- >
1789
- <a
1790
- class="pf-v5-c-menu__item"
1791
- href="#"
1792
- role="menuitem"
1793
- target="_blank"
1794
- >
1795
- <span class="pf-v5-c-menu__item-main">
1796
- <span
1797
- class="pf-v5-c-menu__item-text"
1798
- >Link 2</span>
1799
- <span
1800
- class="pf-v5-c-menu__item-external-icon"
1801
- >
1802
- <i
1803
- class="fas fa-external-link-alt"
1804
- aria-hidden="true"
1805
- ></i>
1806
- </span>
1807
- <span
1808
- class="pf-v5-screen-reader"
1809
- >(opens new window)</span>
1810
- </span>
1811
- </a>
1812
- <button
1813
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1814
- type="button"
1815
- aria-label="Starred"
1816
- >
1817
- <span
1818
- class="pf-v5-c-menu__item-action-icon"
1819
- >
1820
- <i
1821
- class="fas fa-star"
1822
- aria-hidden="true"
1823
- ></i>
1824
- </span>
1825
- </button>
1826
- </li>
1827
- </ul>
1828
- </section>
1829
- </div>
1830
- </li>
1831
- </ul>
1832
- </section>
1833
- </div>
1834
- </div>
1835
397
  </div>
1836
398
  </div>
1837
- </div>
1838
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1839
- <div
1840
- class="pf-v5-c-dropdown pf-m-full-height"
1841
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
1842
- >
399
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1843
400
  <button
1844
- class="pf-v5-c-dropdown__toggle"
1845
- id="alert-horizontal-example-masthead-profile-button"
1846
- aria-expanded="false"
401
+ class="pf-v5-c-menu-toggle pf-m-plain"
1847
402
  type="button"
403
+ aria-expanded="false"
404
+ aria-label="Actions"
1848
405
  >
1849
- <span class="pf-v5-c-dropdown__toggle-image">
1850
- <img
1851
- class="pf-v5-c-avatar"
1852
- alt="Avatar image"
1853
- src="/assets/images/img_avatar-light.svg"
1854
- />
1855
- </span>
1856
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
1857
- <span class="pf-v5-c-dropdown__toggle-icon">
1858
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1859
- </span>
406
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1860
407
  </button>
1861
- <div class="pf-v5-c-dropdown__menu" hidden>
1862
- <section class="pf-v5-c-dropdown__group">
1863
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1864
- <div class="pf-v5-u-font-size-sm">Account number:</div>
1865
- <div>123456789</div>
1866
- </div>
1867
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1868
- <div class="pf-v5-u-font-size-sm">Username:</div>
1869
- <div>mshaksho@redhat.com</div>
1870
- </div>
1871
- </section>
1872
- <hr class="pf-v5-c-divider" />
1873
- <section class="pf-v5-c-dropdown__group">
1874
- <ul>
1875
- <li>
1876
- <a
1877
- class="pf-v5-c-dropdown__menu-item"
1878
- href="#"
1879
- >My profile</a>
1880
- </li>
1881
- <li>
1882
- <a
1883
- class="pf-v5-c-dropdown__menu-item"
1884
- href="#"
1885
- >User management</a>
1886
- </li>
1887
- <li>
1888
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
1889
- </li>
1890
- </ul>
1891
- </section>
1892
- </div>
1893
408
  </div>
1894
409
  </div>
410
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
411
+ <button
412
+ class="pf-v5-c-menu-toggle pf-m-full-height"
413
+ type="button"
414
+ aria-expanded="false"
415
+ >
416
+ <span class="pf-v5-c-menu-toggle__icon">
417
+ <img
418
+ class="pf-v5-c-avatar"
419
+ alt="Avatar image"
420
+ src="/assets/images/img_avatar-light.svg"
421
+ />
422
+ </span>
423
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
424
+ <span class="pf-v5-c-menu-toggle__controls">
425
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
426
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
427
+ </span>
428
+ </span>
429
+ </button>
430
+ </div>
1895
431
  </div>
1896
432
  </div>
1897
433
  </div>
@@ -2222,800 +758,68 @@ section: components
2222
758
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2223
759
  >
2224
760
  <div class="pf-v5-c-toolbar__item">
2225
- <nav
2226
- class="pf-v5-c-app-launcher"
761
+ <button
762
+ class="pf-v5-c-menu-toggle pf-m-plain"
763
+ type="button"
764
+ aria-expanded="false"
2227
765
  aria-label="Application launcher"
2228
- id="alert-stacked-example-masthead-application-launcher"
2229
766
  >
2230
- <button
2231
- class="pf-v5-c-app-launcher__toggle"
2232
- type="button"
2233
- id="alert-stacked-example-masthead-application-launcher-button"
2234
- aria-expanded="false"
2235
- aria-label="Application launcher"
2236
- >
2237
- <i class="fas fa-th" aria-hidden="true"></i>
2238
- </button>
2239
- <div
2240
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
2241
- hidden
2242
- >
2243
- <div class="pf-v5-c-app-launcher__menu-search">
2244
- <div class="pf-v5-c-text-input-group">
2245
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2246
- <span class="pf-v5-c-text-input-group__text">
2247
- <span class="pf-v5-c-text-input-group__icon">
2248
- <i class="fas fa-fw fa-search"></i>
2249
- </span>
2250
- <input
2251
- class="pf-v5-c-text-input-group__text-input"
2252
- type="text"
2253
- placeholder="Filer by name"
2254
- value
2255
- aria-label="Search input"
2256
- />
2257
- </span>
2258
- </div>
2259
- </div>
2260
- </div>
2261
- <section class="pf-v5-c-app-launcher__group">
2262
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
2263
- <ul role="list">
2264
- <li
2265
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2266
- >
2267
- <a class="pf-v5-c-app-launcher__menu-item">
2268
- Link 1
2269
- <span
2270
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2271
- >
2272
- <i
2273
- class="fas fa-external-link-alt"
2274
- aria-hidden="true"
2275
- ></i>
2276
- </span>
2277
- <span
2278
- class="pf-v5-screen-reader"
2279
- >(opens new window)</span>
2280
- </a>
2281
- <button
2282
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2283
- type="button"
2284
- aria-label="Favorite"
2285
- >
2286
- <i class="fas fa-star" aria-hidden="true"></i>
2287
- </button>
2288
- </li>
2289
- <li
2290
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2291
- >
2292
- <a class="pf-v5-c-app-launcher__menu-item">
2293
- Link 2
2294
- <span
2295
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2296
- >
2297
- <i
2298
- class="fas fa-external-link-alt"
2299
- aria-hidden="true"
2300
- ></i>
2301
- </span>
2302
- <span
2303
- class="pf-v5-screen-reader"
2304
- >(opens new window)</span>
2305
- </a>
2306
- <button
2307
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2308
- type="button"
2309
- aria-label="Favorite"
2310
- >
2311
- <i class="fas fa-star" aria-hidden="true"></i>
2312
- </button>
2313
- </li>
2314
- </ul>
2315
- </section>
2316
- <hr class="pf-v5-c-divider" />
2317
- <section class="pf-v5-c-app-launcher__group">
2318
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
2319
- <ul role="list">
2320
- <li
2321
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2322
- >
2323
- <a class="pf-v5-c-app-launcher__menu-item">
2324
- Link 1
2325
- <span
2326
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2327
- >
2328
- <i
2329
- class="fas fa-external-link-alt"
2330
- aria-hidden="true"
2331
- ></i>
2332
- </span>
2333
- <span
2334
- class="pf-v5-screen-reader"
2335
- >(opens new window)</span>
2336
- </a>
2337
- <button
2338
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2339
- type="button"
2340
- aria-label="Favorite"
2341
- >
2342
- <i class="fas fa-star" aria-hidden="true"></i>
2343
- </button>
2344
- </li>
2345
- <li
2346
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2347
- >
2348
- <a class="pf-v5-c-app-launcher__menu-item">
2349
- Link 2
2350
- <span
2351
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2352
- >
2353
- <i
2354
- class="fas fa-external-link-alt"
2355
- aria-hidden="true"
2356
- ></i>
2357
- </span>
2358
- <span
2359
- class="pf-v5-screen-reader"
2360
- >(opens new window)</span>
2361
- </a>
2362
- <button
2363
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2364
- type="button"
2365
- aria-label="Favorite"
2366
- >
2367
- <i class="fas fa-star" aria-hidden="true"></i>
2368
- </button>
2369
- </li>
2370
- </ul>
2371
- </section>
2372
- </div>
2373
- </nav>
767
+ <i class="fas fa-th" aria-hidden="true"></i>
768
+ </button>
2374
769
  </div>
2375
770
  <div class="pf-v5-c-toolbar__item">
2376
- <div class="pf-v5-c-dropdown">
2377
- <button
2378
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2379
- id="alert-stacked-example-masthead-settings-button"
2380
- aria-expanded="false"
2381
- type="button"
2382
- aria-label="Settings"
2383
- >
2384
- <i class="fas fa-cog" aria-hidden="true"></i>
2385
- </button>
2386
- <ul
2387
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2388
- aria-labelledby="alert-stacked-example-masthead-settings-button"
2389
- hidden
2390
- >
2391
- <li>
2392
- <button
2393
- class="pf-v5-c-dropdown__menu-item"
2394
- type="button"
2395
- >Settings</button>
2396
- </li>
2397
- <li>
2398
- <button
2399
- class="pf-v5-c-dropdown__menu-item"
2400
- type="button"
2401
- >Use the beta release</button>
2402
- </li>
2403
- </ul>
2404
- </div>
771
+ <button
772
+ class="pf-v5-c-menu-toggle pf-m-plain"
773
+ type="button"
774
+ aria-expanded="false"
775
+ aria-label="Settings"
776
+ >
777
+ <i class="fas fa-cog" aria-hidden="true"></i>
778
+ </button>
2405
779
  </div>
2406
780
  <div class="pf-v5-c-toolbar__item">
2407
- <div class="pf-v5-c-dropdown">
2408
- <button
2409
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2410
- id="alert-stacked-example-masthead-help-button"
2411
- aria-expanded="false"
2412
- type="button"
2413
- aria-label="Help"
2414
- >
2415
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2416
- </button>
2417
- <ul
2418
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2419
- aria-labelledby="alert-stacked-example-masthead-help-button"
2420
- hidden
2421
- >
2422
- <li>
2423
- <button
2424
- class="pf-v5-c-dropdown__menu-item"
2425
- type="button"
2426
- >Support options</button>
2427
- </li>
2428
- <li>
2429
- <button
2430
- class="pf-v5-c-dropdown__menu-item"
2431
- type="button"
2432
- >Open support case</button>
2433
- </li>
2434
- <li>
2435
- <button
2436
- class="pf-v5-c-dropdown__menu-item"
2437
- type="button"
2438
- >API documentation</button>
2439
- </li>
2440
- </ul>
2441
- </div>
2442
- </div>
2443
- </div>
2444
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2445
- <div class="pf-v5-c-dropdown">
2446
781
  <button
2447
782
  class="pf-v5-c-menu-toggle pf-m-plain"
2448
783
  type="button"
2449
784
  aria-expanded="false"
2450
- aria-label="Actions"
785
+ aria-label="Help"
2451
786
  >
2452
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
787
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2453
788
  </button>
2454
- <div
2455
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
2456
- hidden
2457
- >
2458
- <div class="pf-v5-c-menu__content">
2459
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
2460
- <ul class="pf-v5-c-menu__list" role="menu">
2461
- <li
2462
- class="pf-v5-c-menu__list-item pf-m-disabled"
2463
- role="none"
2464
- >
2465
- <button
2466
- class="pf-v5-c-menu__item"
2467
- type="button"
2468
- disabled
2469
- role="menuitem"
2470
- >
2471
- <span class="pf-v5-c-menu__item-description">
2472
- <div class="pf-v5-u-font-size-sm">Username:</div>
2473
- <div class="pf-v5-u-font-size-md">ned_username</div>
2474
- </span>
2475
- </button>
2476
- </li>
2477
- <li
2478
- class="pf-v5-c-menu__list-item pf-m-disabled"
2479
- role="none"
2480
- >
2481
- <button
2482
- class="pf-v5-c-menu__item"
2483
- type="button"
2484
- disabled
2485
- role="menuitem"
2486
- >
2487
- <span class="pf-v5-c-menu__item-description">
2488
- <div
2489
- class="pf-v5-u-font-size-sm"
2490
- >Account number:</div>
2491
- <div class="pf-v5-u-font-size-md">123456789</div>
2492
- </span>
2493
- </button>
2494
- </li>
2495
- <li class="pf-v5-c-divider" role="separator"></li>
2496
- <li class="pf-v5-c-menu__list-item" role="none">
2497
- <button
2498
- class="pf-v5-c-menu__item"
2499
- type="button"
2500
- role="menuitem"
2501
- >
2502
- <span class="pf-v5-c-menu__item-main">
2503
- <span class="pf-v5-c-menu__item-text">My profile</span>
2504
- </span>
2505
- </button>
2506
- </li>
2507
- <li class="pf-v5-c-menu__list-item" role="none">
2508
- <button
2509
- class="pf-v5-c-menu__item"
2510
- type="button"
2511
- role="menuitem"
2512
- >
2513
- <span class="pf-v5-c-menu__item-main">
2514
- <span
2515
- class="pf-v5-c-menu__item-text"
2516
- >User management</span>
2517
- </span>
2518
- </button>
2519
- </li>
2520
- <li class="pf-v5-c-menu__list-item" role="none">
2521
- <button
2522
- class="pf-v5-c-menu__item"
2523
- type="button"
2524
- role="menuitem"
2525
- >
2526
- <span class="pf-v5-c-menu__item-main">
2527
- <span class="pf-v5-c-menu__item-text">Logout</span>
2528
- </span>
2529
- </button>
2530
- </li>
2531
- </ul>
2532
- </section>
2533
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
2534
- <section class="pf-v5-c-menu__group">
2535
- <ul class="pf-v5-c-menu__list" role="menu">
2536
- <li class="pf-v5-c-menu__list-item" role="none">
2537
- <button
2538
- class="pf-v5-c-menu__item"
2539
- type="button"
2540
- role="menuitem"
2541
- aria-expanded="false"
2542
- >
2543
- <span class="pf-v5-c-menu__item-main">
2544
- <span class="pf-v5-c-menu__item-icon">
2545
- <i
2546
- class="fas fa-fw fa-cog"
2547
- aria-hidden="true"
2548
- ></i>
2549
- </span>
2550
- <span class="pf-v5-c-menu__item-text">Settings</span>
2551
- <span class="pf-v5-c-menu__item-toggle-icon">
2552
- <i class="fas fa-angle-right"></i>
2553
- </span>
2554
- </span>
2555
- </button>
2556
- <div class="pf-v5-c-menu" hidden>
2557
- <div class="pf-v5-c-menu__content">
2558
- <ul class="pf-v5-c-menu__list" role="menu">
2559
- <li
2560
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2561
- role="none"
2562
- >
2563
- <button
2564
- class="pf-v5-c-menu__item"
2565
- type="button"
2566
- role="menuitem"
2567
- >
2568
- <span class="pf-v5-c-menu__item-main">
2569
- <span
2570
- class="pf-v5-c-menu__item-toggle-icon"
2571
- >
2572
- <i class="fas fa-angle-left"></i>
2573
- </span>
2574
- <span class="pf-v5-c-menu__item-icon">
2575
- <i
2576
- class="fas fa-fw fa-cog"
2577
- aria-hidden="true"
2578
- ></i>
2579
- </span>
2580
- <span
2581
- class="pf-v5-c-menu__item-text"
2582
- >Settings</span>
2583
- </span>
2584
- </button>
2585
- </li>
2586
- <li class="pf-v5-c-divider" role="separator"></li>
2587
- <li
2588
- class="pf-v5-c-menu__list-item"
2589
- role="none"
2590
- >
2591
- <a
2592
- class="pf-v5-c-menu__item"
2593
- href="#"
2594
- role="menuitem"
2595
- >
2596
- <span class="pf-v5-c-menu__item-main">
2597
- <span
2598
- class="pf-v5-c-menu__item-text"
2599
- >Customer support</span>
2600
- </span>
2601
- </a>
2602
- </li>
2603
- <li
2604
- class="pf-v5-c-menu__list-item"
2605
- role="none"
2606
- >
2607
- <a
2608
- class="pf-v5-c-menu__item"
2609
- href="#"
2610
- role="menuitem"
2611
- >
2612
- <span class="pf-v5-c-menu__item-main">
2613
- <span
2614
- class="pf-v5-c-menu__item-text"
2615
- >About</span>
2616
- </span>
2617
- </a>
2618
- </li>
2619
- </ul>
2620
- </div>
2621
- </div>
2622
- </li>
2623
-
2624
- <li class="pf-v5-c-menu__list-item" role="none">
2625
- <button
2626
- class="pf-v5-c-menu__item"
2627
- type="button"
2628
- role="menuitem"
2629
- aria-expanded="false"
2630
- >
2631
- <span class="pf-v5-c-menu__item-main">
2632
- <span class="pf-v5-c-menu__item-icon">
2633
- <i
2634
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2635
- aria-hidden="true"
2636
- ></i>
2637
- </span>
2638
- <span class="pf-v5-c-menu__item-text">Help</span>
2639
- <span class="pf-v5-c-menu__item-toggle-icon">
2640
- <i class="fas fa-angle-right"></i>
2641
- </span>
2642
- </span>
2643
- </button>
2644
- <div class="pf-v5-c-menu" hidden>
2645
- <div class="pf-v5-c-menu__content">
2646
- <ul class="pf-v5-c-menu__list" role="menu">
2647
- <li
2648
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2649
- role="none"
2650
- >
2651
- <button
2652
- class="pf-v5-c-menu__item"
2653
- type="button"
2654
- role="menuitem"
2655
- >
2656
- <span class="pf-v5-c-menu__item-main">
2657
- <span
2658
- class="pf-v5-c-menu__item-toggle-icon"
2659
- >
2660
- <i class="fas fa-angle-left"></i>
2661
- </span>
2662
- <span class="pf-v5-c-menu__item-icon">
2663
- <i
2664
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2665
- aria-hidden="true"
2666
- ></i>
2667
- </span>
2668
- <span
2669
- class="pf-v5-c-menu__item-text"
2670
- >Help</span>
2671
- </span>
2672
- </button>
2673
- </li>
2674
- <li class="pf-v5-c-divider" role="separator"></li>
2675
- <li
2676
- class="pf-v5-c-menu__list-item"
2677
- role="none"
2678
- >
2679
- <a
2680
- class="pf-v5-c-menu__item"
2681
- href="#"
2682
- role="menuitem"
2683
- >
2684
- <span class="pf-v5-c-menu__item-main">
2685
- <span
2686
- class="pf-v5-c-menu__item-text"
2687
- >Support options</span>
2688
- </span>
2689
- </a>
2690
- </li>
2691
- <li
2692
- class="pf-v5-c-menu__list-item"
2693
- role="none"
2694
- >
2695
- <a
2696
- class="pf-v5-c-menu__item"
2697
- href="#"
2698
- role="menuitem"
2699
- >
2700
- <span class="pf-v5-c-menu__item-main">
2701
- <span
2702
- class="pf-v5-c-menu__item-text"
2703
- >Open support case</span>
2704
- </span>
2705
- </a>
2706
- </li>
2707
- <li
2708
- class="pf-v5-c-menu__list-item"
2709
- role="none"
2710
- >
2711
- <a
2712
- class="pf-v5-c-menu__item"
2713
- href="#"
2714
- role="menuitem"
2715
- >
2716
- <span class="pf-v5-c-menu__item-main">
2717
- <span
2718
- class="pf-v5-c-menu__item-text"
2719
- >API documentation</span>
2720
- </span>
2721
- </a>
2722
- </li>
2723
- </ul>
2724
- </div>
2725
- </div>
2726
- </li>
2727
-
2728
- <li class="pf-v5-c-menu__list-item" role="none">
2729
- <button
2730
- class="pf-v5-c-menu__item"
2731
- type="button"
2732
- role="menuitem"
2733
- >
2734
- <span class="pf-v5-c-menu__item-main">
2735
- <span class="pf-v5-c-menu__item-icon">
2736
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2737
- </span>
2738
- <span
2739
- class="pf-v5-c-menu__item-text"
2740
- >Application launcher</span>
2741
- <span class="pf-v5-c-menu__item-toggle-icon">
2742
- <i class="fas fa-angle-right"></i>
2743
- </span>
2744
- </span>
2745
- </button>
2746
- <div class="pf-v5-c-menu" hidden>
2747
- <div class="pf-v5-c-menu__header">
2748
- <button
2749
- class="pf-v5-c-menu__item"
2750
- type="button"
2751
- role="menuitem"
2752
- >
2753
- <span class="pf-v5-c-menu__item-main">
2754
- <span
2755
- class="pf-v5-c-menu__item-toggle-icon"
2756
- >
2757
- <i class="fas fa-angle-left"></i>
2758
- </span>
2759
- <span class="pf-v5-c-menu__item-icon">
2760
- <i
2761
- class="fas fa-fw fa-th"
2762
- aria-hidden="true"
2763
- ></i>
2764
- </span>
2765
- <span
2766
- class="pf-v5-c-menu__item-text"
2767
- >Application launcher</span>
2768
- </span>
2769
- </button>
2770
- </div>
2771
- <div class="pf-v5-c-menu__search">
2772
- <div class="pf-v5-c-menu__search-input">
2773
- <div class="pf-v5-c-text-input-group">
2774
- <div
2775
- class="pf-v5-c-text-input-group__main pf-m-icon"
2776
- >
2777
- <span
2778
- class="pf-v5-c-text-input-group__text"
2779
- >
2780
- <span
2781
- class="pf-v5-c-text-input-group__icon"
2782
- >
2783
- <i class="fas fa-fw fa-search"></i>
2784
- </span>
2785
- <input
2786
- class="pf-v5-c-text-input-group__text-input"
2787
- type="text"
2788
- placeholder="Search"
2789
- value
2790
- aria-label="Search input"
2791
- />
2792
- </span>
2793
- </div>
2794
- </div>
2795
- </div>
2796
- </div>
2797
- <hr class="pf-v5-c-divider" />
2798
- <section class="pf-v5-c-menu__group">
2799
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
2800
- <ul class="pf-v5-c-menu__list" role="menu">
2801
- <li
2802
- class="pf-v5-c-menu__list-item"
2803
- role="none"
2804
- >
2805
- <a
2806
- class="pf-v5-c-menu__item"
2807
- href="#"
2808
- role="menuitem"
2809
- >
2810
- <span class="pf-v5-c-menu__item-main">
2811
- <span
2812
- class="pf-v5-c-menu__item-text"
2813
- >Link 1</span>
2814
- </span>
2815
- </a>
2816
- <button
2817
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2818
- type="button"
2819
- aria-label="Starred"
2820
- >
2821
- <span
2822
- class="pf-v5-c-menu__item-action-icon"
2823
- >
2824
- <i
2825
- class="fas fa-star"
2826
- aria-hidden="true"
2827
- ></i>
2828
- </span>
2829
- </button>
2830
- </li>
2831
- <li
2832
- class="pf-v5-c-menu__list-item"
2833
- role="none"
2834
- >
2835
- <a
2836
- class="pf-v5-c-menu__item"
2837
- href="#"
2838
- role="menuitem"
2839
- target="_blank"
2840
- >
2841
- <span class="pf-v5-c-menu__item-main">
2842
- <span
2843
- class="pf-v5-c-menu__item-text"
2844
- >Link 2</span>
2845
- <span
2846
- class="pf-v5-c-menu__item-external-icon"
2847
- >
2848
- <i
2849
- class="fas fa-external-link-alt"
2850
- aria-hidden="true"
2851
- ></i>
2852
- </span>
2853
- <span
2854
- class="pf-v5-screen-reader"
2855
- >(opens new window)</span>
2856
- </span>
2857
- </a>
2858
- <button
2859
- class="pf-v5-c-menu__item-action pf-m-favorite"
2860
- type="button"
2861
- aria-label="Not starred"
2862
- >
2863
- <span
2864
- class="pf-v5-c-menu__item-action-icon"
2865
- >
2866
- <i
2867
- class="fas fa-star"
2868
- aria-hidden="true"
2869
- ></i>
2870
- </span>
2871
- </button>
2872
- </li>
2873
- </ul>
2874
- </section>
2875
- <hr class="pf-v5-c-divider" />
2876
- <section class="pf-v5-c-menu__group">
2877
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
2878
- <ul class="pf-v5-c-menu__list" role="menu">
2879
- <li
2880
- class="pf-v5-c-menu__list-item"
2881
- role="none"
2882
- >
2883
- <a
2884
- class="pf-v5-c-menu__item"
2885
- href="#"
2886
- role="menuitem"
2887
- >
2888
- <span class="pf-v5-c-menu__item-main">
2889
- <span
2890
- class="pf-v5-c-menu__item-text"
2891
- >Link 1</span>
2892
- </span>
2893
- </a>
2894
- <button
2895
- class="pf-v5-c-menu__item-action pf-m-favorite"
2896
- type="button"
2897
- aria-label="Not starred"
2898
- >
2899
- <span
2900
- class="pf-v5-c-menu__item-action-icon"
2901
- >
2902
- <i
2903
- class="fas fa-star"
2904
- aria-hidden="true"
2905
- ></i>
2906
- </span>
2907
- </button>
2908
- </li>
2909
- <li
2910
- class="pf-v5-c-menu__list-item"
2911
- role="none"
2912
- >
2913
- <a
2914
- class="pf-v5-c-menu__item"
2915
- href="#"
2916
- role="menuitem"
2917
- target="_blank"
2918
- >
2919
- <span class="pf-v5-c-menu__item-main">
2920
- <span
2921
- class="pf-v5-c-menu__item-text"
2922
- >Link 2</span>
2923
- <span
2924
- class="pf-v5-c-menu__item-external-icon"
2925
- >
2926
- <i
2927
- class="fas fa-external-link-alt"
2928
- aria-hidden="true"
2929
- ></i>
2930
- </span>
2931
- <span
2932
- class="pf-v5-screen-reader"
2933
- >(opens new window)</span>
2934
- </span>
2935
- </a>
2936
- <button
2937
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2938
- type="button"
2939
- aria-label="Starred"
2940
- >
2941
- <span
2942
- class="pf-v5-c-menu__item-action-icon"
2943
- >
2944
- <i
2945
- class="fas fa-star"
2946
- aria-hidden="true"
2947
- ></i>
2948
- </span>
2949
- </button>
2950
- </li>
2951
- </ul>
2952
- </section>
2953
- </div>
2954
- </li>
2955
- </ul>
2956
- </section>
2957
- </div>
2958
- </div>
2959
789
  </div>
2960
790
  </div>
2961
- </div>
2962
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2963
- <div
2964
- class="pf-v5-c-dropdown pf-m-full-height"
2965
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
2966
- >
791
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2967
792
  <button
2968
- class="pf-v5-c-dropdown__toggle"
2969
- id="alert-stacked-example-masthead-profile-button"
2970
- aria-expanded="false"
793
+ class="pf-v5-c-menu-toggle pf-m-plain"
2971
794
  type="button"
795
+ aria-expanded="false"
796
+ aria-label="Actions"
2972
797
  >
2973
- <span class="pf-v5-c-dropdown__toggle-image">
2974
- <img
2975
- class="pf-v5-c-avatar"
2976
- alt="Avatar image"
2977
- src="/assets/images/img_avatar-light.svg"
2978
- />
2979
- </span>
2980
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
2981
- <span class="pf-v5-c-dropdown__toggle-icon">
2982
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2983
- </span>
798
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2984
799
  </button>
2985
- <div class="pf-v5-c-dropdown__menu" hidden>
2986
- <section class="pf-v5-c-dropdown__group">
2987
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2988
- <div class="pf-v5-u-font-size-sm">Account number:</div>
2989
- <div>123456789</div>
2990
- </div>
2991
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2992
- <div class="pf-v5-u-font-size-sm">Username:</div>
2993
- <div>mshaksho@redhat.com</div>
2994
- </div>
2995
- </section>
2996
- <hr class="pf-v5-c-divider" />
2997
- <section class="pf-v5-c-dropdown__group">
2998
- <ul>
2999
- <li>
3000
- <a
3001
- class="pf-v5-c-dropdown__menu-item"
3002
- href="#"
3003
- >My profile</a>
3004
- </li>
3005
- <li>
3006
- <a
3007
- class="pf-v5-c-dropdown__menu-item"
3008
- href="#"
3009
- >User management</a>
3010
- </li>
3011
- <li>
3012
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
3013
- </li>
3014
- </ul>
3015
- </section>
3016
- </div>
3017
800
  </div>
3018
801
  </div>
802
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
803
+ <button
804
+ class="pf-v5-c-menu-toggle pf-m-full-height"
805
+ type="button"
806
+ aria-expanded="false"
807
+ >
808
+ <span class="pf-v5-c-menu-toggle__icon">
809
+ <img
810
+ class="pf-v5-c-avatar"
811
+ alt="Avatar image"
812
+ src="/assets/images/img_avatar-light.svg"
813
+ />
814
+ </span>
815
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
816
+ <span class="pf-v5-c-menu-toggle__controls">
817
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
818
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
819
+ </span>
820
+ </span>
821
+ </button>
822
+ </div>
3019
823
  </div>
3020
824
  </div>
3021
825
  </div>