@patternfly/patternfly 6.0.0-alpha.131 → 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 (51) 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-charts.css +339 -8
  44. package/patternfly-charts.scss +21 -8
  45. package/patternfly-no-globals.css +20 -15
  46. package/patternfly.css +20 -15
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/utilities/Display/display.css +38 -0
  50. package/utilities/Display/display.scss +3 -1
  51. package/utilities/_index.css +38 -0
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -163,63 +163,17 @@ When a list item includes more than one block of content, it can be difficult fo
163
163
  </div>
164
164
  <div class="pf-v6-c-data-list__item-action">
165
165
  <div class="pf-v6-c-data-list__action">
166
- <div class="pf-v6-c-dropdown">
167
- <button
168
- class="pf-v6-c-dropdown__toggle pf-m-plain"
169
- id="data-list-checkboxes-actions-addl-cells-item-1-dropdown-kebab-button"
170
- aria-expanded="false"
171
- type="button"
172
- aria-label="Actions"
173
- >
166
+ <button
167
+ class="pf-v6-c-menu-toggle pf-m-plain"
168
+ type="button"
169
+ aria-expanded="false"
170
+ aria-label="Menu toggle"
171
+ id="data-list-checkboxes-actions-addl-cellsitem-1menu-toggle"
172
+ >
173
+ <span class="pf-v6-c-menu-toggle__icon">
174
174
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
175
- </button>
176
- <ul
177
- class="pf-v6-c-dropdown__menu pf-m-align-right"
178
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1-dropdown-kebab-button"
179
- hidden
180
- role="menu"
181
- >
182
- <li role="none">
183
- <a
184
- class="pf-v6-c-dropdown__menu-item"
185
- role="menuitem"
186
- href="#"
187
- >Link</a>
188
- </li>
189
- <li role="none">
190
- <button
191
- class="pf-v6-c-dropdown__menu-item"
192
- role="menuitem"
193
- type="button"
194
- >Action</button>
195
- </li>
196
- <li role="none">
197
- <a
198
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
199
- role="menuitem"
200
- href="#"
201
- aria-disabled="true"
202
- tabindex="-1"
203
- >Disabled link</a>
204
- </li>
205
- <li role="none">
206
- <button
207
- class="pf-v6-c-dropdown__menu-item"
208
- role="menuitem"
209
- type="button"
210
- disabled
211
- >Disabled action</button>
212
- </li>
213
- <li class="pf-v6-c-divider" role="separator"></li>
214
- <li role="none">
215
- <a
216
- class="pf-v6-c-dropdown__menu-item"
217
- role="menuitem"
218
- href="#"
219
- >Separated link</a>
220
- </li>
221
- </ul>
222
- </div>
175
+ </span>
176
+ </button>
223
177
  </div>
224
178
  </div>
225
179
  </div>
@@ -259,63 +213,17 @@ When a list item includes more than one block of content, it can be difficult fo
259
213
  </div>
260
214
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
261
215
  <div class="pf-v6-c-data-list__action">
262
- <div class="pf-v6-c-dropdown">
263
- <button
264
- class="pf-v6-c-dropdown__toggle pf-m-plain"
265
- id="data-list-checkboxes-actions-addl-cells-item-2-dropdown-kebab-button"
266
- aria-expanded="false"
267
- type="button"
268
- aria-label="Actions"
269
- >
216
+ <button
217
+ class="pf-v6-c-menu-toggle pf-m-plain"
218
+ type="button"
219
+ aria-expanded="false"
220
+ aria-label="Menu toggle"
221
+ id="data-list-checkboxes-actions-addl-cellsitem-2menu-toggle"
222
+ >
223
+ <span class="pf-v6-c-menu-toggle__icon">
270
224
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
271
- </button>
272
- <ul
273
- class="pf-v6-c-dropdown__menu pf-m-align-right"
274
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2-dropdown-kebab-button"
275
- hidden
276
- role="menu"
277
- >
278
- <li role="none">
279
- <a
280
- class="pf-v6-c-dropdown__menu-item"
281
- role="menuitem"
282
- href="#"
283
- >Link</a>
284
- </li>
285
- <li role="none">
286
- <button
287
- class="pf-v6-c-dropdown__menu-item"
288
- role="menuitem"
289
- type="button"
290
- >Action</button>
291
- </li>
292
- <li role="none">
293
- <a
294
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
295
- role="menuitem"
296
- href="#"
297
- aria-disabled="true"
298
- tabindex="-1"
299
- >Disabled link</a>
300
- </li>
301
- <li role="none">
302
- <button
303
- class="pf-v6-c-dropdown__menu-item"
304
- role="menuitem"
305
- type="button"
306
- disabled
307
- >Disabled action</button>
308
- </li>
309
- <li class="pf-v6-c-divider" role="separator"></li>
310
- <li role="none">
311
- <a
312
- class="pf-v6-c-dropdown__menu-item"
313
- role="menuitem"
314
- href="#"
315
- >Separated link</a>
316
- </li>
317
- </ul>
318
- </div>
225
+ </span>
226
+ </button>
319
227
  </div>
320
228
  </div>
321
229
  <div
