@patternfly/patternfly 6.0.0-alpha.132 → 6.0.0-alpha.133

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 (49) hide show
  1. package/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-no-globals.css +20 -15
  44. package/patternfly.css +20 -15
  45. package/patternfly.min.css +1 -1
  46. package/patternfly.min.css.map +1 -1
  47. package/utilities/Display/display.css +38 -0
  48. package/utilities/Display/display.scss +3 -1
  49. package/utilities/_index.css +38 -0
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -43,63 +43,17 @@ cssPrefix: pf-v6-c-dual-list-selector
43
43
  aria-hidden="true"
44
44
  ></i>
45
45
  </button>
46
- <div class="pf-v6-c-dropdown">
47
- <button
48
- class="pf-v6-c-dropdown__toggle pf-m-plain"
49
- id="dropdown-kebab-basic-available-button"
50
- aria-expanded="false"
51
- type="button"
52
- aria-label="Actions"
53
- >
46
+ <button
47
+ class="pf-v6-c-menu-toggle pf-m-plain"
48
+ type="button"
49
+ aria-expanded="false"
50
+ aria-label="Menu toggle"
51
+ id="basic-availablemenu-toggle"
52
+ >
53
+ <span class="pf-v6-c-menu-toggle__icon">
54
54
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
55
- </button>
56
- <ul
57
- class="pf-v6-c-dropdown__menu"
58
- aria-labelledby="dropdown-kebab-basic-available-button"
59
- hidden
60
- role="menu"
61
- >
62
- <li role="none">
63
- <a
64
- class="pf-v6-c-dropdown__menu-item"
65
- role="menuitem"
66
- href="#"
67
- >Link</a>
68
- </li>
69
- <li role="none">
70
- <button
71
- class="pf-v6-c-dropdown__menu-item"
72
- role="menuitem"
73
- type="button"
74
- >Action</button>
75
- </li>
76
- <li role="none">
77
- <a
78
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
79
- role="menuitem"
80
- href="#"
81
- aria-disabled="true"
82
- tabindex="-1"
83
- >Disabled link</a>
84
- </li>
85
- <li role="none">
86
- <button
87
- class="pf-v6-c-dropdown__menu-item"
88
- role="menuitem"
89
- type="button"
90
- disabled
91
- >Disabled action</button>
92
- </li>
93
- <li class="pf-v6-c-divider" role="separator"></li>
94
- <li role="none">
95
- <a
96
- class="pf-v6-c-dropdown__menu-item"
97
- role="menuitem"
98
- href="#"
99
- >Separated link</a>
100
- </li>
101
- </ul>
102
- </div>
55
+ </span>
56
+ </button>
103
57
  </div>
104
58
  </div>
105
59
  <div class="pf-v6-c-dual-list-selector__status">
@@ -260,63 +214,17 @@ cssPrefix: pf-v6-c-dual-list-selector
260
214
  aria-hidden="true"
261
215
  ></i>
262
216
  </button>
263
- <div class="pf-v6-c-dropdown">
264
- <button
265
- class="pf-v6-c-dropdown__toggle pf-m-plain"
266
- id="dropdown-kebab-basic-chosen-button"
267
- aria-expanded="false"
268
- type="button"
269
- aria-label="Actions"
270
- >
217
+ <button
218
+ class="pf-v6-c-menu-toggle pf-m-plain"
219
+ type="button"
220
+ aria-expanded="false"
221
+ aria-label="Menu toggle"
222
+ id="basic-chosenmenu-toggle"
223
+ >
224
+ <span class="pf-v6-c-menu-toggle__icon">
271
225
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
272
- </button>
273
- <ul
274
- class="pf-v6-c-dropdown__menu"
275
- aria-labelledby="dropdown-kebab-basic-chosen-button"
276
- hidden
277
- role="menu"
278
- >
279
- <li role="none">
280
- <a
281
- class="pf-v6-c-dropdown__menu-item"
282
- role="menuitem"
283
- href="#"
284
- >Link</a>
285
- </li>
286
- <li role="none">
287
- <button
288
- class="pf-v6-c-dropdown__menu-item"
289
- role="menuitem"
290
- type="button"
291
- >Action</button>
292
- </li>
293
- <li role="none">
294
- <a
295
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
296
- role="menuitem"
297
- href="#"
298
- aria-disabled="true"
299
- tabindex="-1"
300
- >Disabled link</a>
301
- </li>
302
- <li role="none">
303
- <button
304
- class="pf-v6-c-dropdown__menu-item"
305
- role="menuitem"
306
- type="button"
307
- disabled
308
- >Disabled action</button>
309
- </li>
310
- <li class="pf-v6-c-divider" role="separator"></li>
311
- <li role="none">
312
- <a
313
- class="pf-v6-c-dropdown__menu-item"
314
- role="menuitem"
315
- href="#"
316
- >Separated link</a>
317
- </li>
318
- </ul>
319
- </div>
226
+ </span>
227
+ </button>
320
228
  </div>
