@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/DescriptionList/examples/DescriptionList.md CHANGED
@@ -56,800 +56,68 @@ cssPrefix: pf-d-description-list
56
56
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
57
57
  >
58
58
  <div class="pf-v5-c-toolbar__item">
59
- <nav
60
- class="pf-v5-c-app-launcher"
59
+ <button
60
+ class="pf-v5-c-menu-toggle pf-m-plain"
61
+ type="button"
62
+ aria-expanded="false"
61
63
  aria-label="Application launcher"
62
- id="description-list-basic-example-masthead-application-launcher"
63
64
  >
64
- <button
65
- class="pf-v5-c-app-launcher__toggle"
66
- type="button"
67
- id="description-list-basic-example-masthead-application-launcher-button"
68
- aria-expanded="false"
69
- aria-label="Application launcher"
70
- >
71
- <i class="fas fa-th" aria-hidden="true"></i>
72
- </button>
73
- <div
74
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
75
- hidden
76
- >
77
- <div class="pf-v5-c-app-launcher__menu-search">
78
- <div class="pf-v5-c-text-input-group">
79
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
80
- <span class="pf-v5-c-text-input-group__text">
81
- <span class="pf-v5-c-text-input-group__icon">
82
- <i class="fas fa-fw fa-search"></i>
83
- </span>
84
- <input
85
- class="pf-v5-c-text-input-group__text-input"
86
- type="text"
87
- placeholder="Filer by name"
88
- value
89
- aria-label="Search input"
90
- />
91
- </span>
92
- </div>
93
- </div>
94
- </div>
95
- <section class="pf-v5-c-app-launcher__group">
96
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
97
- <ul role="list">
98
- <li
99
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
100
- >
101
- <a class="pf-v5-c-app-launcher__menu-item">
102
- Link 1
103
- <span
104
- class="pf-v5-c-app-launcher__menu-item-external-icon"
105
- >
106
- <i
107
- class="fas fa-external-link-alt"
108
- aria-hidden="true"
109
- ></i>
110
- </span>
111
- <span
112
- class="pf-v5-screen-reader"
113
- >(opens new window)</span>
114
- </a>
115
- <button
116
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
117
- type="button"
118
- aria-label="Favorite"
119
- >
120
- <i class="fas fa-star" aria-hidden="true"></i>
121
- </button>
122
- </li>
123
- <li
124
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
125
- >
126
- <a class="pf-v5-c-app-launcher__menu-item">
127
- Link 2
128
- <span
129
- class="pf-v5-c-app-launcher__menu-item-external-icon"
130
- >
131
- <i
132
- class="fas fa-external-link-alt"
133
- aria-hidden="true"
134
- ></i>
135
- </span>
136
- <span
137
- class="pf-v5-screen-reader"
138
- >(opens new window)</span>
139
- </a>
140
- <button
141
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
142
- type="button"
143
- aria-label="Favorite"
144
- >
145
- <i class="fas fa-star" aria-hidden="true"></i>
146
- </button>
147
- </li>
148
- </ul>
149
- </section>
150
- <hr class="pf-v5-c-divider" />
151
- <section class="pf-v5-c-app-launcher__group">
152
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
153
- <ul role="list">
154
- <li
155
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
156
- >
157
- <a class="pf-v5-c-app-launcher__menu-item">
158
- Link 1
159
- <span
160
- class="pf-v5-c-app-launcher__menu-item-external-icon"
161
- >
162
- <i
163
- class="fas fa-external-link-alt"
164
- aria-hidden="true"
165
- ></i>
166
- </span>
167
- <span
168
- class="pf-v5-screen-reader"
169
- >(opens new window)</span>
170
- </a>
171
- <button
172
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
173
- type="button"
174
- aria-label="Favorite"
175
- >
176
- <i class="fas fa-star" aria-hidden="true"></i>
177
- </button>
178
- </li>
179
- <li
180
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
181
- >
182
- <a class="pf-v5-c-app-launcher__menu-item">
183
- Link 2
184
- <span
185
- class="pf-v5-c-app-launcher__menu-item-external-icon"
186
- >
187
- <i
188
- class="fas fa-external-link-alt"
189
- aria-hidden="true"
190
- ></i>
191
- </span>
192
- <span
193
- class="pf-v5-screen-reader"
194
- >(opens new window)</span>
195
- </a>
196
- <button
197
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
198
- type="button"
199
- aria-label="Favorite"
200
- >
201
- <i class="fas fa-star" aria-hidden="true"></i>
202
- </button>
203
- </li>
204
- </ul>
205
- </section>
206
- </div>
207
- </nav>
65
+ <i class="fas fa-th" aria-hidden="true"></i>
66
+ </button>
208
67
  </div>
209
68
  <div class="pf-v5-c-toolbar__item">
210
- <div class="pf-v5-c-dropdown">
211
- <button
212
- class="pf-v5-c-dropdown__toggle pf-m-plain"
213
- id="description-list-basic-example-masthead-settings-button"
214
- aria-expanded="false"
215
- type="button"
216
- aria-label="Settings"
217
- >
218
- <i class="fas fa-cog" aria-hidden="true"></i>
219
- </button>
220
- <ul
221
- class="pf-v5-c-dropdown__menu pf-m-align-right"
222
- aria-labelledby="description-list-basic-example-masthead-settings-button"
223
- hidden
224
- >
225
- <li>
226
- <button
227
- class="pf-v5-c-dropdown__menu-item"
228
- type="button"
229
- >Settings</button>
230
- </li>
231
- <li>
232
- <button
233
- class="pf-v5-c-dropdown__menu-item"
234
- type="button"
235
- >Use the beta release</button>
236
- </li>
237
- </ul>
238
- </div>
69
+ <button
70
+ class="pf-v5-c-menu-toggle pf-m-plain"
71
+ type="button"
72
+ aria-expanded="false"
73
+ aria-label="Settings"
74
+ >
75
+ <i class="fas fa-cog" aria-hidden="true"></i>
76
+ </button>
239
77
  </div>
240
78
  <div class="pf-v5-c-toolbar__item">
241
- <div class="pf-v5-c-dropdown">
242
- <button
243
- class="pf-v5-c-dropdown__toggle pf-m-plain"
244
- id="description-list-basic-example-masthead-help-button"
245
- aria-expanded="false"
246
- type="button"
247
- aria-label="Help"
248
- >
249
- <i class="fas fa-question-circle" aria-hidden="true"></i>
250
- </button>
251
- <ul
252
- class="pf-v5-c-dropdown__menu pf-m-align-right"
253
- aria-labelledby="description-list-basic-example-masthead-help-button"
254
- hidden
255
- >
256
- <li>
257
- <button
258
- class="pf-v5-c-dropdown__menu-item"
259
- type="button"
260
- >Support options</button>
261
- </li>
262
- <li>
263
- <button
264
- class="pf-v5-c-dropdown__menu-item"
265
- type="button"
266
- >Open support case</button>
267
- </li>
268
- <li>
269
- <button
270
- class="pf-v5-c-dropdown__menu-item"
271
- type="button"
272
- >API documentation</button>
273
- </li>
274
- </ul>
275
- </div>
276
- </div>
277
- </div>
278
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
279
- <div class="pf-v5-c-dropdown">
280
79
  <button
281
80
  class="pf-v5-c-menu-toggle pf-m-plain"
282
81
  type="button"
283
82
  aria-expanded="false"
284
- aria-label="Actions"
83
+ aria-label="Help"
285
84
  >
286
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
85
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
287
86
  </button>