@@ -361,63 +269,17 @@ When a list item includes more than one block of content, it can be difficult fo
361
269
  </div>
362
270
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
363
271
  <div class="pf-v6-c-data-list__action">
364
- <div class="pf-v6-c-dropdown">
365
- <button
366
- class="pf-v6-c-dropdown__toggle pf-m-plain"
367
- id="data-list-checkboxes-actions-addl-cells-item-3-dropdown-kebab-button"
368
- aria-expanded="false"
369
- type="button"
370
- aria-label="Actions"
371
- >
272
+ <button
273
+ class="pf-v6-c-menu-toggle pf-m-plain"
274
+ type="button"
275
+ aria-expanded="false"
276
+ aria-label="Menu toggle"
277
+ id="data-list-checkboxes-actions-addl-cellsitem-3menu-toggle"
278
+ >
279
+ <span class="pf-v6-c-menu-toggle__icon">
372
280
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
373
- </button>
374
- <ul
375
- class="pf-v6-c-dropdown__menu pf-m-align-right"
376
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3-dropdown-kebab-button"
377
- hidden
378
- role="menu"
379
- >
380
- <li role="none">
381
- <a
382
- class="pf-v6-c-dropdown__menu-item"
383
- role="menuitem"
384
- href="#"
385
- >Link</a>
386
- </li>
387
- <li role="none">
388
- <button
389
- class="pf-v6-c-dropdown__menu-item"
390
- role="menuitem"
391
- type="button"
392
- >Action</button>
393
- </li>
394
- <li role="none">
395
- <a
396
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
397
- role="menuitem"
398
- href="#"
399
- aria-disabled="true"
400
- tabindex="-1"
401
- >Disabled link</a>
402
- </li>
403
- <li role="none">
404
- <button
405
- class="pf-v6-c-dropdown__menu-item"
406
- role="menuitem"
407
- type="button"
408
- disabled
409
- >Disabled action</button>
410
- </li>
411
- <li class="pf-v6-c-divider" role="separator"></li>
412
- <li role="none">
413
- <a
414
- class="pf-v6-c-dropdown__menu-item"
415
- role="menuitem"
416
- href="#"
417
- >Separated link</a>
418
- </li>
419
- </ul>
420
- </div>
281
+ </span>
282
+ </button>
421
283
  </div>
422
284
  </div>
423
285
  <div
@@ -503,63 +365,17 @@ When a list item includes more than one block of content, it can be difficult fo
503
365
  </div>
504
366
  <div class="pf-v6-c-data-list__item-action">
505
367
  <div class="pf-v6-c-data-list__action">
506
- <div class="pf-v6-c-dropdown">
507
- <button
508
- class="pf-v6-c-dropdown__toggle pf-m-plain"
509
- id="data-list-expandable-item-1-dropdown-kebab-button"
510
- aria-expanded="false"
511
- type="button"
512
- aria-label="Actions"
513
- >
368
+ <button
369
+ class="pf-v6-c-menu-toggle pf-m-plain"
370
+ type="button"
371
+ aria-expanded="false"
372
+ aria-label="Menu toggle"
373
+ id="data-list-expandableitem-1menu-toggle"
374
+ >
375
+ <span class="pf-v6-c-menu-toggle__icon">
514
376
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
515
- </button>
516
- <ul
517
- class="pf-v6-c-dropdown__menu pf-m-align-right"
518
- aria-labelledby="data-list-expandable-item-1-dropdown-kebab-button"
519
- hidden
520
- role="menu"
521
- >
522
- <li role="none">
523
- <a
524
- class="pf-v6-c-dropdown__menu-item"
525
- role="menuitem"
526
- href="#"
527
- >Link</a>
528
- </li>
529
- <li role="none">
530
- <button
531
- class="pf-v6-c-dropdown__menu-item"
532
- role="menuitem"
533
- type="button"
534
- >Action</button>
535
- </li>
536
- <li role="none">
537
- <a
538
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
539
- role="menuitem"
540
- href="#"
541
- aria-disabled="true"
542
- tabindex="-1"
543
- >Disabled link</a>
544
- </li>
545
- <li role="none">
546
- <button
547
- class="pf-v6-c-dropdown__menu-item"
548
- role="menuitem"
549
- type="button"
550
- disabled
551
- >Disabled action</button>
552
- </li>
553
- <li class="pf-v6-c-divider" role="separator"></li>
554
- <li role="none">
555
- <a
556
- class="pf-v6-c-dropdown__menu-item"
557
- role="menuitem"
558
- href="#"
559
- >Separated link</a>
560
- </li>
561
- </ul>
562
- </div>
377
+ </span>
378
+ </button>
563
379
  </div>
564
380
  </div>
565
381
  </div>
@@ -610,63 +426,17 @@ When a list item includes more than one block of content, it can be difficult fo
610
426
  </div>
611
427
  <div class="pf-v6-c-data-list__item-action">
612
428
  <div class="pf-v6-c-data-list__action">
