@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.3

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 (45) 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-variables.css +0 -6
  5. package/components/CalendarMonth/calendar-month.css +3 -0
  6. package/components/CalendarMonth/calendar-month.scss +2 -0
  7. package/components/CalendarMonth/themes/dark/calendar-month.scss +4 -0
  8. package/components/Masthead/masthead.css +2 -6
  9. package/components/Masthead/masthead.scss +1 -7
  10. package/components/Masthead/themes/dark/masthead.scss +1 -0
  11. package/components/MenuToggle/menu-toggle.css +13 -11
  12. package/components/MenuToggle/menu-toggle.scss +14 -12
  13. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  14. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  15. package/docs/demos/Alert/examples/Alert.md +126 -2322
  16. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  17. package/docs/demos/Banner/examples/Banner.md +84 -1588
  18. package/docs/demos/CardView/examples/CardView.md +42 -774
  19. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  20. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  21. package/docs/demos/DataList/examples/DataList.md +191 -3119
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  23. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  24. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  25. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  26. package/docs/demos/Modal/examples/Modal.md +252 -4644
  27. package/docs/demos/Nav/examples/Nav.md +336 -6192
  28. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  29. package/docs/demos/Page/examples/Page.md +378 -6966
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  31. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  32. package/docs/demos/Table/examples/Table.md +752 -11732
  33. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  34. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  35. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  36. package/package.json +1 -1
  37. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  38. package/patternfly-base-no-globals.css +6 -6
  39. package/patternfly-base-theme-dark-unversioned.css +6 -6
  40. package/patternfly-base.css +6 -6
  41. package/patternfly-no-globals.css +24 -23
  42. package/patternfly-theme-dark-unversioned.css +24 -23
  43. package/patternfly.css +24 -23
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -57,800 +57,68 @@ This demo implements the about modal, including the backdrop.
57
57
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
58
58
  >
59
59
  <div class="pf-v5-c-toolbar__item">
60
- <nav
61
- class="pf-v5-c-app-launcher"
60
+ <button
61
+ class="pf-v5-c-menu-toggle pf-m-plain"
62
+ type="button"
63
+ aria-expanded="false"
62
64
  aria-label="Application launcher"
63
- id="modal-basic-example-masthead-application-launcher"
64
65
  >
65
- <button
66
- class="pf-v5-c-app-launcher__toggle"
67
- type="button"
68
- id="modal-basic-example-masthead-application-launcher-button"
69
- aria-expanded="false"
70
- aria-label="Application launcher"
71
- >
72
- <i class="fas fa-th" aria-hidden="true"></i>
73
- </button>
74
- <div
75
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
76
- hidden
77
- >
78
- <div class="pf-v5-c-app-launcher__menu-search">
79
- <div class="pf-v5-c-text-input-group">
80
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
81
- <span class="pf-v5-c-text-input-group__text">
82
- <span class="pf-v5-c-text-input-group__icon">
83
- <i class="fas fa-fw fa-search"></i>
84
- </span>
85
- <input
86
- class="pf-v5-c-text-input-group__text-input"
87
- type="text"
88
- placeholder="Filer by name"
89
- value
90
- aria-label="Search input"
91
- />
92
- </span>
93
- </div>
94
- </div>
95
- </div>
96
- <section class="pf-v5-c-app-launcher__group">
97
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
98
- <ul role="list">
99
- <li
100
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
101
- >
102
- <a class="pf-v5-c-app-launcher__menu-item">
103
- Link 1
104
- <span
105
- class="pf-v5-c-app-launcher__menu-item-external-icon"
106
- >
107
- <i
108
- class="fas fa-external-link-alt"
109
- aria-hidden="true"
110
- ></i>
111
- </span>
112
- <span
113
- class="pf-v5-screen-reader"
114
- >(opens new window)</span>
115
- </a>
116
- <button
117
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
118
- type="button"
119
- aria-label="Favorite"
120
- >
121
- <i class="fas fa-star" aria-hidden="true"></i>
122
- </button>
123
- </li>
124
- <li
125
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
126
- >
127
- <a class="pf-v5-c-app-launcher__menu-item">
128
- Link 2
129
- <span
130
- class="pf-v5-c-app-launcher__menu-item-external-icon"
131
- >
132
- <i
133
- class="fas fa-external-link-alt"
134
- aria-hidden="true"
135
- ></i>
136
- </span>
137
- <span
138
- class="pf-v5-screen-reader"
139
- >(opens new window)</span>
140
- </a>
141
- <button
142
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
143
- type="button"
144
- aria-label="Favorite"
145
- >
146
- <i class="fas fa-star" aria-hidden="true"></i>
147
- </button>
148
- </li>
149
- </ul>
150
- </section>
151
- <hr class="pf-v5-c-divider" />
152
- <section class="pf-v5-c-app-launcher__group">
153
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
154
- <ul role="list">
155
- <li
156
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
157
- >
158
- <a class="pf-v5-c-app-launcher__menu-item">
159
- Link 1
160
- <span
161
- class="pf-v5-c-app-launcher__menu-item-external-icon"
162
- >
163
- <i
164
- class="fas fa-external-link-alt"
165
- aria-hidden="true"
166
- ></i>
167
- </span>
168
- <span
169
- class="pf-v5-screen-reader"
170
- >(opens new window)</span>
171
- </a>
172
- <button
173
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
174
- type="button"
175
- aria-label="Favorite"
176
- >
177
- <i class="fas fa-star" aria-hidden="true"></i>
178
- </button>
179
- </li>
180
- <li
181
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
182
- >
183
- <a class="pf-v5-c-app-launcher__menu-item">
184
- Link 2
185
- <span
186
- class="pf-v5-c-app-launcher__menu-item-external-icon"
187
- >
188
- <i
189
- class="fas fa-external-link-alt"
190
- aria-hidden="true"
191
- ></i>
192
- </span>
193
- <span
194
- class="pf-v5-screen-reader"
195
- >(opens new window)</span>
196
- </a>
197
- <button
198
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
199
- type="button"
200
- aria-label="Favorite"
201
- >
202
- <i class="fas fa-star" aria-hidden="true"></i>
203
- </button>
204
- </li>
205
- </ul>
206
- </section>
207
- </div>
208
- </nav>
66
+ <i class="fas fa-th" aria-hidden="true"></i>
67
+ </button>
209
68
  </div>