288
- <div
289
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
290
- hidden
291
- >
292
- <div class="pf-v5-c-menu__content">
293
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
294
- <ul class="pf-v5-c-menu__list" role="menu">
295
- <li
296
- class="pf-v5-c-menu__list-item pf-m-disabled"
297
- role="none"
298
- >
299
- <button
300
- class="pf-v5-c-menu__item"
301
- type="button"
302
- disabled
303
- role="menuitem"
304
- >
305
- <span class="pf-v5-c-menu__item-description">
306
- <div class="pf-v5-u-font-size-sm">Username:</div>
307
- <div class="pf-v5-u-font-size-md">ned_username</div>
308
- </span>
309
- </button>
310
- </li>
311
- <li
312
- class="pf-v5-c-menu__list-item pf-m-disabled"
313
- role="none"
314
- >
315
- <button
316
- class="pf-v5-c-menu__item"
317
- type="button"
318
- disabled
319
- role="menuitem"
320
- >
321
- <span class="pf-v5-c-menu__item-description">
322
- <div
323
- class="pf-v5-u-font-size-sm"
324
- >Account number:</div>
325
- <div class="pf-v5-u-font-size-md">123456789</div>
326
- </span>
327
- </button>
328
- </li>
329
- <li class="pf-v5-c-divider" role="separator"></li>
330
- <li class="pf-v5-c-menu__list-item" role="none">
331
- <button
332
- class="pf-v5-c-menu__item"
333
- type="button"
334
- role="menuitem"
335
- >
336
- <span class="pf-v5-c-menu__item-main">
337
- <span class="pf-v5-c-menu__item-text">My profile</span>
338
- </span>
339
- </button>
340
- </li>
341
- <li class="pf-v5-c-menu__list-item" role="none">
342
- <button
343
- class="pf-v5-c-menu__item"
344
- type="button"
345
- role="menuitem"
346
- >
347
- <span class="pf-v5-c-menu__item-main">
348
- <span
349
- class="pf-v5-c-menu__item-text"
350
- >User management</span>
351
- </span>
352
- </button>
353
- </li>
354
- <li class="pf-v5-c-menu__list-item" role="none">
355
- <button
356
- class="pf-v5-c-menu__item"
357
- type="button"
358
- role="menuitem"
359
- >
360
- <span class="pf-v5-c-menu__item-main">
361
- <span class="pf-v5-c-menu__item-text">Logout</span>
362
- </span>
363
- </button>
364
- </li>
365
- </ul>
366
- </section>
367
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
368
- <section class="pf-v5-c-menu__group">
369
- <ul class="pf-v5-c-menu__list" role="menu">
370
- <li class="pf-v5-c-menu__list-item" role="none">
371
- <button
372
- class="pf-v5-c-menu__item"
373
- type="button"
374
- role="menuitem"
375
- aria-expanded="false"
376
- >
377
- <span class="pf-v5-c-menu__item-main">
378
- <span class="pf-v5-c-menu__item-icon">
379
- <i
380
- class="fas fa-fw fa-cog"
381
- aria-hidden="true"
382
- ></i>
383
- </span>
384
- <span class="pf-v5-c-menu__item-text">Settings</span>
385
- <span class="pf-v5-c-menu__item-toggle-icon">
386
- <i class="fas fa-angle-right"></i>
387
- </span>
388
- </span>
389
- </button>
390
- <div class="pf-v5-c-menu" hidden>
391
- <div class="pf-v5-c-menu__content">
392
- <ul class="pf-v5-c-menu__list" role="menu">
393
- <li
394
- class="pf-v5-c-menu__list-item pf-m-drill-up"
395
- role="none"
396
- >
397
- <button
398
- class="pf-v5-c-menu__item"
399
- type="button"
400
- role="menuitem"
401
- >
402
- <span class="pf-v5-c-menu__item-main">
403
- <span
404
- class="pf-v5-c-menu__item-toggle-icon"
405
- >
406
- <i class="fas fa-angle-left"></i>
407
- </span>
408
- <span class="pf-v5-c-menu__item-icon">
409
- <i
410
- class="fas fa-fw fa-cog"
411
- aria-hidden="true"
412
- ></i>
413
- </span>
414
- <span
415
- class="pf-v5-c-menu__item-text"
416
- >Settings</span>
417
- </span>
418
- </button>
419
- </li>
420
- <li class="pf-v5-c-divider" role="separator"></li>
421
- <li
422
- class="pf-v5-c-menu__list-item"
423
- role="none"
424
- >
425
- <a
426
- class="pf-v5-c-menu__item"
427
- href="#"
428
- role="menuitem"
429
- >
430
- <span class="pf-v5-c-menu__item-main">
431
- <span
432
- class="pf-v5-c-menu__item-text"
433
- >Customer support</span>
434
- </span>
435
- </a>
436
- </li>
437
- <li
438
- class="pf-v5-c-menu__list-item"
439
- role="none"
440
- >
441
- <a
442
- class="pf-v5-c-menu__item"
443
- href="#"
444
- role="menuitem"
445
- >
446
- <span class="pf-v5-c-menu__item-main">
447
- <span
448
- class="pf-v5-c-menu__item-text"
449
- >About</span>
450
- </span>
451
- </a>
452
- </li>
453
- </ul>
454
- </div>
455
- </div>
456
- </li>
457
-
458
- <li class="pf-v5-c-menu__list-item" role="none">
459
- <button
460
- class="pf-v5-c-menu__item"
461
- type="button"
462
- role="menuitem"
463
- aria-expanded="false"
464
- >
465
- <span class="pf-v5-c-menu__item-main">
466
- <span class="pf-v5-c-menu__item-icon">
467
- <i
468
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
469
- aria-hidden="true"
470
- ></i>
471
- </span>
472
- <span class="pf-v5-c-menu__item-text">Help</span>
473
- <span class="pf-v5-c-menu__item-toggle-icon">
474
- <i class="fas fa-angle-right"></i>
475
- </span>
476
- </span>
477
- </button>
478
- <div class="pf-v5-c-menu" hidden>
479
- <div class="pf-v5-c-menu__content">
480
- <ul class="pf-v5-c-menu__list" role="menu">
481
- <li
482
- class="pf-v5-c-menu__list-item pf-m-drill-up"
483
- role="none"
484
- >
485
- <button
486
- class="pf-v5-c-menu__item"
487
- type="button"
488
- role="menuitem"
489
- >
490
- <span class="pf-v5-c-menu__item-main">
491
- <span
492
- class="pf-v5-c-menu__item-toggle-icon"
493
- >
494
- <i class="fas fa-angle-left"></i>
495
- </span>
496
- <span class="pf-v5-c-menu__item-icon">
497
- <i
498
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
499
- aria-hidden="true"
500
- ></i>
501
- </span>
502
- <span
503
- class="pf-v5-c-menu__item-text"
504
- >Help</span>
505
- </span>
506
- </button>
507
- </li>
508
- <li class="pf-v5-c-divider" role="separator"></li>
509
- <li
510
- class="pf-v5-c-menu__list-item"
511
- role="none"
512
- >
513
- <a
514
- class="pf-v5-c-menu__item"
515
- href="#"
516
- role="menuitem"
517
- >
518
- <span class="pf-v5-c-menu__item-main">
519
- <span
520
- class="pf-v5-c-menu__item-text"
521
- >Support options</span>
522
- </span>
523
- </a>
524
- </li>
525
- <li
526
- class="pf-v5-c-menu__list-item"
527
- role="none"
528
- >
529
- <a
530
- class="pf-v5-c-menu__item"
531
- href="#"
532
- role="menuitem"
533
- >
534
- <span class="pf-v5-c-menu__item-main">
535
- <span
536
- class="pf-v5-c-menu__item-text"
537
- >Open support case</span>
538
- </span>
539
- </a>
540
- </li>
541
- <li
542
- class="pf-v5-c-menu__list-item"
543
- role="none"
544
- >
545
- <a
546
- class="pf-v5-c-menu__item"
547
- href="#"
548
- role="menuitem"
549
- >
550
- <span class="pf-v5-c-menu__item-main">
551
- <span
552
- class="pf-v5-c-menu__item-text"
553
- >API documentation</span>
554
- </span>
555
- </a>
556
- </li>
557
- </ul>
558
- </div>
559
- </div>
560
- </li>
561
-
562
- <li class="pf-v5-c-menu__list-item" role="none">
563
- <button
564
- class="pf-v5-c-menu__item"
565
- type="button"
566
- role="menuitem"
567
- >
568
- <span class="pf-v5-c-menu__item-main">
569
- <span class="pf-v5-c-menu__item-icon">
570
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
571
- </span>
572
- <span
573
- class="pf-v5-c-menu__item-text"
574
- >Application launcher</span>
575
- <span class="pf-v5-c-menu__item-toggle-icon">
576
- <i class="fas fa-angle-right"></i>
577
- </span>
578
- </span>
579
- </button>
580
- <div class="pf-v5-c-menu" hidden>
581
- <div class="pf-v5-c-menu__header">
582
- <button
583
- class="pf-v5-c-menu__item"
584
- type="button"
585
- role="menuitem"
586
- >
587
- <span class="pf-v5-c-menu__item-main">
588
- <span
589
- class="pf-v5-c-menu__item-toggle-icon"
590
- >
591
- <i class="fas fa-angle-left"></i>
592
- </span>
593
- <span class="pf-v5-c-menu__item-icon">
594
- <i
595
- class="fas fa-fw fa-th"
596
- aria-hidden="true"
597
- ></i>
598
- </span>
599
- <span
600
- class="pf-v5-c-menu__item-text"
601
- >Application launcher</span>
602
- </span>
603
- </button>
604
- </div>
605
- <div class="pf-v5-c-menu__search">
606
- <div class="pf-v5-c-menu__search-input">
607
- <div class="pf-v5-c-text-input-group">
608
- <div
609
- class="pf-v5-c-text-input-group__main pf-m-icon"
610
- >
611
- <span
612
- class="pf-v5-c-text-input-group__text"
613
- >
614
- <span
615
- class="pf-v5-c-text-input-group__icon"
616
- >
617
- <i class="fas fa-fw fa-search"></i>
618
- </span>
619
- <input
620
- class="pf-v5-c-text-input-group__text-input"
621
- type="text"
622
- placeholder="Search"
623
- value
624
- aria-label="Search input"
625
- />
626
- </span>
627
- </div>
628
- </div>
629
- </div>
630
- </div>
631
- <hr class="pf-v5-c-divider" />
632
- <section class="pf-v5-c-menu__group">
633
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
634
- <ul class="pf-v5-c-menu__list" role="menu">
635
- <li
636
- class="pf-v5-c-menu__list-item"
637
- role="none"
638
- >
639
- <a
640
- class="pf-v5-c-menu__item"
641
- href="#"
642
- role="menuitem"
643
- >
644
- <span class="pf-v5-c-menu__item-main">
645
- <span
646
- class="pf-v5-c-menu__item-text"
647
- >Link 1</span>
648
- </span>
649
- </a>
650
- <button
651
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
652
- type="button"
653
- aria-label="Starred"
654
- >
655
- <span
656
- class="pf-v5-c-menu__item-action-icon"
657
- >
658
- <i
659
- class="fas fa-star"
660
- aria-hidden="true"
661
- ></i>
662
- </span>
663
- </button>
664
- </li>
665
- <li
666
- class="pf-v5-c-menu__list-item"
667
- role="none"
668
- >
669
- <a
670
- class="pf-v5-c-menu__item"
671
- href="#"
672
- role="menuitem"
673
- target="_blank"
674
- >
675
- <span class="pf-v5-c-menu__item-main">
676
- <span
677
- class="pf-v5-c-menu__item-text"
678
- >Link 2</span>
679
- <span
680
- class="pf-v5-c-menu__item-external-icon"
681
- >
682
- <i
683
- class="fas fa-external-link-alt"
684
- aria-hidden="true"
685
- ></i>
686
- </span>
687
- <span
688
- class="pf-v5-screen-reader"
689
- >(opens new window)</span>
690
- </span>
691
- </a>
692
- <button
693
- class="pf-v5-c-menu__item-action pf-m-favorite"
694
- type="button"
695
- aria-label="Not starred"
696
- >
697
- <span
698
- class="pf-v5-c-menu__item-action-icon"
699
- >
700
- <i
701
- class="fas fa-star"
702
- aria-hidden="true"
703
- ></i>
704
- </span>
705
- </button>
706
- </li>
707
- </ul>
708
- </section>
709
- <hr class="pf-v5-c-divider" />
710
- <section class="pf-v5-c-menu__group">
711
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
712
- <ul class="pf-v5-c-menu__list" role="menu">
713
- <li
714
- class="pf-v5-c-menu__list-item"
715
- role="none"
716
- >
717
- <a
718
- class="pf-v5-c-menu__item"
719
- href="#"
720
- role="menuitem"
721
- >
722
- <span class="pf-v5-c-menu__item-main">
723
- <span
724
- class="pf-v5-c-menu__item-text"
725
- >Link 1</span>
726
- </span>
727
- </a>
728
- <button
729
- class="pf-v5-c-menu__item-action pf-m-favorite"
730
- type="button"
731
- aria-label="Not starred"
732
- >
733
- <span
734
- class="pf-v5-c-menu__item-action-icon"
735
- >
736
- <i
737
- class="fas fa-star"
738
- aria-hidden="true"
739
- ></i>
740
- </span>
741
- </button>
742
- </li>
743
- <li
744
- class="pf-v5-c-menu__list-item"
745
- role="none"
746
- >
747
- <a
748
- class="pf-v5-c-menu__item"
749
- href="#"
750
- role="menuitem"
751
- target="_blank"
752
- >
753
- <span class="pf-v5-c-menu__item-main">
754
- <span
755
- class="pf-v5-c-menu__item-text"
756
- >Link 2</span>
757
- <span
758
- class="pf-v5-c-menu__item-external-icon"
759
- >
760
- <i
761
- class="fas fa-external-link-alt"
762
- aria-hidden="true"
763
- ></i>
764
- </span>
765
- <span
766
- class="pf-v5-screen-reader"
767
- >(opens new window)</span>
768
- </span>
769
- </a>
770
- <button
771
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
772
- type="button"
773
- aria-label="Starred"
774
- >
775
- <span
776
- class="pf-v5-c-menu__item-action-icon"
777
- >
778
- <i
779
- class="fas fa-star"
780
- aria-hidden="true"
781
- ></i>
782
- </span>
783
- </button>
784
- </li>
785
- </ul>
786
- </section>
787
- </div>
788
- </li>
789
- </ul>
790
- </section>
791
- </div>
792
- </div>
793
87
  </div>