613
- <div class="pf-v6-c-dropdown">
614
- <button
615
- class="pf-v6-c-dropdown__toggle pf-m-plain"
616
- id="data-list-expandable-item-2-dropdown-kebab-button"
617
- aria-expanded="false"
618
- type="button"
619
- aria-label="Actions"
620
- >
429
+ <button
430
+ class="pf-v6-c-menu-toggle pf-m-plain"
431
+ type="button"
432
+ aria-expanded="false"
433
+ aria-label="Menu toggle"
434
+ id="data-list-expandableitem-2menu-toggle"
435
+ >
436
+ <span class="pf-v6-c-menu-toggle__icon">
621
437
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
622
- </button>
623
- <ul
624
- class="pf-v6-c-dropdown__menu pf-m-align-right"
625
- aria-labelledby="data-list-expandable-item-2-dropdown-kebab-button"
626
- hidden
627
- role="menu"
628
- >
629
- <li role="none">
630
- <a
631
- class="pf-v6-c-dropdown__menu-item"
632
- role="menuitem"
633
- href="#"
634
- >Link</a>
635
- </li>
636
- <li role="none">
637
- <button
638
- class="pf-v6-c-dropdown__menu-item"
639
- role="menuitem"
640
- type="button"
641
- >Action</button>
642
- </li>
643
- <li role="none">
644
- <a
645
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
646
- role="menuitem"
647
- href="#"
648
- aria-disabled="true"
649
- tabindex="-1"
650
- >Disabled link</a>
651
- </li>
652
- <li role="none">
653
- <button
654
- class="pf-v6-c-dropdown__menu-item"
655
- role="menuitem"
656
- type="button"
657
- disabled
658
- >Disabled action</button>
659
- </li>
660
- <li class="pf-v6-c-divider" role="separator"></li>
661
- <li role="none">
662
- <a
663
- class="pf-v6-c-dropdown__menu-item"
664
- role="menuitem"
665
- href="#"
666
- >Separated link</a>
667
- </li>
668
- </ul>
669
- </div>
438
+ </span>
439
+ </button>
670
440
  </div>
671
441
  </div>
672
442
  </div>
@@ -721,63 +491,17 @@ When a list item includes more than one block of content, it can be difficult fo
721
491
  </div>
722
492
  <div class="pf-v6-c-data-list__item-action">
723
493
  <div class="pf-v6-c-data-list__action">
724
- <div class="pf-v6-c-dropdown">
725
- <button
726
- class="pf-v6-c-dropdown__toggle pf-m-plain"
727
- id="data-list-expandable-item-3-dropdown-kebab-button"
728
- aria-expanded="false"
729
- type="button"
730
- aria-label="Actions"
731
- >
494
+ <button
495
+ class="pf-v6-c-menu-toggle pf-m-plain"
496
+ type="button"
497
+ aria-expanded="false"
498
+ aria-label="Menu toggle"
499
+ id="data-list-expandableitem-3menu-toggle"
500
+ >
501
+ <span class="pf-v6-c-menu-toggle__icon">
732
502
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
733
- </button>
734
- <ul
735
- class="pf-v6-c-dropdown__menu pf-m-align-right"
736
- aria-labelledby="data-list-expandable-item-3-dropdown-kebab-button"
737
- hidden
738
- role="menu"
739
- >
740
- <li role="none">
741
- <a
742
- class="pf-v6-c-dropdown__menu-item"
743
- role="menuitem"
744
- href="#"
745
- >Link</a>
746
- </li>
747
- <li role="none">
748
- <button
749
- class="pf-v6-c-dropdown__menu-item"
750
- role="menuitem"
751
- type="button"
752
- >Action</button>
753
- </li>
754
- <li role="none">
755
- <a
756
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
757
- role="menuitem"
758
- href="#"
759
- aria-disabled="true"
760
- tabindex="-1"
761
- >Disabled link</a>
762
- </li>
763
- <li role="none">
764
- <button
765
- class="pf-v6-c-dropdown__menu-item"
766
- role="menuitem"
767
- type="button"
768
- disabled
769
- >Disabled action</button>
770
- </li>
771
- <li class="pf-v6-c-divider" role="separator"></li>
772
- <li role="none">
773
- <a
774
- class="pf-v6-c-dropdown__menu-item"
775
- role="menuitem"
776
- href="#"
777
- >Separated link</a>
778
- </li>
779
- </ul>
780
- </div>
503
+ </span>
504
+ </button>
781
505
  </div>
782
506
  </div>
783
507
  </div>
@@ -844,63 +568,17 @@ When a list item includes more than one block of content, it can be difficult fo
844
568
  </div>
845
569
  <div class="pf-v6-c-data-list__item-action">
846
570
  <div class="pf-v6-c-data-list__action">