321
229
  </div>
322
230
  <div class="pf-v6-c-dual-list-selector__status">
@@ -378,63 +286,17 @@ cssPrefix: pf-v6-c-dual-list-selector
378
286
  aria-hidden="true"
379
287
  ></i>
380
288
  </button>
381
- <div class="pf-v6-c-dropdown">
382
- <button
383
- class="pf-v6-c-dropdown__toggle pf-m-plain"
384
- id="dropdown-kebab-available-item-selected-available-button"
385
- aria-expanded="false"
386
- type="button"
387
- aria-label="Actions"
388
- >
289
+ <button
290
+ class="pf-v6-c-menu-toggle pf-m-plain"
291
+ type="button"
292
+ aria-expanded="false"
293
+ aria-label="Menu toggle"
294
+ id="available-item-selected-availablemenu-toggle"
295
+ >
296
+ <span class="pf-v6-c-menu-toggle__icon">
389
297
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
390
- </button>
391
- <ul
392
- class="pf-v6-c-dropdown__menu"
393
- aria-labelledby="dropdown-kebab-available-item-selected-available-button"
394
- hidden
395
- role="menu"
396
- >
397
- <li role="none">
398
- <a
399
- class="pf-v6-c-dropdown__menu-item"
400
- role="menuitem"
401
- href="#"
402
- >Link</a>
403
- </li>
404
- <li role="none">
405
- <button
406
- class="pf-v6-c-dropdown__menu-item"
407
- role="menuitem"
408
- type="button"
409
- >Action</button>
410
- </li>
411
- <li role="none">
412
- <a
413
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
414
- role="menuitem"
415
- href="#"
416
- aria-disabled="true"
417
- tabindex="-1"
418
- >Disabled link</a>
419
- </li>
420
- <li role="none">
421
- <button
422
- class="pf-v6-c-dropdown__menu-item"
423
- role="menuitem"
424
- type="button"
425
- disabled
426
- >Disabled action</button>
427
- </li>
428
- <li class="pf-v6-c-divider" role="separator"></li>
429
- <li role="none">
430
- <a
431
- class="pf-v6-c-dropdown__menu-item"
432
- role="menuitem"
433
- href="#"
434
- >Separated link</a>
435
- </li>
436
- </ul>
437
- </div>
298
+ </span>
299
+ </button>
438
300
  </div>
439
301
  </div>
440
302
  <div class="pf-v6-c-dual-list-selector__status">
@@ -589,63 +451,17 @@ cssPrefix: pf-v6-c-dual-list-selector
589
451
  aria-hidden="true"
590
452
  ></i>
591
453
  </button>
592
- <div class="pf-v6-c-dropdown">
593
- <button
594
- class="pf-v6-c-dropdown__toggle pf-m-plain"
595
- id="dropdown-kebab-available-item-selected-chosen-button"
596
- aria-expanded="false"
597
- type="button"
598
- aria-label="Actions"
599
- >
454
+ <button
455
+ class="pf-v6-c-menu-toggle pf-m-plain"
456
+ type="button"
457
+ aria-expanded="false"
458
+ aria-label="Menu toggle"
459
+ id="available-item-selected-chosenmenu-toggle"
460
+ >
461
+ <span class="pf-v6-c-menu-toggle__icon">
600
462
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
601
- </button>
602
- <ul
603
- class="pf-v6-c-dropdown__menu"
604
- aria-labelledby="dropdown-kebab-available-item-selected-chosen-button"
605
- hidden
606
- role="menu"
607
- >
608
- <li role="none">
609
- <a
610
- class="pf-v6-c-dropdown__menu-item"
611
- role="menuitem"
612
- href="#"
613
- >Link</a>
614
- </li>
615
- <li role="none">
616
- <button
617
- class="pf-v6-c-dropdown__menu-item"
618
- role="menuitem"
619
- type="button"
620
- >Action</button>
621
- </li>
622
- <li role="none">
623
- <a
624
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
625
- role="menuitem"
626
- href="#"
627
- aria-disabled="true"
628
- tabindex="-1"
629
- >Disabled link</a>
630
- </li>
631
- <li role="none">
632
- <button
633
- class="pf-v6-c-dropdown__menu-item"
634
- role="menuitem"
635
- type="button"
636
- disabled
637
- >Disabled action</button>
638
- </li>
639
- <li class="pf-v6-c-divider" role="separator"></li>
640
- <li role="none">
641
- <a
642
- class="pf-v6-c-dropdown__menu-item"
643
- role="menuitem"
644
- href="#"
645
- >Separated link</a>
646
- </li>
647
- </ul>
648
- </div>
463
+ </span>
464
+ </button>
649
465
  </div>
650
466
  </div>
651
467
  <div class="pf-v6-c-dual-list-selector__status">