794
88
  </div>
795
- </div>
796
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
797
- <div
798
- class="pf-v5-c-dropdown pf-m-full-height"
799
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
800
- >
89
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
801
90
  <button
802
- class="pf-v5-c-dropdown__toggle"
803
- id="description-list-basic-example-masthead-profile-button"
804
- aria-expanded="false"
91
+ class="pf-v5-c-menu-toggle pf-m-plain"
805
92
  type="button"
93
+ aria-expanded="false"
94
+ aria-label="Actions"
806
95
  >
807
- <span class="pf-v5-c-dropdown__toggle-image">
808
- <img
809
- class="pf-v5-c-avatar"
810
- alt="Avatar image"
811
- src="/assets/images/img_avatar-light.svg"
812
- />
813
- </span>
814
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
815
- <span class="pf-v5-c-dropdown__toggle-icon">
816
- <i class="fas fa-caret-down" aria-hidden="true"></i>
817
- </span>
96
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
818
97
  </button>
819
- <div class="pf-v5-c-dropdown__menu" hidden>
820
- <section class="pf-v5-c-dropdown__group">
821
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
822
- <div class="pf-v5-u-font-size-sm">Account number:</div>
823
- <div>123456789</div>
824
- </div>
825
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
826
- <div class="pf-v5-u-font-size-sm">Username:</div>
827
- <div>mshaksho@redhat.com</div>
828
- </div>
829
- </section>
830
- <hr class="pf-v5-c-divider" />
831
- <section class="pf-v5-c-dropdown__group">
832
- <ul>
833
- <li>
834
- <a
835
- class="pf-v5-c-dropdown__menu-item"
836
- href="#"
837
- >My profile</a>
838
- </li>
839
- <li>
840
- <a
841
- class="pf-v5-c-dropdown__menu-item"
842
- href="#"
843
- >User management</a>
844
- </li>
845
- <li>
846
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
847
- </li>
848
- </ul>
849
- </section>
850
- </div>
851
98
  </div>
852
99
  </div>
100
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
101
+ <button
102
+ class="pf-v5-c-menu-toggle pf-m-full-height"
103
+ type="button"
104
+ aria-expanded="false"
105
+ >
106
+ <span class="pf-v5-c-menu-toggle__icon">
107
+ <img
108
+ class="pf-v5-c-avatar"
109
+ alt="Avatar image"
110
+ src="/assets/images/img_avatar-light.svg"
111
+ />
112
+ </span>
113
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
853
121
  </div>
854
122
  </div>
855
123
  </div>
@@ -1091,800 +359,68 @@ cssPrefix: pf-d-description-list
1091
359
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1092
360
  >
1093
361
  <div class="pf-v5-c-toolbar__item">
1094
- <nav
1095
- class="pf-v5-c-app-launcher"
362
+ <button
363
+ class="pf-v5-c-menu-toggle pf-m-plain"
364
+ type="button"
365
+ aria-expanded="false"
1096
366
  aria-label="Application launcher"
1097
- id="description-list-in-drawer-example-masthead-application-launcher"
1098
367
  >
1099
- <button
1100
- class="pf-v5-c-app-launcher__toggle"
1101
- type="button"
1102
- id="description-list-in-drawer-example-masthead-application-launcher-button"
1103
- aria-expanded="false"
1104
- aria-label="Application launcher"
1105
- >
1106
- <i class="fas fa-th" aria-hidden="true"></i>
1107
- </button>
1108
- <div
1109
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
1110
- hidden
1111
- >
1112
- <div class="pf-v5-c-app-launcher__menu-search">
1113
- <div class="pf-v5-c-text-input-group">
1114
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1115
- <span class="pf-v5-c-text-input-group__text">
1116
- <span class="pf-v5-c-text-input-group__icon">
1117
- <i class="fas fa-fw fa-search"></i>
1118
- </span>
1119
- <input
1120
- class="pf-v5-c-text-input-group__text-input"
1121
- type="text"
1122
- placeholder="Filer by name"
1123
- value
1124
- aria-label="Search input"
1125
- />
1126
- </span>
1127
- </div>
1128
- </div>
1129
- </div>
1130
- <section class="pf-v5-c-app-launcher__group">
1131
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
1132
- <ul role="list">
1133
- <li
1134
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1135
- >
1136
- <a class="pf-v5-c-app-launcher__menu-item">
1137
- Link 1
1138
- <span
1139
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1140
- >
1141
- <i
1142
- class="fas fa-external-link-alt"
1143
- aria-hidden="true"
1144
- ></i>
1145
- </span>
1146
- <span
1147
- class="pf-v5-screen-reader"
1148
- >(opens new window)</span>
1149
- </a>
1150
- <button
1151
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1152
- type="button"
1153
- aria-label="Favorite"
1154
- >
1155
- <i class="fas fa-star" aria-hidden="true"></i>
1156
- </button>
1157
- </li>
1158
- <li
1159
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1160
- >
1161
- <a class="pf-v5-c-app-launcher__menu-item">
1162
- Link 2
1163
- <span
1164
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1165
- >
1166
- <i
1167
- class="fas fa-external-link-alt"
1168
- aria-hidden="true"
1169
- ></i>
1170
- </span>
1171
- <span
1172
- class="pf-v5-screen-reader"
1173
- >(opens new window)</span>
1174
- </a>
1175
- <button
1176
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1177
- type="button"
1178
- aria-label="Favorite"
1179
- >
1180
- <i class="fas fa-star" aria-hidden="true"></i>
1181
- </button>
1182
- </li>
1183
- </ul>
1184
- </section>
1185
- <hr class="pf-v5-c-divider" />
1186
- <section class="pf-v5-c-app-launcher__group">
1187
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
1188
- <ul role="list">
1189
- <li
1190
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1191
- >
1192
- <a class="pf-v5-c-app-launcher__menu-item">
1193
- Link 1
1194
- <span
1195
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1196
- >
1197
- <i
1198
- class="fas fa-external-link-alt"
1199
- aria-hidden="true"
1200
- ></i>
1201
- </span>
1202
- <span
1203
- class="pf-v5-screen-reader"
1204
- >(opens new window)</span>
1205
- </a>
1206
- <button
1207
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1208
- type="button"
1209
- aria-label="Favorite"
1210
- >
1211
- <i class="fas fa-star" aria-hidden="true"></i>
1212
- </button>
1213
- </li>
1214
- <li
1215
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1216
- >
1217
- <a class="pf-v5-c-app-launcher__menu-item">
1218
- Link 2
1219
- <span
1220
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1221
- >
1222
- <i
1223
- class="fas fa-external-link-alt"
1224
- aria-hidden="true"
1225
- ></i>
1226
- </span>
1227
- <span
1228
- class="pf-v5-screen-reader"
1229
- >(opens new window)</span>
1230
- </a>
1231
- <button
1232
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1233
- type="button"
1234
- aria-label="Favorite"
1235
- >
1236
- <i class="fas fa-star" aria-hidden="true"></i>
1237
- </button>
1238
- </li>
1239
- </ul>
1240
- </section>
1241
- </div>
1242
- </nav>
368
+ <i class="fas fa-th" aria-hidden="true"></i>
369
+ </button>
1243
370
  </div>
