@patternfly/patternfly 6.0.0-prerelease.13 → 6.0.0-prerelease.15

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 (104) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -59
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -30
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/Alert/alert.css +2 -6
  11. package/components/Alert/alert.scss +2 -7
  12. package/components/Button/button.css +8 -0
  13. package/components/Button/button.scss +8 -0
  14. package/components/DataList/data-list.css +4 -13
  15. package/components/DataList/data-list.scss +4 -14
  16. package/components/Drawer/drawer.css +0 -4
  17. package/components/Drawer/drawer.scss +0 -5
  18. package/components/FormControl/form-control.css +22 -3
  19. package/components/FormControl/form-control.scss +27 -4
  20. package/components/MenuToggle/menu-toggle.css +66 -55
  21. package/components/MenuToggle/menu-toggle.scss +76 -65
  22. package/components/Page/page.css +10 -8
  23. package/components/Page/page.scss +11 -8
  24. package/components/Pagination/pagination.css +31 -17
  25. package/components/Pagination/pagination.scss +35 -23
  26. package/components/Table/table-grid.css +9 -4
  27. package/components/Table/table-grid.scss +5 -4
  28. package/components/Table/table.css +6 -5
  29. package/components/Table/table.scss +6 -5
  30. package/components/_index.css +158 -115
  31. package/docs/components/Brand/examples/Brand.md +2 -2
  32. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  33. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  34. package/docs/components/DataList/examples/DataList.md +187 -221
  35. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  36. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  37. package/docs/components/Form/examples/Form.md +4 -2
  38. package/docs/components/FormControl/examples/FormControl.md +10 -10
  39. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  40. package/docs/components/Login/examples/Login.md +6 -6
  41. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  42. package/docs/components/Pagination/examples/Pagination.md +12 -12
  43. package/docs/components/Table/examples/Table.md +1 -1
  44. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  45. package/docs/demos/Card/examples/Card.md +4 -4
  46. package/docs/demos/CardView/examples/CardView.md +10 -4
  47. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  48. package/docs/demos/DataList/examples/DataList.md +37 -13
  49. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  50. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  51. package/docs/demos/Page/examples/Page.md +2 -2
  52. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  53. package/docs/demos/Table/examples/Table.md +214 -70
  54. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  55. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  56. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  57. package/package.json +5 -5
  58. package/patternfly-base-no-globals.css +84 -59
  59. package/patternfly-base.css +99 -59
  60. package/patternfly-no-globals.css +242 -174
  61. package/patternfly.css +257 -174
  62. package/patternfly.min.css +1 -1
  63. package/patternfly.min.css.map +1 -1
  64. package/assets/images/PF-Masthead-Logo.svg +0 -1
  65. package/assets/images/background-filter.svg +0 -17
  66. package/assets/images/g_sizing.png +0 -0
  67. package/assets/images/img_avatar-dark.svg +0 -22
  68. package/assets/images/img_avatar.svg +0 -21
  69. package/assets/images/l_pf-reverse-164x11.png +0 -0
  70. package/assets/images/l_pf-reverse.svg +0 -1
  71. package/assets/images/logo-dropbox-old.svg +0 -1
  72. package/assets/images/logo-dropbox.svg +0 -6
  73. package/assets/images/logo-facebook.svg +0 -4
  74. package/assets/images/logo-github.svg +0 -4
  75. package/assets/images/logo-gitlab.svg +0 -4
  76. package/assets/images/logo-google.svg +0 -4
  77. package/assets/images/logo-google2.svg +0 -10
  78. package/assets/images/logo__pf--reverse--base.png +0 -0
  79. package/assets/images/logo__pf--reverse--base.svg +0 -40
  80. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  81. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  82. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  83. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  84. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  85. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  86. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  87. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  88. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  89. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  90. package/assets/images/pf-c-brand__logo.svg +0 -10
  91. package/assets/images/pf-logo.svg +0 -28
  92. package/assets/images/pf_logo.svg +0 -37
  93. package/assets/images/pf_logo_color.svg +0 -22
  94. package/assets/images/pf_logo_white.svg +0 -37
  95. package/assets/images/pf_mini_logo_white.svg +0 -1
  96. package/assets/images/pfbg_1200.jpg +0 -0
  97. package/assets/images/pfbg_2000.jpg +0 -0
  98. package/assets/images/pfbg_576.jpg +0 -0
  99. package/assets/images/pfbg_576@2x.jpg +0 -0
  100. package/assets/images/pfbg_768.jpg +0 -0
  101. package/assets/images/pfbg_768@2x.jpg +0 -0
  102. package/assets/images/pfbg_992.jpg +0 -0
  103. package/assets/images/pfbg_992@2x.jpg +0 -0
  104. package/assets/images/status-icon-sprite.svg +0 -38