@@ -707,63 +523,17 @@ cssPrefix: pf-v6-c-dual-list-selector
707
523
  aria-hidden="true"
708
524
  ></i>
709
525
  </button>
710
- <div class="pf-v6-c-dropdown">
711
- <button
712
- class="pf-v6-c-dropdown__toggle pf-m-plain"
713
- id="dropdown-kebab-multiple-available-items-selected-available-button"
714
- aria-expanded="false"
715
- type="button"
716
- aria-label="Actions"
717
- >
526
+ <button
527
+ class="pf-v6-c-menu-toggle pf-m-plain"
528
+ type="button"
529
+ aria-expanded="false"
530
+ aria-label="Menu toggle"
531
+ id="multiple-available-items-selected-availablemenu-toggle"
532
+ >
533
+ <span class="pf-v6-c-menu-toggle__icon">
718
534
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
719
- </button>
720
- <ul
721
- class="pf-v6-c-dropdown__menu"
722
- aria-labelledby="dropdown-kebab-multiple-available-items-selected-available-button"
723
- hidden
724
- role="menu"
725
- >
726
- <li role="none">
727
- <a
728
- class="pf-v6-c-dropdown__menu-item"
729
- role="menuitem"
730
- href="#"
731
- >Link</a>
732
- </li>
733
- <li role="none">
734
- <button
735
- class="pf-v6-c-dropdown__menu-item"
736
- role="menuitem"
737
- type="button"
738
- >Action</button>
739
- </li>
740
- <li role="none">
741
- <a
742
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
743
- role="menuitem"
744
- href="#"
745
- aria-disabled="true"
746
- tabindex="-1"
747
- >Disabled link</a>
748
- </li>
749
- <li role="none">
750
- <button
751
- class="pf-v6-c-dropdown__menu-item"
752
- role="menuitem"
753
- type="button"
754
- disabled
755
- >Disabled action</button>
756
- </li>
757
- <li class="pf-v6-c-divider" role="separator"></li>
758
- <li role="none">
759
- <a
760
- class="pf-v6-c-dropdown__menu-item"
761
- role="menuitem"
762
- href="#"
763
- >Separated link</a>
764
- </li>
765
- </ul>
766
- </div>
535
+ </span>
536
+ </button>
767
537
  </div>
768
538
  </div>
769
539
  <div class="pf-v6-c-dual-list-selector__status">
@@ -918,63 +688,17 @@ cssPrefix: pf-v6-c-dual-list-selector
918
688
  aria-hidden="true"
919
689
  ></i>
920
690
  </button>
921
- <div class="pf-v6-c-dropdown">
922
- <button
923
- class="pf-v6-c-dropdown__toggle pf-m-plain"
924
- id="dropdown-kebab-multiple-available-items-selected-chosen-button"
925
- aria-expanded="false"
926
- type="button"
927
- aria-label="Actions"
928
- >
691
+ <button
692
+ class="pf-v6-c-menu-toggle pf-m-plain"
693
+ type="button"
694
+ aria-expanded="false"
695
+ aria-label="Menu toggle"
696
+ id="multiple-available-items-selected-chosenmenu-toggle"
697
+ >
698
+ <span class="pf-v6-c-menu-toggle__icon">
929
699
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
930
- </button>
931
- <ul
932
- class="pf-v6-c-dropdown__menu"
933
- aria-labelledby="dropdown-kebab-multiple-available-items-selected-chosen-button"
934
- hidden
935
- role="menu"
936
- >
937
- <li role="none">
938
- <a
939
- class="pf-v6-c-dropdown__menu-item"
940
- role="menuitem"
941
- href="#"
942
- >Link</a>
943
- </li>
944
- <li role="none">
945
- <button
946
- class="pf-v6-c-dropdown__menu-item"
947
- role="menuitem"
948
- type="button"
949
- >Action</button>
950
- </li>
951
- <li role="none">
952
- <a
953
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
954
- role="menuitem"
955
- href="#"
956
- aria-disabled="true"
957
- tabindex="-1"
958
- >Disabled link</a>
959
- </li>
960
- <li role="none">
961
- <button
962
- class="pf-v6-c-dropdown__menu-item"
963
- role="menuitem"
964
- type="button"
965
- disabled
966
- >Disabled action</button>
967
- </li>
968
- <li class="pf-v6-c-divider" role="separator"></li>
969
- <li role="none">
970
- <a
971
- class="pf-v6-c-dropdown__menu-item"
972
- role="menuitem"
973
- href="#"
974
- >Separated link</a>
975
- </li>
976
- </ul>
977
- </div>
700
+ </span>
701
+ </button>
978
702
  </div>
979
703
  </div>
980
704
  <div class="pf-v6-c-dual-list-selector__status">
@@ -1036,63 +760,17 @@ cssPrefix: pf-v6-c-dual-list-selector
1036
760
  aria-hidden="true"
1037
761
  ></i>