1244
371
  <div class="pf-v5-c-toolbar__item">
1245
- <div class="pf-v5-c-dropdown">
1246
- <button
1247
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1248
- id="description-list-in-drawer-example-masthead-settings-button"
1249
- aria-expanded="false"
1250
- type="button"
1251
- aria-label="Settings"
1252
- >
1253
- <i class="fas fa-cog" aria-hidden="true"></i>
1254
- </button>
1255
- <ul
1256
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1257
- aria-labelledby="description-list-in-drawer-example-masthead-settings-button"
1258
- hidden
1259
- >
1260
- <li>
1261
- <button
1262
- class="pf-v5-c-dropdown__menu-item"
1263
- type="button"
1264
- >Settings</button>
1265
- </li>
1266
- <li>
1267
- <button
1268
- class="pf-v5-c-dropdown__menu-item"
1269
- type="button"
1270
- >Use the beta release</button>
1271
- </li>
1272
- </ul>
1273
- </div>
372
+ <button
373
+ class="pf-v5-c-menu-toggle pf-m-plain"
374
+ type="button"
375
+ aria-expanded="false"
376
+ aria-label="Settings"
377
+ >
378
+ <i class="fas fa-cog" aria-hidden="true"></i>
379
+ </button>
1274
380
  </div>
1275
381
  <div class="pf-v5-c-toolbar__item">
1276
- <div class="pf-v5-c-dropdown">
1277
- <button
1278
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1279
- id="description-list-in-drawer-example-masthead-help-button"
1280
- aria-expanded="false"
1281
- type="button"
1282
- aria-label="Help"
1283
- >
1284
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1285
- </button>
1286
- <ul
1287
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1288
- aria-labelledby="description-list-in-drawer-example-masthead-help-button"
1289
- hidden
1290
- >
1291
- <li>
1292
- <button
1293
- class="pf-v5-c-dropdown__menu-item"
1294
- type="button"
1295
- >Support options</button>
1296
- </li>
1297
- <li>
1298
- <button
1299
- class="pf-v5-c-dropdown__menu-item"
1300
- type="button"
1301
- >Open support case</button>
1302
- </li>
1303
- <li>
1304
- <button
1305
- class="pf-v5-c-dropdown__menu-item"
1306
- type="button"
1307
- >API documentation</button>
1308
- </li>
1309
- </ul>
1310
- </div>
1311
- </div>
1312
- </div>
1313
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1314
- <div class="pf-v5-c-dropdown">
1315
382
  <button
1316
383
  class="pf-v5-c-menu-toggle pf-m-plain"
1317
384
  type="button"
1318
385
  aria-expanded="false"
1319
- aria-label="Actions"
386
+ aria-label="Help"
1320
387
  >
1321
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
388
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1322
389
  </button>