@@ -40,7 +40,7 @@ section: components
40
40
  />
41
41
  <source srcset="/assets/images/PF-IconLogo-color.svg" />
42
42
  <img
43
- src="/assets/images/pf_logo.svg"
43
+ src="/assets/images/PF-HorizontalLogo-Color.svg"
44
44
  alt="Fallback patternFly default logo"
45
45
  />
46
46
  </picture>
@@ -57,7 +57,7 @@ section: components
57
57
  />
58
58
  <source srcset="/assets/images/PF-IconLogo-Reverse.svg" />
59
59
  <img
60
- src="/assets/images/pf_logo.svg"
60
+ src="/assets/images/PF-HorizontalLogo-Color.svg"
61
61
  alt="Fallback patternFly default logo"
62
62
  />
63
63
  </picture>
@@ -174,7 +174,7 @@ cssPrefix: pf-v6-c-breadcrumb
174
174
  </span>
175
175
  <span class="pf-v6-c-menu-toggle__controls">
176
176
  <span class="pf-v6-c-menu-toggle__toggle-icon">
177
- <i class="fas fa-caret-down" aria-hidden="true"></i>
177
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
178
178
  </span>
179
179
  </span>
180
180
  </button>
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-calendar-month
33
33
  <span class="pf-v6-c-menu-toggle__text">October</span>
34
34
  <span class="pf-v6-c-menu-toggle__controls">
35
35
  <span class="pf-v6-c-menu-toggle__toggle-icon">
36
- <i class="fas fa-caret-down" aria-hidden="true"></i>
36
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
37
37
  </span>
38
38
  </span>
39
39
  </button>
@@ -387,7 +387,7 @@ cssPrefix: pf-v6-c-calendar-month
387
387
  <span class="pf-v6-c-menu-toggle__text">October</span>
388
388
  <span class="pf-v6-c-menu-toggle__controls">
389
389
  <span class="pf-v6-c-menu-toggle__toggle-icon">
390
- <i class="fas fa-caret-down" aria-hidden="true"></i>
390
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
391
391
  </span>
392
392
  </span>
393
393
  </button>
@@ -766,7 +766,7 @@ cssPrefix: pf-v6-c-calendar-month
766
766
  <span class="pf-v6-c-menu-toggle__text">October</span>
767
767
  <span class="pf-v6-c-menu-toggle__controls">
768
768
  <span class="pf-v6-c-menu-toggle__toggle-icon">
769
- <i class="fas fa-caret-down" aria-hidden="true"></i>
769
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
770
770
  </span>
771
771
  </span>
772
772
  </button>
@@ -1145,7 +1145,7 @@ cssPrefix: pf-v6-c-calendar-month
1145
1145
  <span class="pf-v6-c-menu-toggle__text">October</span>
1146
1146
  <span class="pf-v6-c-menu-toggle__controls">
1147
1147
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1148
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1148
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1149
1149
  </span>
1150
1150
  </span>
1151
1151
  </button>
@@ -161,19 +161,17 @@ When a list item includes more than one block of content, it can be difficult fo
161
161
  </div>
162
162
  </div>
163
163
  <div class="pf-v6-c-data-list__item-action">
164
- <div class="pf-v6-c-data-list__action">
165
- <button
166
- class="pf-v6-c-menu-toggle pf-m-plain"
167
- type="button"
168
- aria-expanded="false"
169
- aria-label="Menu toggle"
170
- id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
171
- >
172
- <span class="pf-v6-c-menu-toggle__icon">
173
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
174
- </span>
175
- </button>
176
- </div>
164
+ <button
165
+ class="pf-v6-c-menu-toggle pf-m-plain"
166
+ type="button"
167
+ aria-expanded="false"
168
+ aria-label="Menu toggle"
169
+ id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
170
+ >
171
+ <span class="pf-v6-c-menu-toggle__icon">
172
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
173
+ </span>
174
+ </button>
177
175
  </div>
178
176
  </div>
179
177
  </li>
@@ -210,19 +208,17 @@ When a list item includes more than one block of content, it can be difficult fo
210
208
  >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div>
211
209
  </div>