1038
762
  </button>
1039
- <div class="pf-v6-c-dropdown">
1040
- <button
1041
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1042
- id="dropdown-kebab-chosen-item-available-button"
1043
- aria-expanded="false"
1044
- type="button"
1045
- aria-label="Actions"
1046
- >
763
+ <button
764
+ class="pf-v6-c-menu-toggle pf-m-plain"
765
+ type="button"
766
+ aria-expanded="false"
767
+ aria-label="Menu toggle"
768
+ id="chosen-item-availablemenu-toggle"
769
+ >
770
+ <span class="pf-v6-c-menu-toggle__icon">
1047
771
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1048
- </button>
1049
- <ul
1050
- class="pf-v6-c-dropdown__menu"
1051
- aria-labelledby="dropdown-kebab-chosen-item-available-button"
1052
- hidden
1053
- role="menu"
1054
- >
1055
- <li role="none">
1056
- <a
1057
- class="pf-v6-c-dropdown__menu-item"
1058
- role="menuitem"
1059
- href="#"
1060
- >Link</a>
1061
- </li>
1062
- <li role="none">
1063
- <button
1064
- class="pf-v6-c-dropdown__menu-item"
1065
- role="menuitem"
1066
- type="button"
1067
- >Action</button>
1068
- </li>
1069
- <li role="none">
1070
- <a
1071
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1072
- role="menuitem"
1073
- href="#"
1074
- aria-disabled="true"
1075
- tabindex="-1"
1076
- >Disabled link</a>
1077
- </li>
1078
- <li role="none">
1079
- <button
1080
- class="pf-v6-c-dropdown__menu-item"
1081
- role="menuitem"
1082
- type="button"
1083
- disabled
1084
- >Disabled action</button>
1085
- </li>
1086
- <li class="pf-v6-c-divider" role="separator"></li>
1087
- <li role="none">
1088
- <a
1089
- class="pf-v6-c-dropdown__menu-item"
1090
- role="menuitem"
1091
- href="#"
1092
- >Separated link</a>
1093
- </li>
1094
- </ul>
1095
- </div>
772
+ </span>
773
+ </button>
1096
774
  </div>
1097
775
  </div>
1098
776
  <div class="pf-v6-c-dual-list-selector__status">
@@ -1247,63 +925,17 @@ cssPrefix: pf-v6-c-dual-list-selector
1247
925
  aria-hidden="true"
1248
926
  ></i>
1249
927
  </button>
1250
- <div class="pf-v6-c-dropdown">
1251
- <button
1252
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1253
- id="dropdown-kebab-chosen-item-chosen-button"
1254
- aria-expanded="false"
1255
- type="button"
1256
- aria-label="Actions"
1257
- >
928
+ <button
929
+ class="pf-v6-c-menu-toggle pf-m-plain"
930
+ type="button"
931
+ aria-expanded="false"
932
+ aria-label="Menu toggle"
933
+ id="chosen-item-chosenmenu-toggle"
934
+ >
935
+ <span class="pf-v6-c-menu-toggle__icon">
1258
936
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1259
- </button>
1260
- <ul
1261
- class="pf-v6-c-dropdown__menu"
1262
- aria-labelledby="dropdown-kebab-chosen-item-chosen-button"
1263
- hidden
1264
- role="menu"
1265
- >
1266
- <li role="none">
1267
- <a
1268
- class="pf-v6-c-dropdown__menu-item"
1269
- role="menuitem"
1270
- href="#"
1271
- >Link</a>
1272
- </li>
1273
- <li role="none">
1274
- <button
1275
- class="pf-v6-c-dropdown__menu-item"
1276
- role="menuitem"
1277
- type="button"
1278
- >Action</button>
1279
- </li>
1280
- <li role="none">
1281
- <a
1282
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1283
- role="menuitem"
1284
- href="#"
1285
- aria-disabled="true"
1286
- tabindex="-1"
1287
- >Disabled link</a>
1288
- </li>
1289
- <li role="none">
1290
- <button
1291
- class="pf-v6-c-dropdown__menu-item"
1292
- role="menuitem"
1293
- type="button"
1294
- disabled
1295
- >Disabled action</button>
1296
- </li>
1297
- <li class="pf-v6-c-divider" role="separator"></li>
1298
- <li role="none">
1299
- <a
1300
- class="pf-v6-c-dropdown__menu-item"
1301
- role="menuitem"
1302
- href="#"
1303
- >Separated link</a>
1304
- </li>
1305
- </ul>
1306
- </div>
937
+ </span>
938
+ </button>
1307
939
  </div>
1308
940
  </div>
1309
941
  <div class="pf-v6-c-dual-list-selector__status">
@@ -1378,63 +1010,17 @@ cssPrefix: pf-v6-c-dual-list-selector
1378
1010
  aria-hidden="true"
1379
1011
  ></i>
1380
1012
  </button>