1323
- <div
1324
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
1325
- hidden
1326
- >
1327
- <div class="pf-v5-c-menu__content">
1328
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
1329
- <ul class="pf-v5-c-menu__list" role="menu">
1330
- <li
1331
- class="pf-v5-c-menu__list-item pf-m-disabled"
1332
- role="none"
1333
- >
1334
- <button
1335
- class="pf-v5-c-menu__item"
1336
- type="button"
1337
- disabled
1338
- role="menuitem"
1339
- >
1340
- <span class="pf-v5-c-menu__item-description">
1341
- <div class="pf-v5-u-font-size-sm">Username:</div>
1342
- <div class="pf-v5-u-font-size-md">ned_username</div>
1343
- </span>
1344
- </button>
1345
- </li>
1346
- <li
1347
- class="pf-v5-c-menu__list-item pf-m-disabled"
1348
- role="none"
1349
- >
1350
- <button
1351
- class="pf-v5-c-menu__item"
1352
- type="button"
1353
- disabled
1354
- role="menuitem"
1355
- >
1356
- <span class="pf-v5-c-menu__item-description">
1357
- <div
1358
- class="pf-v5-u-font-size-sm"
1359
- >Account number:</div>
1360
- <div class="pf-v5-u-font-size-md">123456789</div>
1361
- </span>
1362
- </button>
1363
- </li>
1364
- <li class="pf-v5-c-divider" role="separator"></li>
1365
- <li class="pf-v5-c-menu__list-item" role="none">
1366
- <button
1367
- class="pf-v5-c-menu__item"
1368
- type="button"
1369
- role="menuitem"
1370
- >
1371
- <span class="pf-v5-c-menu__item-main">
1372
- <span class="pf-v5-c-menu__item-text">My profile</span>
1373
- </span>
1374
- </button>
1375
- </li>
1376
- <li class="pf-v5-c-menu__list-item" role="none">
1377
- <button
1378
- class="pf-v5-c-menu__item"
1379
- type="button"
1380
- role="menuitem"
1381
- >
1382
- <span class="pf-v5-c-menu__item-main">
1383
- <span
1384
- class="pf-v5-c-menu__item-text"
1385
- >User management</span>
1386
- </span>
1387
- </button>
1388
- </li>
1389
- <li class="pf-v5-c-menu__list-item" role="none">
1390
- <button
1391
- class="pf-v5-c-menu__item"
1392
- type="button"
1393
- role="menuitem"
1394
- >
1395
- <span class="pf-v5-c-menu__item-main">
1396
- <span class="pf-v5-c-menu__item-text">Logout</span>
1397
- </span>
1398
- </button>
1399
- </li>
1400
- </ul>
1401
- </section>
1402
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
1403
- <section class="pf-v5-c-menu__group">
1404
- <ul class="pf-v5-c-menu__list" role="menu">
1405
- <li class="pf-v5-c-menu__list-item" role="none">
1406
- <button
1407
- class="pf-v5-c-menu__item"
1408
- type="button"
1409
- role="menuitem"
1410
- aria-expanded="false"
1411
- >
1412
- <span class="pf-v5-c-menu__item-main">
1413
- <span class="pf-v5-c-menu__item-icon">
1414
- <i
1415
- class="fas fa-fw fa-cog"
1416
- aria-hidden="true"
1417
- ></i>
1418
- </span>
1419
- <span class="pf-v5-c-menu__item-text">Settings</span>
1420
- <span class="pf-v5-c-menu__item-toggle-icon">
1421
- <i class="fas fa-angle-right"></i>
1422
- </span>
1423
- </span>
1424
- </button>
1425
- <div class="pf-v5-c-menu" hidden>
1426
- <div class="pf-v5-c-menu__content">
1427
- <ul class="pf-v5-c-menu__list" role="menu">
1428
- <li
1429
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1430
- role="none"
1431
- >
1432
- <button
1433
- class="pf-v5-c-menu__item"
1434
- type="button"
1435
- role="menuitem"
1436
- >
1437
- <span class="pf-v5-c-menu__item-main">
1438
- <span
1439
- class="pf-v5-c-menu__item-toggle-icon"
1440
- >
1441
- <i class="fas fa-angle-left"></i>
1442
- </span>
1443
- <span class="pf-v5-c-menu__item-icon">
1444
- <i
1445
- class="fas fa-fw fa-cog"
1446
- aria-hidden="true"
1447
- ></i>
1448
- </span>
1449
- <span
1450
- class="pf-v5-c-menu__item-text"
1451
- >Settings</span>
1452
- </span>
1453
- </button>
1454
- </li>
1455
- <li class="pf-v5-c-divider" role="separator"></li>
1456
- <li
1457
- class="pf-v5-c-menu__list-item"
1458
- role="none"
1459
- >
1460
- <a
1461
- class="pf-v5-c-menu__item"
1462
- href="#"
1463
- role="menuitem"
1464
- >
1465
- <span class="pf-v5-c-menu__item-main">
1466
- <span
1467
- class="pf-v5-c-menu__item-text"
1468
- >Customer support</span>
1469
- </span>
1470
- </a>
1471
- </li>
1472
- <li
1473
- class="pf-v5-c-menu__list-item"
1474
- role="none"
1475
- >
1476
- <a
1477
- class="pf-v5-c-menu__item"
1478
- href="#"
1479
- role="menuitem"
1480
- >
1481
- <span class="pf-v5-c-menu__item-main">
1482
- <span
1483
- class="pf-v5-c-menu__item-text"
1484
- >About</span>
1485
- </span>
1486
- </a>
1487
- </li>
1488
- </ul>
1489
- </div>
1490
- </div>
1491
- </li>
1492
-
1493
- <li class="pf-v5-c-menu__list-item" role="none">
1494
- <button
1495
- class="pf-v5-c-menu__item"
1496
- type="button"
1497
- role="menuitem"
1498
- aria-expanded="false"
1499
- >
1500
- <span class="pf-v5-c-menu__item-main">
1501
- <span class="pf-v5-c-menu__item-icon">
1502
- <i
1503
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1504
- aria-hidden="true"
1505
- ></i>
1506
- </span>
1507
- <span class="pf-v5-c-menu__item-text">Help</span>
1508
- <span class="pf-v5-c-menu__item-toggle-icon">
1509
- <i class="fas fa-angle-right"></i>
1510
- </span>
1511
- </span>
1512
- </button>
1513
- <div class="pf-v5-c-menu" hidden>
1514
- <div class="pf-v5-c-menu__content">
1515
- <ul class="pf-v5-c-menu__list" role="menu">
1516
- <li
1517
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1518
- role="none"
1519
- >
1520
- <button
1521
- class="pf-v5-c-menu__item"
1522
- type="button"
1523
- role="menuitem"
1524
- >
1525
- <span class="pf-v5-c-menu__item-main">
1526
- <span
1527
- class="pf-v5-c-menu__item-toggle-icon"
1528
- >
1529
- <i class="fas fa-angle-left"></i>
1530
- </span>
1531
- <span class="pf-v5-c-menu__item-icon">
1532
- <i
1533
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1534
- aria-hidden="true"
1535
- ></i>
1536
- </span>
1537
- <span
1538
- class="pf-v5-c-menu__item-text"
1539
- >Help</span>
1540
- </span>
1541
- </button>
1542
- </li>
1543
- <li class="pf-v5-c-divider" role="separator"></li>
1544
- <li
1545
- class="pf-v5-c-menu__list-item"
1546
- role="none"
1547
- >
1548
- <a
1549
- class="pf-v5-c-menu__item"
1550
- href="#"
1551
- role="menuitem"
1552
- >
1553
- <span class="pf-v5-c-menu__item-main">
1554
- <span
1555
- class="pf-v5-c-menu__item-text"
1556
- >Support options</span>
1557
- </span>
1558
- </a>
1559
- </li>
1560
- <li
1561
- class="pf-v5-c-menu__list-item"
1562
- role="none"
1563
- >
1564
- <a
1565
- class="pf-v5-c-menu__item"
1566
- href="#"
1567
- role="menuitem"
1568
- >
1569
- <span class="pf-v5-c-menu__item-main">
1570
- <span
1571
- class="pf-v5-c-menu__item-text"
1572
- >Open support case</span>
1573
- </span>
1574
- </a>
1575
- </li>
1576
- <li
1577
- class="pf-v5-c-menu__list-item"
1578
- role="none"
1579
- >
1580
- <a
1581
- class="pf-v5-c-menu__item"
1582
- href="#"
1583
- role="menuitem"
1584
- >
1585
- <span class="pf-v5-c-menu__item-main">
1586
- <span
1587
- class="pf-v5-c-menu__item-text"
1588
- >API documentation</span>
1589
- </span>
1590
- </a>
1591
- </li>
1592
- </ul>
1593
- </div>
1594
- </div>
1595
- </li>
1596
-
1597
- <li class="pf-v5-c-menu__list-item" role="none">
1598
- <button
1599
- class="pf-v5-c-menu__item"
1600
- type="button"
1601
- role="menuitem"
1602
- >
1603
- <span class="pf-v5-c-menu__item-main">
1604
- <span class="pf-v5-c-menu__item-icon">
1605
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
1606
- </span>
1607
- <span
1608
- class="pf-v5-c-menu__item-text"
1609
- >Application launcher</span>
1610
- <span class="pf-v5-c-menu__item-toggle-icon">
1611
- <i class="fas fa-angle-right"></i>
1612
- </span>
1613
- </span>
1614
- </button>
1615
- <div class="pf-v5-c-menu" hidden>
1616
- <div class="pf-v5-c-menu__header">
1617
- <button
1618
- class="pf-v5-c-menu__item"
1619
- type="button"
1620
- role="menuitem"
1621
- >
1622
- <span class="pf-v5-c-menu__item-main">
1623
- <span
1624
- class="pf-v5-c-menu__item-toggle-icon"
1625
- >
1626
- <i class="fas fa-angle-left"></i>
1627
- </span>
1628
- <span class="pf-v5-c-menu__item-icon">
1629
- <i
1630
- class="fas fa-fw fa-th"
1631
- aria-hidden="true"
1632
- ></i>
1633
- </span>
1634
- <span
1635
- class="pf-v5-c-menu__item-text"
1636
- >Application launcher</span>
1637
- </span>
1638
- </button>
1639
- </div>
1640
- <div class="pf-v5-c-menu__search">
1641
- <div class="pf-v5-c-menu__search-input">
1642
- <div class="pf-v5-c-text-input-group">
1643
- <div
1644
- class="pf-v5-c-text-input-group__main pf-m-icon"
1645
- >
1646
- <span
1647
- class="pf-v5-c-text-input-group__text"
1648
- >
1649
- <span
1650
- class="pf-v5-c-text-input-group__icon"
1651
- >
1652
- <i class="fas fa-fw fa-search"></i>
1653
- </span>
1654
- <input
1655
- class="pf-v5-c-text-input-group__text-input"
1656
- type="text"
1657
- placeholder="Search"
1658
- value
1659
- aria-label="Search input"
1660
- />
1661
- </span>
1662
- </div>
1663
- </div>
1664
- </div>
1665
- </div>
1666
- <hr class="pf-v5-c-divider" />
1667
- <section class="pf-v5-c-menu__group">
1668
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
1669
- <ul class="pf-v5-c-menu__list" role="menu">
1670
- <li
1671
- class="pf-v5-c-menu__list-item"
1672
- role="none"
1673
- >
1674
- <a
1675
- class="pf-v5-c-menu__item"
1676
- href="#"
1677
- role="menuitem"
1678
- >
1679
- <span class="pf-v5-c-menu__item-main">
1680
- <span
1681
- class="pf-v5-c-menu__item-text"
1682
- >Link 1</span>
1683
- </span>
1684
- </a>
1685
- <button
1686
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1687
- type="button"
1688
- aria-label="Starred"
1689
- >
1690
- <span
1691
- class="pf-v5-c-menu__item-action-icon"
1692
- >
1693
- <i
1694
- class="fas fa-star"
1695
- aria-hidden="true"
1696
- ></i>
1697
- </span>
1698
- </button>
1699
- </li>
1700
- <li
1701
- class="pf-v5-c-menu__list-item"
1702
- role="none"
1703
- >
1704
- <a
1705
- class="pf-v5-c-menu__item"
1706
- href="#"
1707
- role="menuitem"
1708
- target="_blank"
1709
- >
1710
- <span class="pf-v5-c-menu__item-main">
1711
- <span
1712
- class="pf-v5-c-menu__item-text"
1713
- >Link 2</span>
1714
- <span
1715
- class="pf-v5-c-menu__item-external-icon"
1716
- >
1717
- <i
1718
- class="fas fa-external-link-alt"
1719
- aria-hidden="true"
1720
- ></i>
1721
- </span>
1722
- <span
1723
- class="pf-v5-screen-reader"
1724
- >(opens new window)</span>
1725
- </span>
1726
- </a>
1727
- <button
1728
- class="pf-v5-c-menu__item-action pf-m-favorite"
1729
- type="button"
1730
- aria-label="Not starred"
1731
- >
1732
- <span
1733
- class="pf-v5-c-menu__item-action-icon"
1734
- >
1735
- <i
1736
- class="fas fa-star"
1737
- aria-hidden="true"
1738
- ></i>
1739
- </span>
1740
- </button>
1741
- </li>
1742
- </ul>
1743
- </section>
1744
- <hr class="pf-v5-c-divider" />
1745
- <section class="pf-v5-c-menu__group">
1746
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
1747
- <ul class="pf-v5-c-menu__list" role="menu">
1748
- <li
1749
- class="pf-v5-c-menu__list-item"
1750
- role="none"
1751
- >
1752
- <a
1753
- class="pf-v5-c-menu__item"
1754
- href="#"
1755
- role="menuitem"
1756
- >
1757
- <span class="pf-v5-c-menu__item-main">
1758
- <span
1759
- class="pf-v5-c-menu__item-text"
1760
- >Link 1</span>
1761
- </span>
1762
- </a>
1763
- <button
1764
- class="pf-v5-c-menu__item-action pf-m-favorite"
1765
- type="button"
1766
- aria-label="Not starred"
1767
- >
1768
- <span
1769
- class="pf-v5-c-menu__item-action-icon"
1770
- >
1771
- <i
1772
- class="fas fa-star"
1773
- aria-hidden="true"
1774
- ></i>
1775
- </span>
1776
- </button>
1777
- </li>
1778
- <li
1779
- class="pf-v5-c-menu__list-item"
1780
- role="none"
1781
- >
1782
- <a
1783
- class="pf-v5-c-menu__item"
1784
- href="#"
1785
- role="menuitem"
1786
- target="_blank"
1787
- >
1788
- <span class="pf-v5-c-menu__item-main">
1789
- <span
1790
- class="pf-v5-c-menu__item-text"
1791
- >Link 2</span>
1792
- <span
1793
- class="pf-v5-c-menu__item-external-icon"
1794
- >
1795
- <i
1796
- class="fas fa-external-link-alt"
1797
- aria-hidden="true"
1798
- ></i>
1799
- </span>
1800
- <span
1801
- class="pf-v5-screen-reader"
1802
- >(opens new window)</span>
1803
- </span>
1804
- </a>
1805
- <button
1806
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1807
- type="button"
1808
- aria-label="Starred"
1809
- >
1810
- <span
1811
- class="pf-v5-c-menu__item-action-icon"
1812
- >
1813
- <i
1814
- class="fas fa-star"
1815
- aria-hidden="true"
1816
- ></i>
1817
- </span>
1818
- </button>
1819
- </li>
1820
- </ul>
1821
- </section>
1822
- </div>
1823
- </li>
1824
- </ul>
1825
- </section>
1826
- </div>
1827
- </div>
1828
390
  </div>