847
- <div class="pf-v6-c-dropdown">
848
- <button
849
- class="pf-v6-c-dropdown__toggle pf-m-plain"
850
- id="data-list-expandable-compact-item-1-dropdown-kebab-button"
851
- aria-expanded="false"
852
- type="button"
853
- aria-label="Actions"
854
- >
571
+ <button
572
+ class="pf-v6-c-menu-toggle pf-m-plain"
573
+ type="button"
574
+ aria-expanded="false"
575
+ aria-label="Menu toggle"
576
+ id="data-list-expandable-compactitem-1menu-toggle"
577
+ >
578
+ <span class="pf-v6-c-menu-toggle__icon">
855
579
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
856
- </button>
857
- <ul
858
- class="pf-v6-c-dropdown__menu pf-m-align-right"
859
- aria-labelledby="data-list-expandable-compact-item-1-dropdown-kebab-button"
860
- hidden
861
- role="menu"
862
- >
863
- <li role="none">
864
- <a
865
- class="pf-v6-c-dropdown__menu-item"
866
- role="menuitem"
867
- href="#"
868
- >Link</a>
869
- </li>
870
- <li role="none">
871
- <button
872
- class="pf-v6-c-dropdown__menu-item"
873
- role="menuitem"
874
- type="button"
875
- >Action</button>
876
- </li>
877
- <li role="none">
878
- <a
879
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
880
- role="menuitem"
881
- href="#"
882
- aria-disabled="true"
883
- tabindex="-1"
884
- >Disabled link</a>
885
- </li>
886
- <li role="none">
887
- <button
888
- class="pf-v6-c-dropdown__menu-item"
889
- role="menuitem"
890
- type="button"
891
- disabled
892
- >Disabled action</button>
893
- </li>
894
- <li class="pf-v6-c-divider" role="separator"></li>
895
- <li role="none">
896
- <a
897
- class="pf-v6-c-dropdown__menu-item"
898
- role="menuitem"
899
- href="#"
900
- >Separated link</a>
901
- </li>
902
- </ul>
903
- </div>
580
+ </span>
581
+ </button>
904
582
  </div>
905
583
  </div>
906
584
  </div>
@@ -954,63 +632,17 @@ When a list item includes more than one block of content, it can be difficult fo
954
632
  </div>
955
633
  <div class="pf-v6-c-data-list__item-action">
956
634
  <div class="pf-v6-c-data-list__action">
957
- <div class="pf-v6-c-dropdown">
958
- <button
959
- class="pf-v6-c-dropdown__toggle pf-m-plain"
960
- id="data-list-expandable-compact-item-2-dropdown-kebab-button"
961
- aria-expanded="false"
962
- type="button"
963
- aria-label="Actions"
964
- >
635
+ <button
636
+ class="pf-v6-c-menu-toggle pf-m-plain"
637
+ type="button"
638
+ aria-expanded="false"
639
+ aria-label="Menu toggle"
640
+ id="data-list-expandable-compactitem-2menu-toggle"
641
+ >
642
+ <span class="pf-v6-c-menu-toggle__icon">
965
643
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
966
- </button>
967
- <ul
968
- class="pf-v6-c-dropdown__menu pf-m-align-right"
969
- aria-labelledby="data-list-expandable-compact-item-2-dropdown-kebab-button"
970
- hidden
971
- role="menu"
972
- >
973
- <li role="none">
974
- <a
975
- class="pf-v6-c-dropdown__menu-item"
976
- role="menuitem"
977
- href="#"
978
- >Link</a>
979
- </li>
980
- <li role="none">
981
- <button
982
- class="pf-v6-c-dropdown__menu-item"
983
- role="menuitem"
984
- type="button"
985
- >Action</button>
986
- </li>
987
- <li role="none">
988
- <a
989
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
990
- role="menuitem"
991
- href="#"
992
- aria-disabled="true"
993
- tabindex="-1"
994
- >Disabled link</a>
995
- </li>
996
- <li role="none">
997
- <button
998
- class="pf-v6-c-dropdown__menu-item"
999
- role="menuitem"
1000
- type="button"
1001
- disabled
1002
- >Disabled action</button>
1003
- </li>
1004
- <li class="pf-v6-c-divider" role="separator"></li>
1005
- <li role="none">
1006
- <a
1007
- class="pf-v6-c-dropdown__menu-item"
1008
- role="menuitem"
1009
- href="#"
1010
- >Separated link</a>
1011
- </li>
1012
- </ul>
1013
- </div>
644
+ </span>
645
+ </button>
1014
646
  </div>
1015
647
  </div>
1016
648
  </div>
@@ -1065,63 +697,17 @@ When a list item includes more than one block of content, it can be difficult fo
1065
697
  </div>
1066
698
  <div class="pf-v6-c-data-list__item-action">
1067
699
  <div class="pf-v6-c-data-list__action">