212
210
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
213
- <div class="pf-v6-c-data-list__action">
214
- <button
215
- class="pf-v6-c-menu-toggle pf-m-plain"
216
- type="button"
217
- aria-expanded="false"
218
- aria-label="Menu toggle"
219
- id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
220
- >
221
- <span class="pf-v6-c-menu-toggle__icon">
222
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
- </span>
224
- </button>
225
- </div>
211
+ <button
212
+ class="pf-v6-c-menu-toggle pf-m-plain"
213
+ type="button"
214
+ aria-expanded="false"
215
+ aria-label="Menu toggle"
216
+ id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
217
+ >
218
+ <span class="pf-v6-c-menu-toggle__icon">
219
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
220
+ </span>
221
+ </button>
226
222
  </div>
227
223
  <div
228
224
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
@@ -269,19 +265,17 @@ When a list item includes more than one block of content, it can be difficult fo
269
265
  >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div>
270
266
  </div>
271
267
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
272
- <div class="pf-v6-c-data-list__action">
273
- <button
274
- class="pf-v6-c-menu-toggle pf-m-plain"
275
- type="button"
276
- aria-expanded="false"
277
- aria-label="Menu toggle"
278
- id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
279
- >
280
- <span class="pf-v6-c-menu-toggle__icon">
281
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
282
- </span>
283
- </button>
284
- </div>
268
+ <button
269
+ class="pf-v6-c-menu-toggle pf-m-plain"
270
+ type="button"
271
+ aria-expanded="false"
272
+ aria-label="Menu toggle"
273
+ id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
274
+ >
275
+ <span class="pf-v6-c-menu-toggle__icon">
276
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
277
+ </span>
278
+ </button>
285
279
  </div>
286
280
  <div
287
281
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
@@ -375,19 +369,17 @@ When a list item includes more than one block of content, it can be difficult fo
375
369
  </div>
376
370
  </div>
377
371
  <div class="pf-v6-c-data-list__item-action">
378
- <div class="pf-v6-c-data-list__action">
379
- <button
380
- class="pf-v6-c-menu-toggle pf-m-plain"
381
- type="button"
382
- aria-expanded="false"
383
- aria-label="Menu toggle"
384
- id="data-list-expandable-item-1-menu-toggle"
385
- >
386
- <span class="pf-v6-c-menu-toggle__icon">
387
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
388
- </span>
389
- </button>
390
- </div>
372
+ <button
373
+ class="pf-v6-c-menu-toggle pf-m-plain"
374
+ type="button"
375
+ aria-expanded="false"
376
+ aria-label="Menu toggle"
377
+ id="data-list-expandable-item-1-menu-toggle"
378
+ >
379
+ <span class="pf-v6-c-menu-toggle__icon">
380
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
381
+ </span>
382
+ </button>
391
383
  </div>
392
384
  </div>
393
385
  <section
@@ -438,19 +430,17 @@ When a list item includes more than one block of content, it can be difficult fo
438
430
  </div>
439
431
  </div>
440
432
  <div class="pf-v6-c-data-list__item-action">
441
- <div class="pf-v6-c-data-list__action">
442
- <button
443
- class="pf-v6-c-menu-toggle pf-m-plain"
444
- type="button"
445
- aria-expanded="false"
446
- aria-label="Menu toggle"
447
- id="data-list-expandable-item-2-menu-toggle"
448
- >
449
- <span class="pf-v6-c-menu-toggle__icon">
450
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
451
- </span>
452
- </button>
453
- </div>
433
+ <button
434
+ class="pf-v6-c-menu-toggle pf-m-plain"
435
+ type="button"
436
+ aria-expanded="false"
437
+ aria-label="Menu toggle"
438
+ id="data-list-expandable-item-2-menu-toggle"
439
+ >
440
+ <span class="pf-v6-c-menu-toggle__icon">
441
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
442
+ </span>
443
+ </button>
454
444
  </div>
455
445
  </div>
456
446
  <section
@@ -505,19 +495,17 @@ When a list item includes more than one block of content, it can be difficult fo
505
495
  </div>
506
496
  </div>
507
497
  <div class="pf-v6-c-data-list__item-action">