1381
- <div class="pf-v6-c-dropdown">
1382
- <button
1383
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1384
- id="dropdown-kebab-chosen-item-selected-available-button"
1385
- aria-expanded="false"
1386
- type="button"
1387
- aria-label="Actions"
1388
- >
1013
+ <button
1014
+ class="pf-v6-c-menu-toggle pf-m-plain"
1015
+ type="button"
1016
+ aria-expanded="false"
1017
+ aria-label="Menu toggle"
1018
+ id="chosen-item-selected-availablemenu-toggle"
1019
+ >
1020
+ <span class="pf-v6-c-menu-toggle__icon">
1389
1021
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1390
- </button>
1391
- <ul
1392
- class="pf-v6-c-dropdown__menu"
1393
- aria-labelledby="dropdown-kebab-chosen-item-selected-available-button"
1394
- hidden
1395
- role="menu"
1396
- >
1397
- <li role="none">
1398
- <a
1399
- class="pf-v6-c-dropdown__menu-item"
1400
- role="menuitem"
1401
- href="#"
1402
- >Link</a>
1403
- </li>
1404
- <li role="none">
1405
- <button
1406
- class="pf-v6-c-dropdown__menu-item"
1407
- role="menuitem"
1408
- type="button"
1409
- >Action</button>
1410
- </li>
1411
- <li role="none">
1412
- <a
1413
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1414
- role="menuitem"
1415
- href="#"
1416
- aria-disabled="true"
1417
- tabindex="-1"
1418
- >Disabled link</a>
1419
- </li>
1420
- <li role="none">
1421
- <button
1422
- class="pf-v6-c-dropdown__menu-item"
1423
- role="menuitem"
1424
- type="button"
1425
- disabled
1426
- >Disabled action</button>
1427
- </li>
1428
- <li class="pf-v6-c-divider" role="separator"></li>
1429
- <li role="none">
1430
- <a
1431
- class="pf-v6-c-dropdown__menu-item"
1432
- role="menuitem"
1433
- href="#"
1434
- >Separated link</a>
1435
- </li>
1436
- </ul>
1437
- </div>
1022
+ </span>
1023
+ </button>
1438
1024
  </div>
1439
1025
  </div>
1440
1026
  <div class="pf-v6-c-dual-list-selector__status">
@@ -1588,63 +1174,17 @@ cssPrefix: pf-v6-c-dual-list-selector
1588
1174
  aria-hidden="true"
1589
1175
  ></i>
1590
1176
  </button>
1591
- <div class="pf-v6-c-dropdown">
1592
- <button
1593
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1594
- id="dropdown-kebab-chosen-item-selected-chosen-button"
1595
- aria-expanded="false"
1596
- type="button"
1597
- aria-label="Actions"
1598
- >
1177
+ <button
1178
+ class="pf-v6-c-menu-toggle pf-m-plain"
1179
+ type="button"
1180
+ aria-expanded="false"
1181
+ aria-label="Menu toggle"
1182
+ id="chosen-item-selected-chosenmenu-toggle"
1183
+ >
1184
+ <span class="pf-v6-c-menu-toggle__icon">
1599
1185
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1600
- </button>
1601
- <ul
1602
- class="pf-v6-c-dropdown__menu"
1603
- aria-labelledby="dropdown-kebab-chosen-item-selected-chosen-button"
1604
- hidden
1605
- role="menu"
1606
- >
1607
- <li role="none">
1608
- <a
1609
- class="pf-v6-c-dropdown__menu-item"
1610
- role="menuitem"
1611
- href="#"
1612
- >Link</a>
1613
- </li>
1614
- <li role="none">
1615
- <button
1616
- class="pf-v6-c-dropdown__menu-item"
1617
- role="menuitem"
1618
- type="button"
1619
- >Action</button>
1620
- </li>
1621
- <li role="none">
1622
- <a
1623
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1624
- role="menuitem"
1625
- href="#"
1626
- aria-disabled="true"
1627
- tabindex="-1"
1628
- >Disabled link</a>
1629
- </li>
1630
- <li role="none">
1631
- <button
1632
- class="pf-v6-c-dropdown__menu-item"
1633
- role="menuitem"
1634
- type="button"
1635
- disabled
1636
- >Disabled action</button>
1637
- </li>
1638
- <li class="pf-v6-c-divider" role="separator"></li>
1639
- <li role="none">
1640
- <a
1641
- class="pf-v6-c-dropdown__menu-item"
1642
- role="menuitem"
1643
- href="#"
1644
- >Separated link</a>
1645
- </li>
1646
- </ul>
1647
- </div>
1186
+ </span>
1187
+ </button>
1648
1188
  </div>
1649
1189
  </div>
1650
1190
  <div class="pf-v6-c-dual-list-selector__status">
@@ -1719,63 +1259,17 @@ cssPrefix: pf-v6-c-dual-list-selector
1719
1259
  aria-hidden="true"