1068
- <div class="pf-v6-c-dropdown">
1069
- <button
1070
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1071
- id="data-list-expandable-compact-item-3-dropdown-kebab-button"
1072
- aria-expanded="false"
1073
- type="button"
1074
- aria-label="Actions"
1075
- >
700
+ <button
701
+ class="pf-v6-c-menu-toggle pf-m-plain"
702
+ type="button"
703
+ aria-expanded="false"
704
+ aria-label="Menu toggle"
705
+ id="data-list-expandable-compactitem-3menu-toggle"
706
+ >
707
+ <span class="pf-v6-c-menu-toggle__icon">
1076
708
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1077
- </button>
1078
- <ul
1079
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1080
- aria-labelledby="data-list-expandable-compact-item-3-dropdown-kebab-button"
1081
- hidden
1082
- role="menu"
1083
- >
1084
- <li role="none">
1085
- <a
1086
- class="pf-v6-c-dropdown__menu-item"
1087
- role="menuitem"
1088
- href="#"
1089
- >Link</a>
1090
- </li>
1091
- <li role="none">
1092
- <button
1093
- class="pf-v6-c-dropdown__menu-item"
1094
- role="menuitem"
1095
- type="button"
1096
- >Action</button>
1097
- </li>
1098
- <li role="none">
1099
- <a
1100
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1101
- role="menuitem"
1102
- href="#"
1103
- aria-disabled="true"
1104
- tabindex="-1"
1105
- >Disabled link</a>
1106
- </li>
1107
- <li role="none">
1108
- <button
1109
- class="pf-v6-c-dropdown__menu-item"
1110
- role="menuitem"
1111
- type="button"
1112
- disabled
1113
- >Disabled action</button>
1114
- </li>
1115
- <li class="pf-v6-c-divider" role="separator"></li>
1116
- <li role="none">
1117
- <a
1118
- class="pf-v6-c-dropdown__menu-item"
1119
- role="menuitem"
1120
- href="#"
1121
- >Separated link</a>
1122
- </li>
1123
- </ul>
1124
- </div>
709
+ </span>
710
+ </button>
1125
711
  </div>
1126
712
  </div>
1127
713
  </div>
@@ -1188,63 +774,17 @@ When a list item includes more than one block of content, it can be difficult fo
1188
774
  </div>
1189
775
  <div class="pf-v6-c-data-list__item-action">
1190
776
  <div class="pf-v6-c-data-list__action">
1191
- <div class="pf-v6-c-dropdown">
1192
- <button
1193
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1194
- id="data-list-expandable-nested-item-1-dropdown-kebab-button"
1195
- aria-expanded="false"
1196
- type="button"
1197
- aria-label="Actions"
1198
- >
777
+ <button
778
+ class="pf-v6-c-menu-toggle pf-m-plain"
779
+ type="button"
780
+ aria-expanded="false"
781
+ aria-label="Menu toggle"
782
+ id="data-list-expandable-nesteditem-1menu-toggle"
783
+ >
784
+ <span class="pf-v6-c-menu-toggle__icon">
1199
785
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1200
- </button>
1201
- <ul
1202
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1203
- aria-labelledby="data-list-expandable-nested-item-1-dropdown-kebab-button"
1204
- hidden
1205
- role="menu"
1206
- >
1207
- <li role="none">
1208
- <a
1209
- class="pf-v6-c-dropdown__menu-item"
1210
- role="menuitem"
1211
- href="#"
1212
- >Link</a>
1213
- </li>
1214
- <li role="none">
1215
- <button
1216
- class="pf-v6-c-dropdown__menu-item"
1217
- role="menuitem"
1218
- type="button"
1219
- >Action</button>
1220
- </li>
1221
- <li role="none">
1222
- <a
1223
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1224
- role="menuitem"
1225
- href="#"
1226
- aria-disabled="true"
1227
- tabindex="-1"
1228
- >Disabled link</a>
1229
- </li>
1230
- <li role="none">
1231
- <button
1232
- class="pf-v6-c-dropdown__menu-item"
1233
- role="menuitem"
1234
- type="button"
1235
- disabled
1236
- >Disabled action</button>
1237
- </li>
1238
- <li class="pf-v6-c-divider" role="separator"></li>
1239
- <li role="none">
1240
- <a
1241
- class="pf-v6-c-dropdown__menu-item"
1242
- role="menuitem"
1243
- href="#"
1244
- >Separated link</a>
1245
- </li>
1246
- </ul>
1247
- </div>
786
+ </span>
787
+ </button>
1248
788
  </div>
1249
789
  </div>
1250
790
  </div>
@@ -1424,63 +964,17 @@ When a list item includes more than one block of content, it can be difficult fo
1424
964
  </div>
1425
965
  <div class="pf-v6-c-data-list__item-action">
1426
966
  <div class="pf-v6-c-data-list__action">
1427
- <div class="pf-v6-c-dropdown">
1428
- <button
1429
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1430
- id="data-list-expandable-nested-item-2-dropdown-kebab-button"
1431
- aria-expanded="false"
1432
- type="button"
1433
- aria-label="Actions"
1434
- >
967
+ <button
968
+ class="pf-v6-c-menu-toggle pf-m-plain"
969
+ type="button"
970
+ aria-expanded="false"
971
+ aria-label="Menu toggle"
972
+ id="data-list-expandable-nesteditem-2menu-toggle"
973
+ >
974
+ <span class="pf-v6-c-menu-toggle__icon">
1435
975
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1436
- </button>
1437
- <ul
1438
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1439
- aria-labelledby="data-list-expandable-nested-item-2-dropdown-kebab-button"
1440
- hidden
1441
- role="menu"
1442
- >
1443
- <li role="none">
1444
- <a
1445
- class="pf-v6-c-dropdown__menu-item"
1446
- role="menuitem"
1447
- href="#"
1448
- >Link</a>
1449
- </li>
1450
- <li role="none">
1451
- <button
1452
- class="pf-v6-c-dropdown__menu-item"
1453
- role="menuitem"
1454
- type="button"
1455
- >Action</button>
1456
- </li>
1457
- <li role="none">
1458
- <a
1459
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1460
- role="menuitem"
1461
- href="#"
1462
- aria-disabled="true"
1463
- tabindex="-1"
1464
- >Disabled link</a>
1465
- </li>
1466
- <li role="none">
1467
- <button
1468
- class="pf-v6-c-dropdown__menu-item"
1469
- role="menuitem"
1470
- type="button"
1471
- disabled
1472
- >Disabled action</button>
1473
- </li>
1474
- <li class="pf-v6-c-divider" role="separator"></li>
1475
- <li role="none">
1476
- <a
1477
- class="pf-v6-c-dropdown__menu-item"
1478
- role="menuitem"
1479
- href="#"
1480
- >Separated link</a>
1481
- </li>
1482
- </ul>
1483
- </div>
976
+ </span>
977
+ </button>
1484
978
  </div>