1829
391
  </div>
1830
- </div>
1831
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1832
- <div
1833
- class="pf-v5-c-dropdown pf-m-full-height"
1834
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
1835
- >
392
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1836
393
  <button
1837
- class="pf-v5-c-dropdown__toggle"
1838
- id="description-list-in-drawer-example-masthead-profile-button"
1839
- aria-expanded="false"
394
+ class="pf-v5-c-menu-toggle pf-m-plain"
1840
395
  type="button"
396
+ aria-expanded="false"
397
+ aria-label="Actions"
1841
398
  >
1842
- <span class="pf-v5-c-dropdown__toggle-image">
1843
- <img
1844
- class="pf-v5-c-avatar"
1845
- alt="Avatar image"
1846
- src="/assets/images/img_avatar-light.svg"
1847
- />
1848
- </span>
1849
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
1850
- <span class="pf-v5-c-dropdown__toggle-icon">
1851
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1852
- </span>
399
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1853
400
  </button>
1854
- <div class="pf-v5-c-dropdown__menu" hidden>
1855
- <section class="pf-v5-c-dropdown__group">
1856
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1857
- <div class="pf-v5-u-font-size-sm">Account number:</div>
1858
- <div>123456789</div>
1859
- </div>
1860
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1861
- <div class="pf-v5-u-font-size-sm">Username:</div>
1862
- <div>mshaksho@redhat.com</div>
1863
- </div>
1864
- </section>
1865
- <hr class="pf-v5-c-divider" />
1866
- <section class="pf-v5-c-dropdown__group">
1867
- <ul>
1868
- <li>
1869
- <a
1870
- class="pf-v5-c-dropdown__menu-item"
1871
- href="#"
1872
- >My profile</a>
1873
- </li>
1874
- <li>
1875
- <a
1876
- class="pf-v5-c-dropdown__menu-item"
1877
- href="#"
1878
- >User management</a>
1879
- </li>
1880
- <li>
1881
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
1882
- </li>
1883
- </ul>
1884
- </section>
1885
- </div>
1886
401
  </div>
1887
402
  </div>
403
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
404
+ <button
405
+ class="pf-v5-c-menu-toggle pf-m-full-height"
406
+ type="button"
407
+ aria-expanded="false"
408
+ >
409
+ <span class="pf-v5-c-menu-toggle__icon">
410
+ <img
411
+ class="pf-v5-c-avatar"
412
+ alt="Avatar image"
413
+ src="/assets/images/img_avatar-light.svg"
414
+ />
415
+ </span>
416
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
417
+ <span class="pf-v5-c-menu-toggle__controls">
418
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
419
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
420
+ </span>
421
+ </span>
422
+ </button>
423
+ </div>
1888
424
  </div>
1889
425
  </div>
1890
426
  </div>
@@ -2430,800 +966,68 @@ cssPrefix: pf-d-description-list
2430
966
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2431
967
  >
2432
968
  <div class="pf-v5-c-toolbar__item">
2433
- <nav
2434
- class="pf-v5-c-app-launcher"
969
+ <button
970
+ class="pf-v5-c-menu-toggle pf-m-plain"
971
+ type="button"
972
+ aria-expanded="false"
2435
973
  aria-label="Application launcher"
2436
- id="description-list-complex-content-example-masthead-application-launcher"
2437
974
  >
2438
- <button
2439
- class="pf-v5-c-app-launcher__toggle"
2440
- type="button"
2441
- id="description-list-complex-content-example-masthead-application-launcher-button"
2442
- aria-expanded="false"
2443
- aria-label="Application launcher"
2444
- >
2445
- <i class="fas fa-th" aria-hidden="true"></i>
2446
- </button>
2447
- <div
2448
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
2449
- hidden
2450
- >
2451
- <div class="pf-v5-c-app-launcher__menu-search">
2452
- <div class="pf-v5-c-text-input-group">
2453
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2454
- <span class="pf-v5-c-text-input-group__text">
2455
- <span class="pf-v5-c-text-input-group__icon">
2456
- <i class="fas fa-fw fa-search"></i>
2457
- </span>
2458
- <input
2459
- class="pf-v5-c-text-input-group__text-input"
2460
- type="text"
2461
- placeholder="Filer by name"
2462
- value
2463
- aria-label="Search input"
2464
- />
2465
- </span>
2466
- </div>
2467
- </div>
2468
- </div>
2469
- <section class="pf-v5-c-app-launcher__group">
2470
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
2471
- <ul role="list">
2472
- <li
2473
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2474
- >
2475
- <a class="pf-v5-c-app-launcher__menu-item">
2476
- Link 1
2477
- <span
2478
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2479
- >
2480
- <i
2481
- class="fas fa-external-link-alt"
2482
- aria-hidden="true"
2483
- ></i>
2484
- </span>
2485
- <span
2486
- class="pf-v5-screen-reader"
2487
- >(opens new window)</span>
2488
- </a>
2489
- <button
2490
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2491
- type="button"
2492
- aria-label="Favorite"
2493
- >
2494
- <i class="fas fa-star" aria-hidden="true"></i>
2495
- </button>
2496
- </li>
2497
- <li
2498
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2499
- >
2500
- <a class="pf-v5-c-app-launcher__menu-item">
2501
- Link 2
2502
- <span
2503
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2504
- >
2505
- <i
2506
- class="fas fa-external-link-alt"
2507
- aria-hidden="true"
2508
- ></i>
2509
- </span>
2510
- <span
2511
- class="pf-v5-screen-reader"
2512
- >(opens new window)</span>
2513
- </a>
2514
- <button
2515
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2516
- type="button"
2517
- aria-label="Favorite"
2518
- >
2519
- <i class="fas fa-star" aria-hidden="true"></i>
2520
- </button>
2521
- </li>
2522
- </ul>
2523
- </section>
2524
- <hr class="pf-v5-c-divider" />
2525
- <section class="pf-v5-c-app-launcher__group">
2526
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
2527
- <ul role="list">
2528
- <li
2529
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2530
- >
2531
- <a class="pf-v5-c-app-launcher__menu-item">
2532
- Link 1
2533
- <span
2534
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2535
- >
2536
- <i
2537
- class="fas fa-external-link-alt"
2538
- aria-hidden="true"
2539
- ></i>
2540
- </span>
2541
- <span
2542
- class="pf-v5-screen-reader"
2543
- >(opens new window)</span>
2544
- </a>
2545
- <button
2546
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2547
- type="button"
2548
- aria-label="Favorite"
2549
- >
2550
- <i class="fas fa-star" aria-hidden="true"></i>
2551
- </button>
2552
- </li>
2553
- <li
2554
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2555
- >
2556
- <a class="pf-v5-c-app-launcher__menu-item">
2557
- Link 2
2558
- <span
2559
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2560
- >
2561
- <i
2562
- class="fas fa-external-link-alt"
2563
- aria-hidden="true"
2564
- ></i>
2565
- </span>
2566
- <span
2567
- class="pf-v5-screen-reader"
2568
- >(opens new window)</span>
2569
- </a>
2570
- <button
2571
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2572
- type="button"
2573
- aria-label="Favorite"
2574
- >
2575
- <i class="fas fa-star" aria-hidden="true"></i>
2576
- </button>
2577
- </li>
2578
- </ul>
2579
- </section>
2580
- </div>
2581
- </nav>
975
+ <i class="fas fa-th" aria-hidden="true"></i>
976
+ </button>
2582
977
  </div>
2583
978
  <div class="pf-v5-c-toolbar__item">
2584
- <div class="pf-v5-c-dropdown">
2585
- <button
2586
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2587
- id="description-list-complex-content-example-masthead-settings-button"
2588
- aria-expanded="false"
2589
- type="button"
2590
- aria-label="Settings"
2591
- >
2592
- <i class="fas fa-cog" aria-hidden="true"></i>
2593
- </button>
2594
- <ul
2595
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2596
- aria-labelledby="description-list-complex-content-example-masthead-settings-button"
2597
- hidden
2598
- >
2599
- <li>
2600
- <button
2601
- class="pf-v5-c-dropdown__menu-item"
2602
- type="button"
2603
- >Settings</button>
2604
- </li>
2605
- <li>
2606
- <button
2607
- class="pf-v5-c-dropdown__menu-item"
2608
- type="button"
2609
- >Use the beta release</button>
2610
- </li>
2611
- </ul>
2612
- </div>
979
+ <button
980
+ class="pf-v5-c-menu-toggle pf-m-plain"
981
+ type="button"
982
+ aria-expanded="false"
983
+ aria-label="Settings"
984
+ >
985
+ <i class="fas fa-cog" aria-hidden="true"></i>
986
+ </button>
2613
987
  </div>
2614
988
  <div class="pf-v5-c-toolbar__item">
2615
- <div class="pf-v5-c-dropdown">
2616
- <button
2617
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2618
- id="description-list-complex-content-example-masthead-help-button"
2619
- aria-expanded="false"
2620
- type="button"
2621
- aria-label="Help"
2622
- >
2623
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2624
- </button>
2625
- <ul
2626
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2627
- aria-labelledby="description-list-complex-content-example-masthead-help-button"
2628
- hidden
2629
- >
2630
- <li>
2631
- <button
2632
- class="pf-v5-c-dropdown__menu-item"
2633
- type="button"
2634
- >Support options</button>
2635
- </li>
2636
- <li>
2637
- <button
2638
- class="pf-v5-c-dropdown__menu-item"
2639
- type="button"
2640
- >Open support case</button>
2641
- </li>
2642
- <li>
2643
- <button
2644
- class="pf-v5-c-dropdown__menu-item"
2645
- type="button"
2646
- >API documentation</button>
2647
- </li>
2648
- </ul>
2649
- </div>
2650
- </div>
2651
- </div>
2652
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2653
- <div class="pf-v5-c-dropdown">
2654
989
  <button