210
69
  <div class="pf-v5-c-toolbar__item">
211
- <div class="pf-v5-c-dropdown">
212
- <button
213
- class="pf-v5-c-dropdown__toggle pf-m-plain"
214
- id="modal-basic-example-masthead-settings-button"
215
- aria-expanded="false"
216
- type="button"
217
- aria-label="Settings"
218
- >
219
- <i class="fas fa-cog" aria-hidden="true"></i>
220
- </button>
221
- <ul
222
- class="pf-v5-c-dropdown__menu pf-m-align-right"
223
- aria-labelledby="modal-basic-example-masthead-settings-button"
224
- hidden
225
- >
226
- <li>
227
- <button
228
- class="pf-v5-c-dropdown__menu-item"
229
- type="button"
230
- >Settings</button>
231
- </li>
232
- <li>
233
- <button
234
- class="pf-v5-c-dropdown__menu-item"
235
- type="button"
236
- >Use the beta release</button>
237
- </li>
238
- </ul>
239
- </div>
70
+ <button
71
+ class="pf-v5-c-menu-toggle pf-m-plain"
72
+ type="button"
73
+ aria-expanded="false"
74
+ aria-label="Settings"
75
+ >
76
+ <i class="fas fa-cog" aria-hidden="true"></i>
77
+ </button>
240
78
  </div>
241
79
  <div class="pf-v5-c-toolbar__item">
242
- <div class="pf-v5-c-dropdown">
243
- <button
244
- class="pf-v5-c-dropdown__toggle pf-m-plain"
245
- id="modal-basic-example-masthead-help-button"
246
- aria-expanded="false"
247
- type="button"
248
- aria-label="Help"
249
- >
250
- <i class="fas fa-question-circle" aria-hidden="true"></i>
251
- </button>
252
- <ul
253
- class="pf-v5-c-dropdown__menu pf-m-align-right"
254
- aria-labelledby="modal-basic-example-masthead-help-button"
255
- hidden
256
- >
257
- <li>
258
- <button
259
- class="pf-v5-c-dropdown__menu-item"
260
- type="button"
261
- >Support options</button>
262
- </li>
263
- <li>
264
- <button
265
- class="pf-v5-c-dropdown__menu-item"
266
- type="button"
267
- >Open support case</button>
268
- </li>
269
- <li>
270
- <button
271
- class="pf-v5-c-dropdown__menu-item"
272
- type="button"
273
- >API documentation</button>
274
- </li>
275
- </ul>
276
- </div>
277
- </div>
278
- </div>
279
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
280
- <div class="pf-v5-c-dropdown">
281
80
  <button