1485
979
  </div>
1486
980
  </div>
@@ -1535,63 +1029,17 @@ When a list item includes more than one block of content, it can be difficult fo
1535
1029
  </div>
1536
1030
  <div class="pf-v6-c-data-list__item-action">
1537
1031
  <div class="pf-v6-c-data-list__action">
1538
- <div class="pf-v6-c-dropdown">
1539
- <button
1540
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1541
- id="data-list-expandable-nested-item-3-dropdown-kebab-button"
1542
- aria-expanded="false"
1543
- type="button"
1544
- aria-label="Actions"
1545
- >
1032
+ <button
1033
+ class="pf-v6-c-menu-toggle pf-m-plain"
1034
+ type="button"
1035
+ aria-expanded="false"
1036
+ aria-label="Menu toggle"
1037
+ id="data-list-expandable-nesteditem-3menu-toggle"
1038
+ >
1039
+ <span class="pf-v6-c-menu-toggle__icon">
1546
1040
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1547
- </button>
1548
- <ul
1549
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1550
- aria-labelledby="data-list-expandable-nested-item-3-dropdown-kebab-button"
1551
- hidden
1552
- role="menu"
1553
- >
1554
- <li role="none">
1555
- <a
1556
- class="pf-v6-c-dropdown__menu-item"
1557
- role="menuitem"
1558
- href="#"
1559
- >Link</a>
1560
- </li>
1561
- <li role="none">
1562
- <button
1563
- class="pf-v6-c-dropdown__menu-item"
1564
- role="menuitem"
1565
- type="button"
1566
- >Action</button>
1567
- </li>
1568
- <li role="none">
1569
- <a
1570
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1571
- role="menuitem"
1572
- href="#"
1573
- aria-disabled="true"
1574
- tabindex="-1"
1575
- >Disabled link</a>
1576
- </li>
1577
- <li role="none">
1578
- <button
1579
- class="pf-v6-c-dropdown__menu-item"
1580
- role="menuitem"
1581
- type="button"
1582
- disabled
1583
- >Disabled action</button>
1584
- </li>
1585
- <li class="pf-v6-c-divider" role="separator"></li>
1586
- <li role="none">
1587
- <a
1588
- class="pf-v6-c-dropdown__menu-item"
1589
- role="menuitem"
1590
- href="#"
1591
- >Separated link</a>
1592
- </li>
1593
- </ul>
1594
- </div>
1041
+ </span>
1042
+ </button>
1595
1043
  </div>
1596
1044
  </div>
1597
1045
  </div>
@@ -1659,63 +1107,17 @@ When a list item includes more than one block of content, it can be difficult fo
1659
1107
  </div>
1660
1108
  <div class="pf-v6-c-data-list__item-action">
1661
1109
  <div class="pf-v6-c-data-list__action">
1662
- <div class="pf-v6-c-dropdown">
1663
- <button
1664
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1665
- id="data-list-compact-item-1-dropdown-kebab-button"
1666
- aria-expanded="false"
1667
- type="button"
1668
- aria-label="Actions"
1669
- >
1110
+ <button
1111
+ class="pf-v6-c-menu-toggle pf-m-plain"
1112
+ type="button"
1113
+ aria-expanded="false"
1114
+ aria-label="Menu toggle"
1115
+ id="data-list-compactitem-1menu-toggle"
1116
+ >
1117
+ <span class="pf-v6-c-menu-toggle__icon">
1670
1118
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1671
- </button>
1672
- <ul
1673
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1674
- aria-labelledby="data-list-compact-item-1-dropdown-kebab-button"
1675
- hidden
1676
- role="menu"
1677
- >
1678
- <li role="none">
1679
- <a
1680
- class="pf-v6-c-dropdown__menu-item"
1681
- role="menuitem"
1682
- href="#"
1683
- >Link</a>
1684
- </li>
1685
- <li role="none">
1686
- <button
1687
- class="pf-v6-c-dropdown__menu-item"
1688
- role="menuitem"
1689
- type="button"
1690
- >Action</button>
1691
- </li>
1692
- <li role="none">
1693
- <a
1694
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1695
- role="menuitem"
1696
- href="#"
1697
- aria-disabled="true"
1698
- tabindex="-1"
1699
- >Disabled link</a>
1700
- </li>
1701
- <li role="none">
1702
- <button
1703
- class="pf-v6-c-dropdown__menu-item"
1704
- role="menuitem"
1705
- type="button"
1706
- disabled
1707
- >Disabled action</button>
1708
- </li>
1709
- <li class="pf-v6-c-divider" role="separator"></li>
1710
- <li role="none">
1711
- <a
1712
- class="pf-v6-c-dropdown__menu-item"
1713
- role="menuitem"
1714
- href="#"
1715
- >Separated link</a>
1716
- </li>
1717
- </ul>
1718
- </div>
1119
+ </span>
1120
+ </button>
1719
1121
  </div>
