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