2655
990
  class="pf-v5-c-menu-toggle pf-m-plain"
2656
991
  type="button"
2657
992
  aria-expanded="false"
2658
- aria-label="Actions"
993
+ aria-label="Help"
2659
994
  >
2660
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
995
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2661
996
  </button>
2662
- <div
2663
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
2664
- hidden
2665
- >
2666
- <div class="pf-v5-c-menu__content">
2667
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
2668
- <ul class="pf-v5-c-menu__list" role="menu">
2669
- <li
2670
- class="pf-v5-c-menu__list-item pf-m-disabled"
2671
- role="none"
2672
- >
2673
- <button
2674
- class="pf-v5-c-menu__item"
2675
- type="button"
2676
- disabled
2677
- role="menuitem"
2678
- >
2679
- <span class="pf-v5-c-menu__item-description">
2680
- <div class="pf-v5-u-font-size-sm">Username:</div>
2681
- <div class="pf-v5-u-font-size-md">ned_username</div>
2682
- </span>
2683
- </button>
2684
- </li>
2685
- <li
2686
- class="pf-v5-c-menu__list-item pf-m-disabled"
2687
- role="none"
2688
- >
2689
- <button
2690
- class="pf-v5-c-menu__item"
2691
- type="button"
2692
- disabled
2693
- role="menuitem"
2694
- >
2695
- <span class="pf-v5-c-menu__item-description">
2696
- <div
2697
- class="pf-v5-u-font-size-sm"
2698
- >Account number:</div>
2699
- <div class="pf-v5-u-font-size-md">123456789</div>
2700
- </span>
2701
- </button>
2702
- </li>
2703
- <li class="pf-v5-c-divider" role="separator"></li>
2704
- <li class="pf-v5-c-menu__list-item" role="none">
2705
- <button
2706
- class="pf-v5-c-menu__item"
2707
- type="button"
2708
- role="menuitem"
2709
- >
2710
- <span class="pf-v5-c-menu__item-main">
2711
- <span class="pf-v5-c-menu__item-text">My profile</span>
2712
- </span>
2713
- </button>
2714
- </li>
2715
- <li class="pf-v5-c-menu__list-item" role="none">
2716
- <button
2717
- class="pf-v5-c-menu__item"
2718
- type="button"
2719
- role="menuitem"
2720
- >
2721
- <span class="pf-v5-c-menu__item-main">
2722
- <span
2723
- class="pf-v5-c-menu__item-text"
2724
- >User management</span>
2725
- </span>
2726
- </button>
2727
- </li>
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-text">Logout</span>
2736
- </span>
2737
- </button>
2738
- </li>
2739
- </ul>
2740
- </section>
2741
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
2742
- <section class="pf-v5-c-menu__group">
2743
- <ul class="pf-v5-c-menu__list" role="menu">
2744
- <li class="pf-v5-c-menu__list-item" role="none">
2745
- <button
2746
- class="pf-v5-c-menu__item"
2747
- type="button"
2748
- role="menuitem"
2749
- aria-expanded="false"
2750
- >
2751
- <span class="pf-v5-c-menu__item-main">
2752
- <span class="pf-v5-c-menu__item-icon">
2753
- <i
2754
- class="fas fa-fw fa-cog"
2755
- aria-hidden="true"
2756
- ></i>
2757
- </span>
2758
- <span class="pf-v5-c-menu__item-text">Settings</span>
2759
- <span class="pf-v5-c-menu__item-toggle-icon">
2760
- <i class="fas fa-angle-right"></i>
2761
- </span>
2762
- </span>
2763
- </button>
2764
- <div class="pf-v5-c-menu" hidden>
2765
- <div class="pf-v5-c-menu__content">
2766
- <ul class="pf-v5-c-menu__list" role="menu">
2767
- <li
2768
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2769
- role="none"
2770
- >
2771
- <button
2772
- class="pf-v5-c-menu__item"
2773
- type="button"
2774
- role="menuitem"
2775
- >
2776
- <span class="pf-v5-c-menu__item-main">
2777
- <span
2778
- class="pf-v5-c-menu__item-toggle-icon"
2779
- >
2780
- <i class="fas fa-angle-left"></i>
2781
- </span>
2782
- <span class="pf-v5-c-menu__item-icon">
2783
- <i
2784
- class="fas fa-fw fa-cog"
2785
- aria-hidden="true"
2786
- ></i>
2787
- </span>
2788
- <span
2789
- class="pf-v5-c-menu__item-text"
2790
- >Settings</span>
2791
- </span>
2792
- </button>
2793
- </li>
2794
- <li class="pf-v5-c-divider" role="separator"></li>
2795
- <li
2796
- class="pf-v5-c-menu__list-item"
2797
- role="none"
2798
- >
2799
- <a
2800
- class="pf-v5-c-menu__item"
2801
- href="#"
2802
- role="menuitem"
2803
- >
2804
- <span class="pf-v5-c-menu__item-main">
2805
- <span
2806
- class="pf-v5-c-menu__item-text"
2807
- >Customer support</span>
2808
- </span>
2809
- </a>
2810
- </li>
2811
- <li
2812
- class="pf-v5-c-menu__list-item"
2813
- role="none"
2814
- >
2815
- <a
2816
- class="pf-v5-c-menu__item"
2817
- href="#"
2818
- role="menuitem"
2819
- >
2820
- <span class="pf-v5-c-menu__item-main">
2821
- <span
2822
- class="pf-v5-c-menu__item-text"
2823
- >About</span>
2824
- </span>
2825
- </a>
2826
- </li>
2827
- </ul>
2828
- </div>
2829
- </div>
2830
- </li>
2831
-
2832
- <li class="pf-v5-c-menu__list-item" role="none">
2833
- <button
2834
- class="pf-v5-c-menu__item"
2835
- type="button"
2836
- role="menuitem"
2837
- aria-expanded="false"
2838
- >
2839
- <span class="pf-v5-c-menu__item-main">
2840
- <span class="pf-v5-c-menu__item-icon">
2841
- <i
2842
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2843
- aria-hidden="true"
2844
- ></i>
2845
- </span>
2846
- <span class="pf-v5-c-menu__item-text">Help</span>
2847
- <span class="pf-v5-c-menu__item-toggle-icon">
2848
- <i class="fas fa-angle-right"></i>
2849
- </span>
2850
- </span>
2851
- </button>
2852
- <div class="pf-v5-c-menu" hidden>
2853
- <div class="pf-v5-c-menu__content">
2854
- <ul class="pf-v5-c-menu__list" role="menu">
2855
- <li
2856
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2857
- role="none"
2858
- >
2859
- <button
2860
- class="pf-v5-c-menu__item"
2861
- type="button"
2862
- role="menuitem"
2863
- >
2864
- <span class="pf-v5-c-menu__item-main">
2865
- <span
2866
- class="pf-v5-c-menu__item-toggle-icon"
2867
- >
2868
- <i class="fas fa-angle-left"></i>
2869
- </span>
2870
- <span class="pf-v5-c-menu__item-icon">
2871
- <i
2872
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2873
- aria-hidden="true"
2874
- ></i>
2875
- </span>
2876
- <span
2877
- class="pf-v5-c-menu__item-text"
2878
- >Help</span>
2879
- </span>
2880
- </button>
2881
- </li>
2882
- <li class="pf-v5-c-divider" role="separator"></li>
2883
- <li
2884
- class="pf-v5-c-menu__list-item"
2885
- role="none"
2886
- >
2887
- <a
2888
- class="pf-v5-c-menu__item"
2889
- href="#"
2890
- role="menuitem"
2891
- >
2892
- <span class="pf-v5-c-menu__item-main">
2893
- <span
2894
- class="pf-v5-c-menu__item-text"
2895
- >Support options</span>
2896
- </span>
2897
- </a>
2898
- </li>
2899
- <li
2900
- class="pf-v5-c-menu__list-item"
2901
- role="none"
2902
- >
2903
- <a
2904
- class="pf-v5-c-menu__item"
2905
- href="#"
2906
- role="menuitem"
2907
- >
2908
- <span class="pf-v5-c-menu__item-main">
2909
- <span
2910
- class="pf-v5-c-menu__item-text"
2911
- >Open support case</span>
2912
- </span>
2913
- </a>
2914
- </li>
2915
- <li
2916
- class="pf-v5-c-menu__list-item"
2917
- role="none"
2918
- >
2919
- <a
2920
- class="pf-v5-c-menu__item"
2921
- href="#"
2922
- role="menuitem"
2923
- >
2924
- <span class="pf-v5-c-menu__item-main">
2925
- <span
2926
- class="pf-v5-c-menu__item-text"
2927
- >API documentation</span>
2928
- </span>
2929
- </a>
2930
- </li>
2931
- </ul>
2932
- </div>
2933
- </div>
2934
- </li>
2935
-
2936
- <li class="pf-v5-c-menu__list-item" role="none">
2937
- <button
2938
- class="pf-v5-c-menu__item"
2939
- type="button"
2940
- role="menuitem"
2941
- >
2942
- <span class="pf-v5-c-menu__item-main">
2943
- <span class="pf-v5-c-menu__item-icon">
2944
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2945
- </span>
2946
- <span
2947
- class="pf-v5-c-menu__item-text"
2948
- >Application launcher</span>
2949
- <span class="pf-v5-c-menu__item-toggle-icon">
2950
- <i class="fas fa-angle-right"></i>
2951
- </span>
2952
- </span>
2953
- </button>
2954
- <div class="pf-v5-c-menu" hidden>
2955
- <div class="pf-v5-c-menu__header">
2956
- <button
2957
- class="pf-v5-c-menu__item"
2958
- type="button"
2959
- role="menuitem"
2960
- >
2961
- <span class="pf-v5-c-menu__item-main">
2962
- <span
2963
- class="pf-v5-c-menu__item-toggle-icon"
2964
- >
2965
- <i class="fas fa-angle-left"></i>
2966
- </span>
2967
- <span class="pf-v5-c-menu__item-icon">
2968
- <i
2969
- class="fas fa-fw fa-th"
2970
- aria-hidden="true"
2971
- ></i>
2972
- </span>
2973
- <span
2974
- class="pf-v5-c-menu__item-text"
2975
- >Application launcher</span>
2976
- </span>
2977
- </button>
2978
- </div>
2979
- <div class="pf-v5-c-menu__search">
2980
- <div class="pf-v5-c-menu__search-input">
2981
- <div class="pf-v5-c-text-input-group">
2982
- <div
2983
- class="pf-v5-c-text-input-group__main pf-m-icon"
2984
- >
2985
- <span
2986
- class="pf-v5-c-text-input-group__text"
2987
- >
2988
- <span
2989
- class="pf-v5-c-text-input-group__icon"
2990
- >
2991
- <i class="fas fa-fw fa-search"></i>
2992
- </span>
2993
- <input
2994
- class="pf-v5-c-text-input-group__text-input"
2995
- type="text"
2996
- placeholder="Search"
2997
- value
2998
- aria-label="Search input"
2999
- />
3000
- </span>
3001
- </div>
3002
- </div>
3003
- </div>
3004
- </div>
3005
- <hr class="pf-v5-c-divider" />
3006
- <section class="pf-v5-c-menu__group">
3007
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
3008
- <ul class="pf-v5-c-menu__list" role="menu">
3009
- <li
3010
- class="pf-v5-c-menu__list-item"
3011
- role="none"
3012
- >
3013
- <a
3014
- class="pf-v5-c-menu__item"
3015
- href="#"
3016
- role="menuitem"
3017
- >
3018
- <span class="pf-v5-c-menu__item-main">
3019
- <span
3020
- class="pf-v5-c-menu__item-text"
3021
- >Link 1</span>
3022
- </span>
3023
- </a>
3024
- <button
3025
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3026
- type="button"
3027
- aria-label="Starred"
3028
- >
3029
- <span
3030
- class="pf-v5-c-menu__item-action-icon"
3031
- >
3032
- <i
3033
- class="fas fa-star"
3034
- aria-hidden="true"
3035
- ></i>
3036
- </span>
3037
- </button>
3038
- </li>
3039
- <li
3040
- class="pf-v5-c-menu__list-item"
3041
- role="none"
3042
- >
3043
- <a
3044
- class="pf-v5-c-menu__item"
3045
- href="#"
3046
- role="menuitem"
3047
- target="_blank"
3048
- >
3049
- <span class="pf-v5-c-menu__item-main">
3050
- <span
3051
- class="pf-v5-c-menu__item-text"
3052
- >Link 2</span>
3053
- <span
3054
- class="pf-v5-c-menu__item-external-icon"
3055
- >
3056
- <i
3057
- class="fas fa-external-link-alt"
3058
- aria-hidden="true"
3059
- ></i>
3060
- </span>
3061
- <span
3062
- class="pf-v5-screen-reader"
3063
- >(opens new window)</span>
3064
- </span>
3065
- </a>
3066
- <button
3067
- class="pf-v5-c-menu__item-action pf-m-favorite"
3068
- type="button"
3069
- aria-label="Not starred"
3070
- >
3071
- <span
3072
- class="pf-v5-c-menu__item-action-icon"
3073
- >
3074
- <i
3075
- class="fas fa-star"
3076
- aria-hidden="true"
3077
- ></i>
3078
- </span>
3079
- </button>
3080
- </li>
3081
- </ul>
3082
- </section>
3083
- <hr class="pf-v5-c-divider" />
3084
- <section class="pf-v5-c-menu__group">
3085
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
3086
- <ul class="pf-v5-c-menu__list" role="menu">
3087
- <li
3088
- class="pf-v5-c-menu__list-item"
3089
- role="none"
3090
- >
3091
- <a
3092
- class="pf-v5-c-menu__item"
3093
- href="#"
3094
- role="menuitem"
3095
- >
3096
- <span class="pf-v5-c-menu__item-main">
3097
- <span
3098
- class="pf-v5-c-menu__item-text"
3099
- >Link 1</span>
3100
- </span>
3101
- </a>
3102
- <button
3103
- class="pf-v5-c-menu__item-action pf-m-favorite"
3104
- type="button"
3105
- aria-label="Not starred"
3106
- >
3107
- <span
3108
- class="pf-v5-c-menu__item-action-icon"
3109
- >
3110
- <i
3111
- class="fas fa-star"
3112
- aria-hidden="true"
3113
- ></i>
3114
- </span>
3115
- </button>
3116
- </li>
3117
- <li
3118
- class="pf-v5-c-menu__list-item"
3119
- role="none"
3120
- >
3121
- <a
3122
- class="pf-v5-c-menu__item"
3123
- href="#"
3124
- role="menuitem"
3125
- target="_blank"
3126
- >
3127
- <span class="pf-v5-c-menu__item-main">
3128
- <span
3129
- class="pf-v5-c-menu__item-text"
3130
- >Link 2</span>
3131
- <span
3132
- class="pf-v5-c-menu__item-external-icon"
3133
- >
3134
- <i
3135
- class="fas fa-external-link-alt"
3136
- aria-hidden="true"
3137
- ></i>
3138
- </span>
3139
- <span
3140
- class="pf-v5-screen-reader"
3141
- >(opens new window)</span>
3142
- </span>
3143
- </a>
3144
- <button
3145
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3146
- type="button"
3147
- aria-label="Starred"
3148
- >
3149
- <span
3150
- class="pf-v5-c-menu__item-action-icon"
3151
- >
3152
- <i
3153
- class="fas fa-star"
3154
- aria-hidden="true"
3155
- ></i>
3156
- </span>
3157
- </button>
3158
- </li>
3159
- </ul>
3160
- </section>
3161
- </div>
3162
- </li>
3163
- </ul>
3164
- </section>
3165
- </div>
3166
- </div>
3167
997
  </div>