508
- <div class="pf-v6-c-data-list__action">
509
- <button
510
- class="pf-v6-c-menu-toggle pf-m-plain"
511
- type="button"
512
- aria-expanded="false"
513
- aria-label="Menu toggle"
514
- id="data-list-expandable-item-3-menu-toggle"
515
- >
516
- <span class="pf-v6-c-menu-toggle__icon">
517
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
518
- </span>
519
- </button>
520
- </div>
498
+ <button
499
+ class="pf-v6-c-menu-toggle pf-m-plain"
500
+ type="button"
501
+ aria-expanded="false"
502
+ aria-label="Menu toggle"
503
+ id="data-list-expandable-item-3-menu-toggle"
504
+ >
505
+ <span class="pf-v6-c-menu-toggle__icon">
506
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
507
+ </span>
508
+ </button>
521
509
  </div>
522
510
  </div>
523
511
  <section
@@ -584,19 +572,17 @@ When a list item includes more than one block of content, it can be difficult fo
584
572
  </div>
585
573
  </div>
586
574
  <div class="pf-v6-c-data-list__item-action">
587
- <div class="pf-v6-c-data-list__action">
588
- <button
589
- class="pf-v6-c-menu-toggle pf-m-plain"
590
- type="button"
591
- aria-expanded="false"
592
- aria-label="Menu toggle"
593
- id="data-list-expandable-compact-item-1-menu-toggle"
594
- >
595
- <span class="pf-v6-c-menu-toggle__icon">
596
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
597
- </span>
598
- </button>
599
- </div>
575
+ <button
576
+ class="pf-v6-c-menu-toggle pf-m-plain"
577
+ type="button"
578
+ aria-expanded="false"
579
+ aria-label="Menu toggle"
580
+ id="data-list-expandable-compact-item-1-menu-toggle"
581
+ >
582
+ <span class="pf-v6-c-menu-toggle__icon">
583
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
584
+ </span>
585
+ </button>
600
586
  </div>
601
587
  </div>
602
588
  <section
@@ -650,19 +636,17 @@ When a list item includes more than one block of content, it can be difficult fo
650
636
  </div>
651
637
  </div>
652
638
  <div class="pf-v6-c-data-list__item-action">
653
- <div class="pf-v6-c-data-list__action">
654
- <button
655
- class="pf-v6-c-menu-toggle pf-m-plain"
656
- type="button"
657
- aria-expanded="false"
658
- aria-label="Menu toggle"
659
- id="data-list-expandable-compact-item-2-menu-toggle"
660
- >
661
- <span class="pf-v6-c-menu-toggle__icon">
662
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
663
- </span>
664
- </button>
665
- </div>
639
+ <button
640
+ class="pf-v6-c-menu-toggle pf-m-plain"
641
+ type="button"
642
+ aria-expanded="false"
643
+ aria-label="Menu toggle"
644
+ id="data-list-expandable-compact-item-2-menu-toggle"
645
+ >
646
+ <span class="pf-v6-c-menu-toggle__icon">
647
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
648
+ </span>
649
+ </button>
666
650
  </div>
667
651
  </div>
668
652
  <section
@@ -717,19 +701,17 @@ When a list item includes more than one block of content, it can be difficult fo
717
701
  </div>
718
702
  </div>
719
703
  <div class="pf-v6-c-data-list__item-action">
720
- <div class="pf-v6-c-data-list__action">
721
- <button
722
- class="pf-v6-c-menu-toggle pf-m-plain"
723
- type="button"
724
- aria-expanded="false"
725
- aria-label="Menu toggle"
726
- id="data-list-expandable-compact-item-3-menu-toggle"
727
- >
728
- <span class="pf-v6-c-menu-toggle__icon">
729
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
730
- </span>
731
- </button>
732
- </div>
704
+ <button
705
+ class="pf-v6-c-menu-toggle pf-m-plain"
706
+ type="button"
707
+ aria-expanded="false"
708
+ aria-label="Menu toggle"
709
+ id="data-list-expandable-compact-item-3-menu-toggle"
710
+ >
711
+ <span class="pf-v6-c-menu-toggle__icon">
712
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
713
+ </span>
714
+ </button>
733
715
  </div>
734
716
  </div>
735
717
  <section
@@ -796,19 +778,17 @@ When a list item includes more than one block of content, it can be difficult fo
796
778
  </div>
797
779
  </div>
798
780
  <div class="pf-v6-c-data-list__item-action">
