@patternfly/patternfly 5.0.0-prerelease.2 → 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 (42) 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/Masthead/masthead.css +2 -6
  6. package/components/Masthead/masthead.scss +1 -7
  7. package/components/Masthead/themes/dark/masthead.scss +1 -0
  8. package/components/MenuToggle/menu-toggle.css +13 -11
  9. package/components/MenuToggle/menu-toggle.scss +14 -12
  10. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  11. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  12. package/docs/demos/Alert/examples/Alert.md +126 -2322
  13. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  14. package/docs/demos/Banner/examples/Banner.md +84 -1588
  15. package/docs/demos/CardView/examples/CardView.md +42 -774
  16. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  17. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  18. package/docs/demos/DataList/examples/DataList.md +191 -3119
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  20. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  23. package/docs/demos/Modal/examples/Modal.md +252 -4644
  24. package/docs/demos/Nav/examples/Nav.md +336 -6192
  25. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  26. package/docs/demos/Page/examples/Page.md +378 -6966
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  28. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  29. package/docs/demos/Table/examples/Table.md +752 -11732
  30. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  31. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  32. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  33. package/package.json +1 -1
  34. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  35. package/patternfly-base-no-globals.css +6 -6
  36. package/patternfly-base-theme-dark-unversioned.css +6 -6
  37. package/patternfly-base.css +6 -6
  38. package/patternfly-no-globals.css +21 -23
  39. package/patternfly-theme-dark-unversioned.css +21 -23
  40. package/patternfly.css +21 -23
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -55,800 +55,68 @@ section: components
55
55
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
56
56
  >
57
57
  <div class="pf-v5-c-toolbar__item">
58
- <nav
59
- class="pf-v5-c-app-launcher"
58
+ <button
59
+ class="pf-v5-c-menu-toggle pf-m-plain"
60
+ type="button"
61
+ aria-expanded="false"
60
62
  aria-label="Application launcher"
61
- id="skeleton-basic-example-masthead-application-launcher"
62
63
  >
63
- <button
64
- class="pf-v5-c-app-launcher__toggle"
65
- type="button"
66
- id="skeleton-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="skeleton-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="skeleton-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="skeleton-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="skeleton-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="skeleton-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>