@patternfly/patternfly 6.0.0-prerelease.8 → 6.0.0

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 (194) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  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 -35
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +5 -8
  43. package/components/Drawer/drawer.scss +4 -6
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +10 -10
  74. package/components/Page/page.scss +11 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -240
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  124. package/docs/demos/Card/examples/Card.md +4 -4
  125. package/docs/demos/CardView/examples/CardView.md +10 -4
  126. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  127. package/docs/demos/DataList/examples/DataList.md +37 -13
  128. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  129. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  130. package/docs/demos/Page/examples/Page.md +2 -2
  131. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  132. package/docs/demos/Table/examples/Table.md +235 -91
  133. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  134. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  135. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  136. package/layouts/Bullseye/bullseye.css +0 -1
  137. package/layouts/Flex/flex.css +0 -1
  138. package/layouts/Gallery/gallery.css +0 -1
  139. package/layouts/Grid/grid.css +0 -1
  140. package/layouts/Level/level.css +0 -1
  141. package/layouts/Split/split.css +0 -1
  142. package/layouts/Stack/stack.css +0 -1
  143. package/layouts/_index.css +0 -7
  144. package/package.json +5 -5
  145. package/patternfly-base-no-globals.css +84 -62
  146. package/patternfly-base.css +99 -62
  147. package/patternfly-charts.css +2 -2
  148. package/patternfly-charts.scss +2 -2
  149. package/patternfly-no-globals.css +256 -309
  150. package/patternfly.css +271 -309
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/sass-utilities/mixins.scss +3 -3
  154. package/assets/images/PF-Masthead-Logo.svg +0 -1
  155. package/assets/images/background-filter.svg +0 -17
  156. package/assets/images/g_sizing.png +0 -0
  157. package/assets/images/img_avatar-dark.svg +0 -22
  158. package/assets/images/img_avatar.svg +0 -21
  159. package/assets/images/l_pf-reverse-164x11.png +0 -0
  160. package/assets/images/l_pf-reverse.svg +0 -1
  161. package/assets/images/logo-dropbox-old.svg +0 -1
  162. package/assets/images/logo-dropbox.svg +0 -6
  163. package/assets/images/logo-facebook.svg +0 -4
  164. package/assets/images/logo-github.svg +0 -4
  165. package/assets/images/logo-gitlab.svg +0 -4
  166. package/assets/images/logo-google.svg +0 -4
  167. package/assets/images/logo-google2.svg +0 -10
  168. package/assets/images/logo__pf--reverse--base.png +0 -0
  169. package/assets/images/logo__pf--reverse--base.svg +0 -40
  170. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  171. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  172. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  173. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  175. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  177. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  179. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  180. package/assets/images/pf-c-brand__logo.svg +0 -10
  181. package/assets/images/pf-logo.svg +0 -28
  182. package/assets/images/pf_logo.svg +0 -37
  183. package/assets/images/pf_logo_color.svg +0 -22
  184. package/assets/images/pf_logo_white.svg +0 -37
  185. package/assets/images/pf_mini_logo_white.svg +0 -1
  186. package/assets/images/pfbg_1200.jpg +0 -0
  187. package/assets/images/pfbg_2000.jpg +0 -0
  188. package/assets/images/pfbg_576.jpg +0 -0
  189. package/assets/images/pfbg_576@2x.jpg +0 -0
  190. package/assets/images/pfbg_768.jpg +0 -0
  191. package/assets/images/pfbg_768@2x.jpg +0 -0
  192. package/assets/images/pfbg_992.jpg +0 -0
  193. package/assets/images/pfbg_992@2x.jpg +0 -0
  194. package/assets/images/status-icon-sprite.svg +0 -38
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -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
package/docs/components/DragDrop/examples/DragDrop.md CHANGED
@@ -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'
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -40,7 +40,7 @@ cssPrefix: pf-v6-c-file-upload
40
40
  </div>
41
41
  </div>
42
42
  <div class="pf-v6-c-file-upload__file-details">
43
- <span class="pf-v6-c-form-control pf-m-resize-vertical">
43
+ <span class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical">
44
44
  <textarea