282
81
  class="pf-v5-c-menu-toggle pf-m-plain"
283
82
  type="button"
284
83
  aria-expanded="false"
285
- aria-label="Actions"
84
+ aria-label="Help"
286
85
  >
287
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
86
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
288
87
  </button>
289
- <div
290
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
291
- hidden
292
- >
293
- <div class="pf-v5-c-menu__content">
294
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
295
- <ul class="pf-v5-c-menu__list" role="menu">
296
- <li
297
- class="pf-v5-c-menu__list-item pf-m-disabled"
298
- role="none"
299
- >
300
- <button
301
- class="pf-v5-c-menu__item"
302
- type="button"
303
- disabled
304
- role="menuitem"
305
- >
306
- <span class="pf-v5-c-menu__item-description">
307
- <div class="pf-v5-u-font-size-sm">Username:</div>
308
- <div class="pf-v5-u-font-size-md">ned_username</div>
309
- </span>
310
- </button>
311
- </li>
312
- <li
313
- class="pf-v5-c-menu__list-item pf-m-disabled"
314
- role="none"
315
- >
316
- <button
317
- class="pf-v5-c-menu__item"
318
- type="button"
319
- disabled
320
- role="menuitem"
321
- >
322
- <span class="pf-v5-c-menu__item-description">
323
- <div
324
- class="pf-v5-u-font-size-sm"
325
- >Account number:</div>
326
- <div class="pf-v5-u-font-size-md">123456789</div>
327
- </span>
328
- </button>
329
- </li>
330
- <li class="pf-v5-c-divider" role="separator"></li>
331
- <li class="pf-v5-c-menu__list-item" role="none">
332
- <button
333
- class="pf-v5-c-menu__item"
334
- type="button"
335
- role="menuitem"
336
- >
337
- <span class="pf-v5-c-menu__item-main">
338
- <span class="pf-v5-c-menu__item-text">My profile</span>
339
- </span>
340
- </button>
341
- </li>
342
- <li class="pf-v5-c-menu__list-item" role="none">
343
- <button
344
- class="pf-v5-c-menu__item"
345
- type="button"
346
- role="menuitem"
347
- >
348
- <span class="pf-v5-c-menu__item-main">
349
- <span
350
- class="pf-v5-c-menu__item-text"
351
- >User management</span>
352
- </span>
353
- </button>
354
- </li>
355
- <li class="pf-v5-c-menu__list-item" role="none">
356
- <button
357
- class="pf-v5-c-menu__item"
358
- type="button"
359
- role="menuitem"
360
- >
361
- <span class="pf-v5-c-menu__item-main">
362
- <span class="pf-v5-c-menu__item-text">Logout</span>
363
- </span>
364
- </button>
365
- </li>
366
- </ul>
367
- </section>
368
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
369
- <section class="pf-v5-c-menu__group">
370
- <ul class="pf-v5-c-menu__list" role="menu">
371
- <li class="pf-v5-c-menu__list-item" role="none">
372
- <button
373
- class="pf-v5-c-menu__item"
374
- type="button"
375
- role="menuitem"
376
- aria-expanded="false"
377
- >
378
- <span class="pf-v5-c-menu__item-main">
379
- <span class="pf-v5-c-menu__item-icon">
380
- <i
381
- class="fas fa-fw fa-cog"
382
- aria-hidden="true"
383
- ></i>
384
- </span>
385
- <span class="pf-v5-c-menu__item-text">Settings</span>
386
- <span class="pf-v5-c-menu__item-toggle-icon">
387
- <i class="fas fa-angle-right"></i>
388
- </span>
389
- </span>
390
- </button>
391
- <div class="pf-v5-c-menu" hidden>
392
- <div class="pf-v5-c-menu__content">
393
- <ul class="pf-v5-c-menu__list" role="menu">
394
- <li
395
- class="pf-v5-c-menu__list-item pf-m-drill-up"
396
- role="none"
397
- >
398
- <button
399
- class="pf-v5-c-menu__item"
400
- type="button"
401
- role="menuitem"
402
- >
403
- <span class="pf-v5-c-menu__item-main">
404
- <span
405
- class="pf-v5-c-menu__item-toggle-icon"
406
- >
407
- <i class="fas fa-angle-left"></i>
408
- </span>
409
- <span class="pf-v5-c-menu__item-icon">
410
- <i
411
- class="fas fa-fw fa-cog"
412
- aria-hidden="true"
413
- ></i>
414
- </span>
415
- <span
416
- class="pf-v5-c-menu__item-text"
417
- >Settings</span>
418
- </span>
419
- </button>
420
- </li>
421
- <li class="pf-v5-c-divider" role="separator"></li>
422
- <li
423
- class="pf-v5-c-menu__list-item"
424
- role="none"
425
- >
426
- <a
427
- class="pf-v5-c-menu__item"
428
- href="#"
429
- role="menuitem"
430
- >
431
- <span class="pf-v5-c-menu__item-main">
432
- <span
433
- class="pf-v5-c-menu__item-text"
434
- >Customer support</span>
435
- </span>
436
- </a>
437
- </li>
438
- <li
439
- class="pf-v5-c-menu__list-item"
440
- role="none"
441
- >
442
- <a
443
- class="pf-v5-c-menu__item"
444
- href="#"
445
- role="menuitem"
446
- >
447
- <span class="pf-v5-c-menu__item-main">
448
- <span
449
- class="pf-v5-c-menu__item-text"
450
- >About</span>
451
- </span>
452
- </a>
453
- </li>
454
- </ul>
455
- </div>
456
- </div>
457
- </li>
458
-
459
- <li class="pf-v5-c-menu__list-item" role="none">
460
- <button
461
- class="pf-v5-c-menu__item"
462
- type="button"
463
- role="menuitem"
464
- aria-expanded="false"
465
- >
466
- <span class="pf-v5-c-menu__item-main">
467
- <span class="pf-v5-c-menu__item-icon">
468
- <i
469
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
470
- aria-hidden="true"
471
- ></i>
472
- </span>
473
- <span class="pf-v5-c-menu__item-text">Help</span>
474
- <span class="pf-v5-c-menu__item-toggle-icon">
475
- <i class="fas fa-angle-right"></i>
476
- </span>
477
- </span>
478
- </button>
479
- <div class="pf-v5-c-menu" hidden>
480
- <div class="pf-v5-c-menu__content">
481
- <ul class="pf-v5-c-menu__list" role="menu">
482
- <li
483
- class="pf-v5-c-menu__list-item pf-m-drill-up"
484
- role="none"
485
- >
486
- <button
487
- class="pf-v5-c-menu__item"
488
- type="button"
489
- role="menuitem"
490
- >
491
- <span class="pf-v5-c-menu__item-main">
492
- <span
493
- class="pf-v5-c-menu__item-toggle-icon"
494
- >
495
- <i class="fas fa-angle-left"></i>
496
- </span>
497
- <span class="pf-v5-c-menu__item-icon">
498
- <i
499
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
500
- aria-hidden="true"
501
- ></i>
502
- </span>
503
- <span
504
- class="pf-v5-c-menu__item-text"
505
- >Help</span>
506
- </span>
507
- </button>
508
- </li>
509
- <li class="pf-v5-c-divider" role="separator"></li>
510
- <li
511
- class="pf-v5-c-menu__list-item"
512
- role="none"
513
- >
514
- <a
515
- class="pf-v5-c-menu__item"
516
- href="#"
517
- role="menuitem"
518
- >
519
- <span class="pf-v5-c-menu__item-main">
520
- <span
521
- class="pf-v5-c-menu__item-text"
522
- >Support options</span>
523
- </span>
524
- </a>
525
- </li>
526
- <li
527
- class="pf-v5-c-menu__list-item"
528
- role="none"
529
- >
530
- <a
531
- class="pf-v5-c-menu__item"
532
- href="#"
533
- role="menuitem"
534
- >
535
- <span class="pf-v5-c-menu__item-main">
536
- <span
537
- class="pf-v5-c-menu__item-text"
538
- >Open support case</span>
539
- </span>
540
- </a>
541
- </li>
542
- <li
543
- class="pf-v5-c-menu__list-item"
544
- role="none"
545
- >
546
- <a
547
- class="pf-v5-c-menu__item"
548
- href="#"
549
- role="menuitem"
550
- >
551
- <span class="pf-v5-c-menu__item-main">
552
- <span
553
- class="pf-v5-c-menu__item-text"
554
- >API documentation</span>
555
- </span>
556
- </a>
557
- </li>
558
- </ul>
559
- </div>
560
- </div>
561
- </li>
562
-
563
- <li class="pf-v5-c-menu__list-item" role="none">
564
- <button
565
- class="pf-v5-c-menu__item"
566
- type="button"
567
- role="menuitem"
568
- >
569
- <span class="pf-v5-c-menu__item-main">
570
- <span class="pf-v5-c-menu__item-icon">
571
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
572
- </span>
573
- <span
574
- class="pf-v5-c-menu__item-text"
575
- >Application launcher</span>
576
- <span class="pf-v5-c-menu__item-toggle-icon">
577
- <i class="fas fa-angle-right"></i>
578
- </span>
579
- </span>
580
- </button>
581
- <div class="pf-v5-c-menu" hidden>
582
- <div class="pf-v5-c-menu__header">
583
- <button
584
- class="pf-v5-c-menu__item"
585
- type="button"
586
- role="menuitem"
587
- >
588
- <span class="pf-v5-c-menu__item-main">
589
- <span
590
- class="pf-v5-c-menu__item-toggle-icon"
591
- >
592
- <i class="fas fa-angle-left"></i>
593
- </span>
594
- <span class="pf-v5-c-menu__item-icon">
595
- <i
596
- class="fas fa-fw fa-th"
597
- aria-hidden="true"
598
- ></i>
599
- </span>
600
- <span
601
- class="pf-v5-c-menu__item-text"
602
- >Application launcher</span>
603
- </span>
604
- </button>
605
- </div>
606
- <div class="pf-v5-c-menu__search">
607
- <div class="pf-v5-c-menu__search-input">
608
- <div class="pf-v5-c-text-input-group">
609
- <div
610
- class="pf-v5-c-text-input-group__main pf-m-icon"
611
- >
612
- <span
613
- class="pf-v5-c-text-input-group__text"
614
- >
615
- <span
616
- class="pf-v5-c-text-input-group__icon"
617
- >
618
- <i class="fas fa-fw fa-search"></i>
619
- </span>
620
- <input
621
- class="pf-v5-c-text-input-group__text-input"
622
- type="text"
623
- placeholder="Search"
624
- value
625
- aria-label="Search input"
626
- />
627
- </span>
628
- </div>
629
- </div>
630
- </div>
631
- </div>
632
- <hr class="pf-v5-c-divider" />
633
- <section class="pf-v5-c-menu__group">
634
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
635
- <ul class="pf-v5-c-menu__list" role="menu">
636
- <li
637
- class="pf-v5-c-menu__list-item"
638
- role="none"
639
- >
640
- <a
641
- class="pf-v5-c-menu__item"
642
- href="#"
643
- role="menuitem"
644
- >
645
- <span class="pf-v5-c-menu__item-main">
646
- <span
647
- class="pf-v5-c-menu__item-text"
648
- >Link 1</span>
649
- </span>
650
- </a>
651
- <button
652
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
653
- type="button"
654
- aria-label="Starred"
655
- >
656
- <span
657
- class="pf-v5-c-menu__item-action-icon"
658
- >
659
- <i
660
- class="fas fa-star"
661
- aria-hidden="true"
662
- ></i>
663
- </span>
664
- </button>
665
- </li>
666
- <li
667
- class="pf-v5-c-menu__list-item"
668
- role="none"
669
- >
670
- <a
671
- class="pf-v5-c-menu__item"
672
- href="#"
673
- role="menuitem"
674
- target="_blank"
675
- >
676
- <span class="pf-v5-c-menu__item-main">
677
- <span
678
- class="pf-v5-c-menu__item-text"
679
- >Link 2</span>
680
- <span
681
- class="pf-v5-c-menu__item-external-icon"
682
- >
683
- <i
684
- class="fas fa-external-link-alt"
685
- aria-hidden="true"
686
- ></i>
687
- </span>
688
- <span
689
- class="pf-v5-screen-reader"
690
- >(opens new window)</span>
691
- </span>
692
- </a>
693
- <button
694
- class="pf-v5-c-menu__item-action pf-m-favorite"
695
- type="button"
696
- aria-label="Not starred"
697
- >
698
- <span
699
- class="pf-v5-c-menu__item-action-icon"
700
- >
701
- <i
702
- class="fas fa-star"
703
- aria-hidden="true"
704
- ></i>
705
- </span>
706
- </button>
707
- </li>
708
- </ul>
709
- </section>
710
- <hr class="pf-v5-c-divider" />
711
- <section class="pf-v5-c-menu__group">
712
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
713
- <ul class="pf-v5-c-menu__list" role="menu">
714
- <li
715
- class="pf-v5-c-menu__list-item"
716
- role="none"
717
- >
718
- <a
719
- class="pf-v5-c-menu__item"
720
- href="#"
721
- role="menuitem"
722
- >
723
- <span class="pf-v5-c-menu__item-main">
724
- <span
725
- class="pf-v5-c-menu__item-text"
726
- >Link 1</span>
727
- </span>
728
- </a>
729
- <button
730
- class="pf-v5-c-menu__item-action pf-m-favorite"
731
- type="button"
732
- aria-label="Not starred"
733
- >
734
- <span
735
- class="pf-v5-c-menu__item-action-icon"
736
- >
737
- <i
738
- class="fas fa-star"
739
- aria-hidden="true"
740
- ></i>
741
- </span>
742
- </button>
743
- </li>
744
- <li
745
- class="pf-v5-c-menu__list-item"
746
- role="none"
747
- >
748
- <a
749
- class="pf-v5-c-menu__item"
750
- href="#"
751
- role="menuitem"
752
- target="_blank"
753
- >
754
- <span class="pf-v5-c-menu__item-main">
755
- <span
756
- class="pf-v5-c-menu__item-text"
757
- >Link 2</span>
758
- <span
759
- class="pf-v5-c-menu__item-external-icon"
760
- >
761
- <i
762
- class="fas fa-external-link-alt"
763
- aria-hidden="true"
764
- ></i>
765
- </span>
766
- <span
767
- class="pf-v5-screen-reader"
768
- >(opens new window)</span>
769
- </span>
770
- </a>
771
- <button
772
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
773
- type="button"
774
- aria-label="Starred"
775
- >
776
- <span
777
- class="pf-v5-c-menu__item-action-icon"
778
- >
779
- <i
780
- class="fas fa-star"
781
- aria-hidden="true"
782
- ></i>
783
- </span>
784
- </button>
785
- </li>
786
- </ul>
787
- </section>
788
- </div>
789
- </li>
790
- </ul>
791
- </section>
792
- </div>
793
- </div>
794
88
  </div>