1720
1122
  </div>
1721
1123
  </div>
@@ -1753,63 +1155,17 @@ When a list item includes more than one block of content, it can be difficult fo
1753
1155
  </div>
1754
1156
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1755
1157
  <div class="pf-v6-c-data-list__action">
1756
- <div class="pf-v6-c-dropdown">
1757
- <button
1758
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1759
- id="data-list-compact-item-2-dropdown-kebab-button"
1760
- aria-expanded="false"
1761
- type="button"
1762
- aria-label="Actions"
1763
- >
1158
+ <button
1159
+ class="pf-v6-c-menu-toggle pf-m-plain"
1160
+ type="button"
1161
+ aria-expanded="false"
1162
+ aria-label="Menu toggle"
1163
+ id="data-list-compactitem-2menu-toggle"
1164
+ >
1165
+ <span class="pf-v6-c-menu-toggle__icon">
1764
1166
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1765
- </button>
1766
- <ul
1767
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1768
- aria-labelledby="data-list-compact-item-2-dropdown-kebab-button"
1769
- hidden
1770
- role="menu"
1771
- >
1772
- <li role="none">
1773
- <a
1774
- class="pf-v6-c-dropdown__menu-item"
1775
- role="menuitem"
1776
- href="#"
1777
- >Link</a>
1778
- </li>
1779
- <li role="none">
1780
- <button
1781
- class="pf-v6-c-dropdown__menu-item"
1782
- role="menuitem"
1783
- type="button"
1784
- >Action</button>
1785
- </li>
1786
- <li role="none">
1787
- <a
1788
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1789
- role="menuitem"
1790
- href="#"
1791
- aria-disabled="true"
1792
- tabindex="-1"
1793
- >Disabled link</a>
1794
- </li>
1795
- <li role="none">
1796
- <button
1797
- class="pf-v6-c-dropdown__menu-item"
1798
- role="menuitem"
1799
- type="button"
1800
- disabled
1801
- >Disabled action</button>
1802
- </li>
1803
- <li class="pf-v6-c-divider" role="separator"></li>
1804
- <li role="none">
1805
- <a
1806
- class="pf-v6-c-dropdown__menu-item"
1807
- role="menuitem"
1808
- href="#"
1809
- >Separated link</a>
1810
- </li>
1811
- </ul>
1812
- </div>
1167
+ </span>
1168
+ </button>
1813
1169
  </div>
1814
1170
  </div>
1815
1171
  <div
@@ -1853,63 +1209,17 @@ When a list item includes more than one block of content, it can be difficult fo
1853
1209
  </div>
1854
1210
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1855
1211
  <div class="pf-v6-c-data-list__action">
1856
- <div class="pf-v6-c-dropdown">
1857
- <button
1858
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1859
- id="data-list-compact-item-3-dropdown-kebab-button"
1860
- aria-expanded="false"
1861
- type="button"
1862
- aria-label="Actions"
1863
- >
1212
+ <button
1213
+ class="pf-v6-c-menu-toggle pf-m-plain"
1214
+ type="button"
1215
+ aria-expanded="false"
1216
+ aria-label="Menu toggle"
1217
+ id="data-list-compactitem-3menu-toggle"
1218
+ >
1219
+ <span class="pf-v6-c-menu-toggle__icon">
1864
1220
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1865
- </button>
1866
- <ul
1867
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1868
- aria-labelledby="data-list-compact-item-3-dropdown-kebab-button"
1869
- hidden
1870
- role="menu"
1871
- >
1872
- <li role="none">
1873
- <a
1874
- class="pf-v6-c-dropdown__menu-item"
1875
- role="menuitem"
1876
- href="#"
1877
- >Link</a>
1878
- </li>
1879
- <li role="none">
1880
- <button
1881
- class="pf-v6-c-dropdown__menu-item"
1882
- role="menuitem"
1883
- type="button"
1884
- >Action</button>
1885
- </li>
1886
- <li role="none">
1887
- <a
1888
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1889
- role="menuitem"
1890
- href="#"
1891
- aria-disabled="true"
1892
- tabindex="-1"
1893
- >Disabled link</a>
1894
- </li>
1895
- <li role="none">
1896
- <button
1897
- class="pf-v6-c-dropdown__menu-item"
1898
- role="menuitem"
1899
- type="button"
1900
- disabled
1901
- >Disabled action</button>
1902
- </li>
1903
- <li class="pf-v6-c-divider" role="separator"></li>
1904
- <li role="none">
1905
- <a
1906
- class="pf-v6-c-dropdown__menu-item"
1907
- role="menuitem"
1908
- href="#"
1909
- >Separated link</a>
1910
- </li>
1911
- </ul>
1912
- </div>
1221
+ </span>
1222
+ </button>
1913
1223
  </div>
