@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/Dashboard/examples/Dashboard.md CHANGED
@@ -56,800 +56,68 @@ cssPrefix: pf-d-dashboard
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="dashboard-demo-masthead-application-launcher"
63
64
  >
64
- <button
65
- class="pf-v5-c-app-launcher__toggle"
66
- type="button"
67
- id="dashboard-demo-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="dashboard-demo-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="dashboard-demo-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="dashboard-demo-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="dashboard-demo-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="dashboard-demo-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>