1720
1260
  ></i>
1721
1261
  </button>
1722
- <div class="pf-v6-c-dropdown">
1723
- <button
1724
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1725
- id="dropdown-kebab-tree-available-button"
1726
- aria-expanded="false"
1727
- type="button"
1728
- aria-label="Actions"
1729
- >
1262
+ <button
1263
+ class="pf-v6-c-menu-toggle pf-m-plain"
1264
+ type="button"
1265
+ aria-expanded="false"
1266
+ aria-label="Menu toggle"
1267
+ id="tree-availablemenu-toggle"
1268
+ >
1269
+ <span class="pf-v6-c-menu-toggle__icon">
1730
1270
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1731
- </button>
1732
- <ul
1733
- class="pf-v6-c-dropdown__menu"
1734
- aria-labelledby="dropdown-kebab-tree-available-button"
1735
- hidden
1736
- role="menu"
1737
- >
1738
- <li role="none">
1739
- <a
1740
- class="pf-v6-c-dropdown__menu-item"
1741
- role="menuitem"
1742
- href="#"
1743
- >Link</a>
1744
- </li>
1745
- <li role="none">
1746
- <button
1747
- class="pf-v6-c-dropdown__menu-item"
1748
- role="menuitem"
1749
- type="button"
1750
- >Action</button>
1751
- </li>
1752
- <li role="none">
1753
- <a
1754
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1755
- role="menuitem"
1756
- href="#"
1757
- aria-disabled="true"
1758
- tabindex="-1"
1759
- >Disabled link</a>
1760
- </li>
1761
- <li role="none">
1762
- <button
1763
- class="pf-v6-c-dropdown__menu-item"
1764
- role="menuitem"
1765
- type="button"
1766
- disabled
1767
- >Disabled action</button>
1768
- </li>
1769
- <li class="pf-v6-c-divider" role="separator"></li>
1770
- <li role="none">
1771
- <a
1772
- class="pf-v6-c-dropdown__menu-item"
1773
- role="menuitem"
1774
- href="#"
1775
- >Separated link</a>
1776
- </li>
1777
- </ul>
1778
- </div>
1271
+ </span>
1272
+ </button>
1779
1273
  </div>
1780
1274
  </div>
1781
1275
  <div class="pf-v6-c-dual-list-selector__status">
@@ -2198,63 +1692,17 @@ cssPrefix: pf-v6-c-dual-list-selector
2198
1692
  aria-hidden="true"
2199
1693
  ></i>
2200
1694
  </button>
2201
- <div class="pf-v6-c-dropdown">
2202
- <button
2203
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2204
- id="dropdown-kebab-tree-chosen-button"
2205
- aria-expanded="false"
2206
- type="button"
2207
- aria-label="Actions"
2208
- >
1695
+ <button
1696
+ class="pf-v6-c-menu-toggle pf-m-plain"
1697
+ type="button"
1698
+ aria-expanded="false"
1699
+ aria-label="Menu toggle"
1700
+ id="tree-chosenmenu-toggle"
1701
+ >
1702
+ <span class="pf-v6-c-menu-toggle__icon">
2209
1703
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2210
- </button>
2211
- <ul
2212
- class="pf-v6-c-dropdown__menu"
2213
- aria-labelledby="dropdown-kebab-tree-chosen-button"
2214
- hidden
2215
- role="menu"
2216
- >
2217
- <li role="none">
2218
- <a
2219
- class="pf-v6-c-dropdown__menu-item"
2220
- role="menuitem"
2221
- href="#"
2222
- >Link</a>
2223
- </li>
2224
- <li role="none">
2225
- <button
2226
- class="pf-v6-c-dropdown__menu-item"
2227
- role="menuitem"
2228
- type="button"
2229
- >Action</button>
2230
- </li>
2231
- <li role="none">
2232
- <a
2233
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2234
- role="menuitem"
2235
- href="#"
2236
- aria-disabled="true"
2237
- tabindex="-1"
2238
- >Disabled link</a>
2239
- </li>
2240
- <li role="none">
2241
- <button
2242
- class="pf-v6-c-dropdown__menu-item"
2243
- role="menuitem"
2244
- type="button"
2245
- disabled
2246
- >Disabled action</button>
2247
- </li>
2248
- <li class="pf-v6-c-divider" role="separator"></li>
2249
- <li role="none">
2250
- <a
2251
- class="pf-v6-c-dropdown__menu-item"
2252
- role="menuitem"
2253
- href="#"
2254
- >Separated link</a>
2255
- </li>
2256
- </ul>
2257
- </div>
1704
+ </span>
1705
+ </button>
2258
1706
  </div>
2259
1707
  </div>
2260
1708
  <div class="pf-v6-c-dual-list-selector__status">
@@ -2316,63 +1764,17 @@ cssPrefix: pf-v6-c-dual-list-selector
2316
1764
  aria-hidden="true"