1914
1224
  </div>
1915
1225
  <div
@@ -2045,63 +1355,17 @@ When a list item includes more than one block of content, it can be difficult fo
2045
1355
  </div>
2046
1356
  <div class="pf-v6-c-data-list__item-action">
2047
1357
  <div class="pf-v6-c-data-list__action">
2048
- <div class="pf-v6-c-dropdown">
2049
- <button
2050
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2051
- id="data-list-flex-modifiers-item-1-dropdown-kebab-button"
2052
- aria-expanded="false"
2053
- type="button"
2054
- aria-label="Actions"
2055
- >
1358
+ <button
1359
+ class="pf-v6-c-menu-toggle pf-m-plain"
1360
+ type="button"
1361
+ aria-expanded="false"
1362
+ aria-label="Menu toggle"
1363
+ id="data-list-flex-modifiersitem-1menu-toggle"
1364
+ >
1365
+ <span class="pf-v6-c-menu-toggle__icon">
2056
1366
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2057
- </button>
2058
- <ul
2059
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2060
- aria-labelledby="data-list-flex-modifiers-item-1-dropdown-kebab-button"
2061
- hidden
2062
- role="menu"
2063
- >
2064
- <li role="none">
2065
- <a
2066
- class="pf-v6-c-dropdown__menu-item"
2067
- role="menuitem"
2068
- href="#"
2069
- >Link</a>
2070
- </li>
2071
- <li role="none">
2072
- <button
2073
- class="pf-v6-c-dropdown__menu-item"
2074
- role="menuitem"
2075
- type="button"
2076
- >Action</button>
2077
- </li>
2078
- <li role="none">
2079
- <a
2080
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2081
- role="menuitem"
2082
- href="#"
2083
- aria-disabled="true"
2084
- tabindex="-1"
2085
- >Disabled link</a>
2086
- </li>
2087
- <li role="none">
2088
- <button
2089
- class="pf-v6-c-dropdown__menu-item"
2090
- role="menuitem"
2091
- type="button"
2092
- disabled
2093
- >Disabled action</button>
2094
- </li>
2095
- <li class="pf-v6-c-divider" role="separator"></li>
2096
- <li role="none">
2097
- <a
2098
- class="pf-v6-c-dropdown__menu-item"
2099
- role="menuitem"
2100
- href="#"
2101
- >Separated link</a>
2102
- </li>
2103
- </ul>
2104
- </div>
1367
+ </span>
1368
+ </button>
2105
1369
  </div>
2106
1370
  </div>
2107
1371
  </div>
@@ -2180,63 +1444,17 @@ When a list item includes more than one block of content, it can be difficult fo
2180
1444
  </div>
2181
1445
  <div class="pf-v6-c-data-list__item-action">
2182
1446
  <div class="pf-v6-c-data-list__action">
2183
- <div class="pf-v6-c-dropdown">
2184
- <button
2185
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2186
- id="data-list-flex-modifiers-2-item-1-dropdown-kebab-button"
2187
- aria-expanded="false"
2188
- type="button"
2189
- aria-label="Actions"
2190
- >
1447
+ <button
1448
+ class="pf-v6-c-menu-toggle pf-m-plain"
1449
+ type="button"
1450
+ aria-expanded="false"
1451
+ aria-label="Menu toggle"
1452
+ id="data-list-flex-modifiers-2item-1menu-toggle"
1453
+ >
1454
+ <span class="pf-v6-c-menu-toggle__icon">
2191
1455
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2192
- </button>
2193
- <ul
2194
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2195
- aria-labelledby="data-list-flex-modifiers-2-item-1-dropdown-kebab-button"
2196
- hidden
2197
- role="menu"
2198
- >
2199
- <li role="none">
2200
- <a
2201
- class="pf-v6-c-dropdown__menu-item"
2202
- role="menuitem"
2203
- href="#"
2204
- >Link</a>
2205
- </li>
2206
- <li role="none">
2207
- <button
2208
- class="pf-v6-c-dropdown__menu-item"
2209
- role="menuitem"
2210
- type="button"
2211
- >Action</button>
2212
- </li>
2213
- <li role="none">
2214
- <a
2215
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2216
- role="menuitem"
2217
- href="#"
2218
- aria-disabled="true"
2219
- tabindex="-1"
2220
- >Disabled link</a>
2221
- </li>
2222
- <li role="none">
2223
- <button
2224
- class="pf-v6-c-dropdown__menu-item"
2225
- role="menuitem"
2226
- type="button"
2227
- disabled
2228
- >Disabled action</button>
2229
- </li>
2230
- <li class="pf-v6-c-divider" role="separator"></li>
2231
- <li role="none">
2232
- <a
2233
- class="pf-v6-c-dropdown__menu-item"
2234
- role="menuitem"
2235
- href="#"
2236
- >Separated link</a>
2237
- </li>
2238
- </ul>
2239
- </div>
1456
+ </span>
1457
+ </button>
2240
1458
  </div>
2241
1459
  </div>
2242
1460
  </div>