3168
998
  </div>
3169
- </div>
3170
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3171
- <div
3172
- class="pf-v5-c-dropdown pf-m-full-height"
3173
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
3174
- >
999
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3175
1000
  <button
3176
- class="pf-v5-c-dropdown__toggle"
3177
- id="description-list-complex-content-example-masthead-profile-button"
3178
- aria-expanded="false"
1001
+ class="pf-v5-c-menu-toggle pf-m-plain"
3179
1002
  type="button"
1003
+ aria-expanded="false"
1004
+ aria-label="Actions"
3180
1005
  >
3181
- <span class="pf-v5-c-dropdown__toggle-image">
3182
- <img
3183
- class="pf-v5-c-avatar"
3184
- alt="Avatar image"
3185
- src="/assets/images/img_avatar-light.svg"
3186
- />
3187
- </span>
3188
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
3189
- <span class="pf-v5-c-dropdown__toggle-icon">
3190
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3191
- </span>
1006
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3192
1007
  </button>
3193
- <div class="pf-v5-c-dropdown__menu" hidden>
3194
- <section class="pf-v5-c-dropdown__group">
3195
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3196
- <div class="pf-v5-u-font-size-sm">Account number:</div>
3197
- <div>123456789</div>
3198
- </div>
3199
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3200
- <div class="pf-v5-u-font-size-sm">Username:</div>
3201
- <div>mshaksho@redhat.com</div>
3202
- </div>
3203
- </section>
3204
- <hr class="pf-v5-c-divider" />
3205
- <section class="pf-v5-c-dropdown__group">
3206
- <ul>
3207
- <li>
3208
- <a
3209
- class="pf-v5-c-dropdown__menu-item"
3210
- href="#"
3211
- >My profile</a>
3212
- </li>
3213
- <li>
3214
- <a
3215
- class="pf-v5-c-dropdown__menu-item"
3216
- href="#"
3217
- >User management</a>
3218
- </li>
3219
- <li>
3220
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
3221
- </li>
3222
- </ul>
3223
- </section>
3224
- </div>
3225
1008
  </div>
3226
1009
  </div>
1010
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1011
+ <button
1012
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1013
+ type="button"
1014
+ aria-expanded="false"
1015
+ >
1016
+ <span class="pf-v5-c-menu-toggle__icon">
1017
+ <img
1018
+ class="pf-v5-c-avatar"
1019
+ alt="Avatar image"
1020
+ src="/assets/images/img_avatar-light.svg"
1021
+ />
1022
+ </span>
1023
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1024
+ <span class="pf-v5-c-menu-toggle__controls">
1025
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1026
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1027
+ </span>
1028
+ </span>
1029
+ </button>
1030
+ </div>
3227
1031
  </div>
3228
1032
  </div>
3229
1033
  </div>