2317
1765
  ></i>
2318
1766
  </button>
2319
- <div class="pf-v6-c-dropdown">
2320
- <button
2321
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2322
- id="dropdown-kebab-tree-options-available-button"
2323
- aria-expanded="false"
2324
- type="button"
2325
- aria-label="Actions"
2326
- >
1767
+ <button
1768
+ class="pf-v6-c-menu-toggle pf-m-plain"
1769
+ type="button"
1770
+ aria-expanded="false"
1771
+ aria-label="Menu toggle"
1772
+ id="tree-options-availablemenu-toggle"
1773
+ >
1774
+ <span class="pf-v6-c-menu-toggle__icon">
2327
1775
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2328
- </button>
2329
- <ul
2330
- class="pf-v6-c-dropdown__menu"
2331
- aria-labelledby="dropdown-kebab-tree-options-available-button"
2332
- hidden
2333
- role="menu"
2334
- >
2335
- <li role="none">
2336
- <a
2337
- class="pf-v6-c-dropdown__menu-item"
2338
- role="menuitem"
2339
- href="#"
2340
- >Link</a>
2341
- </li>
2342
- <li role="none">
2343
- <button
2344
- class="pf-v6-c-dropdown__menu-item"
2345
- role="menuitem"
2346
- type="button"
2347
- >Action</button>
2348
- </li>
2349
- <li role="none">
2350
- <a
2351
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2352
- role="menuitem"
2353
- href="#"
2354
- aria-disabled="true"
2355
- tabindex="-1"
2356
- >Disabled link</a>
2357
- </li>
2358
- <li role="none">
2359
- <button
2360
- class="pf-v6-c-dropdown__menu-item"
2361
- role="menuitem"
2362
- type="button"
2363
- disabled
2364
- >Disabled action</button>
2365
- </li>
2366
- <li class="pf-v6-c-divider" role="separator"></li>
2367
- <li role="none">
2368
- <a
2369
- class="pf-v6-c-dropdown__menu-item"
2370
- role="menuitem"
2371
- href="#"
2372
- >Separated link</a>
2373
- </li>
2374
- </ul>
2375
- </div>
1776
+ </span>
1777
+ </button>
2376
1778
  </div>
2377
1779
  </div>
2378
1780
  <div class="pf-v6-c-dual-list-selector__status">
@@ -2776,63 +2178,17 @@ cssPrefix: pf-v6-c-dual-list-selector
2776
2178
  aria-hidden="true"
2777
2179
  ></i>
2778
2180
  </button>
2779
- <div class="pf-v6-c-dropdown">
2780
- <button
2781
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2782
- id="dropdown-kebab-tree-options-chosen-button"
2783
- aria-expanded="false"
2784
- type="button"
2785
- aria-label="Actions"
2786
- >
2181
+ <button
2182
+ class="pf-v6-c-menu-toggle pf-m-plain"
2183
+ type="button"
2184
+ aria-expanded="false"
2185
+ aria-label="Menu toggle"
2186
+ id="tree-options-chosenmenu-toggle"
2187
+ >
2188
+ <span class="pf-v6-c-menu-toggle__icon">
2787
2189
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2788
- </button>
2789
- <ul
2790
- class="pf-v6-c-dropdown__menu"
2791
- aria-labelledby="dropdown-kebab-tree-options-chosen-button"
2792
- hidden
2793
- role="menu"
2794
- >
2795
- <li role="none">
2796
- <a
2797
- class="pf-v6-c-dropdown__menu-item"
2798
- role="menuitem"
2799
- href="#"
2800
- >Link</a>
2801
- </li>
2802
- <li role="none">
2803
- <button
2804
- class="pf-v6-c-dropdown__menu-item"
2805
- role="menuitem"
2806
- type="button"
2807
- >Action</button>
2808
- </li>
2809
- <li role="none">
2810
- <a
2811
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2812
- role="menuitem"
2813
- href="#"
2814
- aria-disabled="true"
2815
- tabindex="-1"
2816
- >Disabled link</a>
2817
- </li>
2818
- <li role="none">
2819
- <button
2820
- class="pf-v6-c-dropdown__menu-item"
2821
- role="menuitem"
2822
- type="button"
2823
- disabled
2824
- >Disabled action</button>
2825
- </li>
2826
- <li class="pf-v6-c-divider" role="separator"></li>
2827
- <li role="none">
2828
- <a
2829
- class="pf-v6-c-dropdown__menu-item"
2830
- role="menuitem"
2831
- href="#"
2832
- >Separated link</a>
2833
- </li>
2834
- </ul>
2835
- </div>
2190
+ </span>
2191
+ </button>
2836
2192
  </div>
2837
2193
  </div>
2838
2194
  <div class="pf-v6-c-dual-list-selector__status">
@@ -2961,63 +2317,17 @@ cssPrefix: pf-v6-c-dual-list-selector
2961
2317
  aria-hidden="true"