45
45
  id="basic-file-upload-file-details"
46
46
  name="basic-file-upload-file-details"
@@ -88,7 +88,7 @@ cssPrefix: pf-v6-c-file-upload
88
88
  </div>
89
89
  </div>
90
90
  <div class="pf-v6-c-file-upload__file-details">
91
- <span class="pf-v6-c-form-control pf-m-resize-vertical">
91
+ <span class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical">
92
92
  <textarea
93
93
  id="file-upload-helper-text-file-details"
94
94
  name="file-upload-helper-text-file-details"
@@ -142,7 +142,9 @@ cssPrefix: pf-v6-c-file-upload
142
142
  </div>
143
143
  </div>
144
144
  <div class="pf-v6-c-file-upload__file-details">
145
- <span class="pf-v6-c-form-control pf-m-readonly pf-m-resize-vertical">
145
+ <span
146
+ class="pf-v6-c-form-control pf-m-readonly pf-m-textarea pf-m-resize-vertical"
147
+ >
146
148
  <textarea
147
149
  readonly
148
150
  id="browsed-file-upload-complete-file-details"
@@ -192,7 +194,7 @@ cssPrefix: pf-v6-c-file-upload
192
194
  </div>
193
195
  </div>
194
196
  <div class="pf-v6-c-file-upload__file-details">
195
- <span class="pf-v6-c-form-control pf-m-resize-vertical">
197
+ <span class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical">
196
198
  <textarea
197
199
  id="drop-file-file-details"
198
200
  name="drop-file-file-details"
@@ -241,7 +243,7 @@ cssPrefix: pf-v6-c-file-upload
241
243
  </div>
242
244
  </div>
243
245
  <div class="pf-v6-c-file-upload__file-details">
244
- <span class="pf-v6-c-form-control pf-m-resize-vertical">
246
+ <span class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical">
245
247
  <textarea
246
248
  id="drag-file-hover-component-file-details"
247
249
  name="drag-file-hover-component-file-details"
@@ -296,7 +298,9 @@ cssPrefix: pf-v6-c-file-upload
296
298
  aria-describedby="with-error-example-helper-text"
297
299
  aria-invalid="true"
298
300
  >
299
- <span class="pf-v6-c-form-control pf-m-error pf-m-resize-vertical">
301
+ <span
302
+ class="pf-v6-c-form-control pf-m-error pf-m-textarea pf-m-resize-vertical"
303
+ >
300
304
  <textarea
301
305
  id="file-upload-error-file-details"
302
306
  name="file-upload-error-file-details"
@@ -370,7 +374,7 @@ cssPrefix: pf-v6-c-file-upload
370
374
  </div>
371
375
  </div>
372
376
  <div class="pf-v6-c-file-upload__file-details">
373
- <span class="pf-v6-c-form-control pf-m-resize-vertical">
377
+ <span class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical">
374
378
  <textarea
375
379
  id="file-upload-loading-file-details"
376
380
  name="file-upload-loading-file-details"
package/docs/components/Form/examples/Form.md CHANGED
@@ -76,7 +76,7 @@ cssPrefix: pf-v6-c-form
76
76
  </span></span>
77
77
  </div>
78
78
  <div class="pf-v6-c-form__group-control">
79
- <span class="pf-v6-c-form-control">
79
+ <span class="pf-v6-c-form-control pf-m-textarea">
80
80
  <textarea
81
81
  type="text"
82
82
  id="form-horizontal-info"
@@ -420,7 +420,9 @@ cssPrefix: pf-v6-c-form
420
420
  <span class="pf-v6-c-form__label-text">Information</span></label>
421
421
  </div>
422
422
  <div class="pf-v6-c-form__group-control">
423
- <span class="pf-v6-c-form-control pf-m-error pf-m-resize-both">
423
+ <span
424
+ class="pf-v6-c-form-control pf-m-error pf-m-textarea pf-m-resize-both"
425
+ >
424
426
  <textarea
425
427
  id="form-help-text-info"
426
428
  name="form-help-text-info"