799
- <div class="pf-v6-c-data-list__action">
800
- <button
801
- class="pf-v6-c-menu-toggle pf-m-plain"
802
- type="button"
803
- aria-expanded="false"
804
- aria-label="Menu toggle"
805
- id="data-list-expandable-nested-item-1-menu-toggle"
806
- >
807
- <span class="pf-v6-c-menu-toggle__icon">
808
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
809
- </span>
810
- </button>
811
- </div>
781
+ <button
782
+ class="pf-v6-c-menu-toggle pf-m-plain"
783
+ type="button"
784
+ aria-expanded="false"
785
+ aria-label="Menu toggle"
786
+ id="data-list-expandable-nested-item-1-menu-toggle"
787
+ >
788
+ <span class="pf-v6-c-menu-toggle__icon">
789
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
790
+ </span>
791
+ </button>
812
792
  </div>
813
793
  </div>
814
794
  <section
@@ -994,19 +974,17 @@ When a list item includes more than one block of content, it can be difficult fo
994
974
  </div>
995
975
  </div>
996
976
  <div class="pf-v6-c-data-list__item-action">
997
- <div class="pf-v6-c-data-list__action">
998
- <button
999
- class="pf-v6-c-menu-toggle pf-m-plain"
1000
- type="button"
1001
- aria-expanded="false"
1002
- aria-label="Menu toggle"
1003
- id="data-list-expandable-nested-item-2-menu-toggle"
1004
- >
1005
- <span class="pf-v6-c-menu-toggle__icon">
1006
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1007
- </span>
1008
- </button>
1009
- </div>
977
+ <button
978
+ class="pf-v6-c-menu-toggle pf-m-plain"
979
+ type="button"
980
+ aria-expanded="false"
981
+ aria-label="Menu toggle"
982
+ id="data-list-expandable-nested-item-2-menu-toggle"
983
+ >
984
+ <span class="pf-v6-c-menu-toggle__icon">
985
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
986
+ </span>
987
+ </button>
1010
988
  </div>
1011
989
  </div>
1012
990
  <section
@@ -1061,19 +1039,17 @@ When a list item includes more than one block of content, it can be difficult fo
1061
1039
  </div>
1062
1040
  </div>
1063
1041
  <div class="pf-v6-c-data-list__item-action">
1064
- <div class="pf-v6-c-data-list__action">
1065
- <button
1066
- class="pf-v6-c-menu-toggle pf-m-plain"
1067
- type="button"
1068
- aria-expanded="false"
1069
- aria-label="Menu toggle"
1070
- id="data-list-expandable-nested-item-3-menu-toggle"
1071
- >
1072
- <span class="pf-v6-c-menu-toggle__icon">
1073
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1074
- </span>
1075
- </button>
1076
- </div>
1042
+ <button
1043
+ class="pf-v6-c-menu-toggle pf-m-plain"
1044
+ type="button"
1045
+ aria-expanded="false"
1046
+ aria-label="Menu toggle"
1047
+ id="data-list-expandable-nested-item-3-menu-toggle"
1048
+ >
1049
+ <span class="pf-v6-c-menu-toggle__icon">
1050
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1051
+ </span>
1052
+ </button>
1077
1053
  </div>
1078
1054
  </div>
1079
1055
  <section
@@ -1138,19 +1114,17 @@ When a list item includes more than one block of content, it can be difficult fo
1138
1114
  </div>
1139
1115
  </div>
1140
1116
  <div class="pf-v6-c-data-list__item-action">
1141
- <div class="pf-v6-c-data-list__action">
1142
- <button
1143
- class="pf-v6-c-menu-toggle pf-m-plain"
1144
- type="button"
1145
- aria-expanded="false"
1146
- aria-label="Menu toggle"
1147
- id="data-list-compact-item-1-menu-toggle"
1148
- >
1149
- <span class="pf-v6-c-menu-toggle__icon">
1150
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1151
- </span>
1152
- </button>
1153
- </div>
1117
+ <button
1118
+ class="pf-v6-c-menu-toggle pf-m-plain"
1119
+ type="button"
1120
+ aria-expanded="false"
1121
+ aria-label="Menu toggle"
1122
+ id="data-list-compact-item-1-menu-toggle"
1123
+ >
1124
+ <span class="pf-v6-c-menu-toggle__icon">
1125
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1126
+ </span>
1127
+ </button>
1154
1128
  </div>
1155
1129
  </div>
1156
1130
  </li>
@@ -1185,19 +1159,17 @@ When a list item includes more than one block of content, it can be difficult fo
1185
1159
  >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div>
1186
1160
  </div>