795
89
  </div>
796
- </div>
797
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
798
- <div
799
- class="pf-v5-c-dropdown pf-m-full-height"
800
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
801
- >
90
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
802
91
  <button
803
- class="pf-v5-c-dropdown__toggle"
804
- id="modal-basic-example-masthead-profile-button"
805
- aria-expanded="false"
92
+ class="pf-v5-c-menu-toggle pf-m-plain"
806
93
  type="button"
94
+ aria-expanded="false"
95
+ aria-label="Actions"
807
96
  >
808
- <span class="pf-v5-c-dropdown__toggle-image">
809
- <img
810
- class="pf-v5-c-avatar"
811
- alt="Avatar image"
812
- src="/assets/images/img_avatar-light.svg"
813
- />
814
- </span>
815
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
816
- <span class="pf-v5-c-dropdown__toggle-icon">
817
- <i class="fas fa-caret-down" aria-hidden="true"></i>
818
- </span>
97
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
819
98
  </button>
820
- <div class="pf-v5-c-dropdown__menu" hidden>
821
- <section class="pf-v5-c-dropdown__group">
822
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
823
- <div class="pf-v5-u-font-size-sm">Account number:</div>
824
- <div>123456789</div>
825
- </div>
826
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
827
- <div class="pf-v5-u-font-size-sm">Username:</div>
828
- <div>mshaksho@redhat.com</div>
829
- </div>
830
- </section>
831
- <hr class="pf-v5-c-divider" />
832
- <section class="pf-v5-c-dropdown__group">
833
- <ul>
834
- <li>
835
- <a
836
- class="pf-v5-c-dropdown__menu-item"
837
- href="#"
838
- >My profile</a>
839
- </li>
840
- <li>
841
- <a
842
- class="pf-v5-c-dropdown__menu-item"
843
- href="#"
844
- >User management</a>
845
- </li>
846
- <li>
847
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
848
- </li>
849
- </ul>
850
- </section>
851
- </div>
852
99
  </div>
853
100
  </div>
101
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
102
+ <button
103
+ class="pf-v5-c-menu-toggle pf-m-full-height"
104
+ type="button"
105
+ aria-expanded="false"
106
+ >
107
+ <span class="pf-v5-c-menu-toggle__icon">
108
+ <img
109
+ class="pf-v5-c-avatar"
110
+ alt="Avatar image"
111
+ src="/assets/images/img_avatar-light.svg"
112
+ />
113
+ </span>
114
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
854
122
  </div>
855
123
  </div>
856
124
  </div>