2962
2318
  ></i>
2963
2319
  </button>
2964
- <div class="pf-v6-c-dropdown">
2965
- <button
2966
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2967
- id="dropdown-kebab-draggable-available-button"
2968
- aria-expanded="false"
2969
- type="button"
2970
- aria-label="Actions"
2971
- >
2320
+ <button
2321
+ class="pf-v6-c-menu-toggle pf-m-plain"
2322
+ type="button"
2323
+ aria-expanded="false"
2324
+ aria-label="Menu toggle"
2325
+ id="draggable-availablemenu-toggle"
2326
+ >
2327
+ <span class="pf-v6-c-menu-toggle__icon">
2972
2328
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2973
- </button>
2974
- <ul
2975
- class="pf-v6-c-dropdown__menu"
2976
- aria-labelledby="dropdown-kebab-draggable-available-button"
2977
- hidden
2978
- role="menu"
2979
- >
2980
- <li role="none">
2981
- <a
2982
- class="pf-v6-c-dropdown__menu-item"
2983
- role="menuitem"
2984
- href="#"
2985
- >Link</a>
2986
- </li>
2987
- <li role="none">
2988
- <button
2989
- class="pf-v6-c-dropdown__menu-item"
2990
- role="menuitem"
2991
- type="button"
2992
- >Action</button>
2993
- </li>
2994
- <li role="none">
2995
- <a
2996
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2997
- role="menuitem"
2998
- href="#"
2999
- aria-disabled="true"
3000
- tabindex="-1"
3001
- >Disabled link</a>
3002
- </li>
3003
- <li role="none">
3004
- <button
3005
- class="pf-v6-c-dropdown__menu-item"
3006
- role="menuitem"
3007
- type="button"
3008
- disabled
3009
- >Disabled action</button>
3010
- </li>
3011
- <li class="pf-v6-c-divider" role="separator"></li>
3012
- <li role="none">
3013
- <a
3014
- class="pf-v6-c-dropdown__menu-item"
3015
- role="menuitem"
3016
- href="#"
3017
- >Separated link</a>
3018
- </li>
3019
- </ul>
3020
- </div>
2329
+ </span>
2330
+ </button>
3021
2331
  </div>
3022
2332
  </div>
3023
2333
  <div class="pf-v6-c-dual-list-selector__status">
@@ -3149,63 +2459,17 @@ cssPrefix: pf-v6-c-dual-list-selector
3149
2459
  aria-hidden="true"
3150
2460
  ></i>
3151
2461
  </button>
3152
- <div class="pf-v6-c-dropdown">
3153
- <button
3154
- class="pf-v6-c-dropdown__toggle pf-m-plain"
3155
- id="dropdown-kebab-draggable-chosen-button"
3156
- aria-expanded="false"
3157
- type="button"
3158
- aria-label="Actions"
3159
- >
2462
+ <button
2463
+ class="pf-v6-c-menu-toggle pf-m-plain"
2464
+ type="button"
2465
+ aria-expanded="false"
2466
+ aria-label="Menu toggle"
2467
+ id="draggable-chosenmenu-toggle"
2468
+ >
2469
+ <span class="pf-v6-c-menu-toggle__icon">
3160
2470
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3161
- </button>
3162
- <ul
3163
- class="pf-v6-c-dropdown__menu"
3164
- aria-labelledby="dropdown-kebab-draggable-chosen-button"
3165
- hidden
3166
- role="menu"
3167
- >
3168
- <li role="none">
3169
- <a
3170
- class="pf-v6-c-dropdown__menu-item"
3171
- role="menuitem"
3172
- href="#"
3173
- >Link</a>
3174
- </li>
3175
- <li role="none">
3176
- <button
3177
- class="pf-v6-c-dropdown__menu-item"
3178
- role="menuitem"
3179
- type="button"
3180
- >Action</button>
3181
- </li>
3182
- <li role="none">
3183
- <a
3184
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
3185
- role="menuitem"
3186
- href="#"
3187
- aria-disabled="true"
3188
- tabindex="-1"
3189
- >Disabled link</a>
3190
- </li>
3191
- <li role="none">
3192
- <button
3193
- class="pf-v6-c-dropdown__menu-item"
3194
- role="menuitem"
3195
- type="button"
3196
- disabled
3197
- >Disabled action</button>
3198
- </li>
3199
- <li class="pf-v6-c-divider" role="separator"></li>
3200
- <li role="none">
3201
- <a
3202
- class="pf-v6-c-dropdown__menu-item"
3203
- role="menuitem"
3204
- href="#"
3205
- >Separated link</a>
3206
- </li>
3207
- </ul>
3208
- </div>
2471
+ </span>
2472
+ </button>
3209
2473
  </div>
3210
2474
  </div>
3211
2475
  <div class="pf-v6-c-dual-list-selector__status">