1187
1161
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1188
- <div class="pf-v6-c-data-list__action">
1189
- <button
1190
- class="pf-v6-c-menu-toggle pf-m-plain"
1191
- type="button"
1192
- aria-expanded="false"
1193
- aria-label="Menu toggle"
1194
- id="data-list-compact-item-2-menu-toggle"
1195
- >
1196
- <span class="pf-v6-c-menu-toggle__icon">
1197
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1198
- </span>
1199
- </button>
1200
- </div>
1162
+ <button
1163
+ class="pf-v6-c-menu-toggle pf-m-plain"
1164
+ type="button"
1165
+ aria-expanded="false"
1166
+ aria-label="Menu toggle"
1167
+ id="data-list-compact-item-2-menu-toggle"
1168
+ >
1169
+ <span class="pf-v6-c-menu-toggle__icon">
1170
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1171
+ </span>
1172
+ </button>
1201
1173
  </div>
1202
1174
  <div
1203
1175
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
@@ -1242,19 +1214,17 @@ When a list item includes more than one block of content, it can be difficult fo
1242
1214
  >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div>
1243
1215
  </div>
1244
1216
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1245
- <div class="pf-v6-c-data-list__action">
1246
- <button
1247
- class="pf-v6-c-menu-toggle pf-m-plain"
1248
- type="button"
1249
- aria-expanded="false"
1250
- aria-label="Menu toggle"
1251
- id="data-list-compact-item-3-menu-toggle"
1252
- >
1253
- <span class="pf-v6-c-menu-toggle__icon">
1254
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1255
- </span>
1256
- </button>
1257
- </div>
1217
+ <button
1218
+ class="pf-v6-c-menu-toggle pf-m-plain"
1219
+ type="button"
1220
+ aria-expanded="false"
1221
+ aria-label="Menu toggle"
1222
+ id="data-list-compact-item-3-menu-toggle"
1223
+ >
1224
+ <span class="pf-v6-c-menu-toggle__icon">
1225
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1226
+ </span>
1227
+ </button>
1258
1228
  </div>
1259
1229
  <div
1260
1230
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
@@ -1394,19 +1364,17 @@ When a list item includes more than one block of content, it can be difficult fo
1394
1364
  </div>
1395
1365
  </div>
1396
1366
  <div class="pf-v6-c-data-list__item-action">
1397
- <div class="pf-v6-c-data-list__action">
1398
- <button
1399
- class="pf-v6-c-menu-toggle pf-m-plain"
1400
- type="button"
1401
- aria-expanded="false"
1402
- aria-label="Menu toggle"
1403
- id="data-list-flex-modifiers-item-1-menu-toggle"
1404
- >
1405
- <span class="pf-v6-c-menu-toggle__icon">
1406
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1407
- </span>
1408
- </button>
1409
- </div>
1367
+ <button
1368
+ class="pf-v6-c-menu-toggle pf-m-plain"
1369
+ type="button"
1370
+ aria-expanded="false"
1371
+ aria-label="Menu toggle"
1372
+ id="data-list-flex-modifiers-item-1-menu-toggle"
1373
+ >
1374
+ <span class="pf-v6-c-menu-toggle__icon">
1375
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1376
+ </span>
1377
+ </button>
1410
1378
  </div>
1411
1379
  </div>
1412
1380
  </li>
@@ -1484,19 +1452,17 @@ When a list item includes more than one block of content, it can be difficult fo
1484
1452
  </div>
1485
1453
  </div>
1486
1454
  <div class="pf-v6-c-data-list__item-action">
1487
- <div class="pf-v6-c-data-list__action">
1488
- <button
1489
- class="pf-v6-c-menu-toggle pf-m-plain"
1490
- type="button"
1491
- aria-expanded="false"
1492
- aria-label="Menu toggle"
1493
- id="data-list-flex-modifiers-2-item-1-menu-toggle"
1494
- >
1495
- <span class="pf-v6-c-menu-toggle__icon">
1496
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1497
- </span>
1498
- </button>
1499
- </div>
1455
+ <button
1456
+ class="pf-v6-c-menu-toggle pf-m-plain"
1457
+ type="button"
1458
+ aria-expanded="false"
1459
+ aria-label="Menu toggle"
1460
+ id="data-list-flex-modifiers-2-item-1-menu-toggle"
1461
+ >
1462
+ <span class="pf-v6-c-menu-toggle__icon">
1463
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1464
+ </span>
1465
+ </button>
1500
1466
  </div>
1501
1467
  </div>
1502
1468
  <section
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: 'Drag and drop'
3
- beta: true
4
3
  section: components
5
4
  cssPrefix: pf-v6-c-drag-drop
6
5
  ---import './DragDrop.css'