@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.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 (109) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Spinner/spinner.css +5 -0
  37. package/components/Spinner/spinner.scss +6 -0
  38. package/components/Table/table-grid.css +51 -5
  39. package/components/Table/table-grid.scss +22 -1
  40. package/components/Table/table.css +83 -1
  41. package/components/Table/table.scss +123 -1
  42. package/components/Tabs/tabs.css +25 -15
  43. package/components/Tabs/tabs.scss +26 -13
  44. package/components/TextInputGroup/text-input-group.css +16 -0
  45. package/components/TextInputGroup/text-input-group.scss +8 -0
  46. package/components/Timestamp/timestamp.css +4 -0
  47. package/components/Timestamp/timestamp.scss +7 -0
  48. package/components/TreeView/tree-view.css +39 -0
  49. package/components/TreeView/tree-view.scss +42 -2
  50. package/components/Truncate/truncate.css +1 -0
  51. package/components/Truncate/truncate.scss +3 -0
  52. package/components/_index.css +896 -83
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  54. package/docs/components/Button/examples/Button.md +148 -5
  55. package/docs/components/Card/examples/Card.md +8 -8
  56. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  57. package/docs/components/DataList/examples/DataList.md +23 -23
  58. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  59. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  60. package/docs/components/Form/examples/Form.md +1047 -126
  61. package/docs/components/Hint/examples/Hint.md +3 -3
  62. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  63. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  64. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  65. package/docs/components/Masthead/examples/masthead.md +90 -12
  66. package/docs/components/Menu/examples/Menu.md +122 -6
  67. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  68. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  69. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  70. package/docs/components/Page/examples/Page.md +147 -14
  71. package/docs/components/Pagination/examples/Pagination.md +12 -12
  72. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  73. package/docs/components/Slider/examples/Slider.md +2 -2
  74. package/docs/components/Spinner/examples/Spinner.md +10 -0
  75. package/docs/components/Table/examples/Table.md +9428 -6173
  76. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  77. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  78. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  79. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  80. package/docs/demos/Alert/examples/Alert.md +66 -9
  81. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  82. package/docs/demos/Banner/examples/Banner.md +47 -6
  83. package/docs/demos/Card/examples/Card.md +5 -62
  84. package/docs/demos/CardView/examples/CardView.md +24 -5
  85. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  86. package/docs/demos/DataList/examples/DataList.md +100 -24
  87. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  88. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  89. package/docs/demos/Form/examples/BasicForms.md +12 -12
  90. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  91. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  92. package/docs/demos/Modal/examples/Modal.md +132 -18
  93. package/docs/demos/Nav/examples/Nav.md +111 -16
  94. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  95. package/docs/demos/Page/examples/Page.md +309 -43
  96. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  97. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  98. package/docs/demos/Table/examples/Table.md +449 -155
  99. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  100. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  101. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  102. package/package.json +5 -5
  103. package/patternfly-base-no-globals.css +45 -11
  104. package/patternfly-base.css +45 -11
  105. package/patternfly-no-globals.css +941 -94
  106. package/patternfly.css +941 -94
  107. package/patternfly.min.css +1 -1
  108. package/patternfly.min.css.map +1 -1
  109. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -95,7 +95,7 @@ section: components
95
95
  class="pf-v6-c-menu-toggle pf-m-plain"
96
96
  type="button"
97
97
  aria-expanded="false"
98
- aria-label="Menu toggle"
98
+ aria-label="Toggle options"
99
99
  id="toolbar-attribute-value-search-filter-desktop-example-overflow-toggle"
100
100
  >
101
101
  <span class="pf-v6-c-menu-toggle__icon">
@@ -114,7 +114,7 @@ section: components
114
114
  >
115
115
  <div class="pf-v6-c-pagination__page-menu">
116
116
  <button
117
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
117
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
118
118
  type="button"
119
119
  aria-expanded="false"
120
120
  aria-label="Menu toggle"
@@ -190,12 +190,31 @@ section: components
190
190
  <div class="pf-v6-c-masthead__main">
191
191
  <span class="pf-v6-c-masthead__toggle">
192
192
  <button
193
- class="pf-v6-c-button pf-m-plain"
193
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
194
194
  type="button"
195
195
  aria-label="Global navigation"
196
196
  >
197
197
  <span class="pf-v6-c-button__icon">
198
- <i class="fas fa-bars" aria-hidden="true"></i>
198
+ <svg
199
+ viewBox="0 0 10 10"
200
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
201
+ width="1em"
202
+ height="1em"
203
+ >
204
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
205
+ <path
206
+ class="pf-v6-c-button--hamburger-icon--middle"
207
+ d="M1,5 L9,5"
208
+ />
209
+ <path
210
+ class="pf-v6-c-button--hamburger-icon--arrow"
211
+ d="M1,5 L1,5 L1,5"
212
+ />
213
+ <path
214
+ class="pf-v6-c-button--hamburger-icon--bottom"
215
+ d="M9,9 L1,9"
216
+ />
217
+ </svg>
199
218
  </span>
200
219
  </button>
201
220
  </span>
@@ -303,7 +322,7 @@ section: components
303
322
  </div>
304
323
  <div class="pf-v6-c-toolbar__item">
305
324
  <button
306
- class="pf-v6-c-menu-toggle pf-m-plain"
325
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
307
326
  type="button"
308
327
  aria-expanded="false"
309
328
  aria-label="Settings"
@@ -775,7 +794,7 @@ section: components
775
794
  class="pf-v6-c-menu-toggle pf-m-plain"
776
795
  type="button"
777
796
  aria-expanded="false"
778
- aria-label="Menu toggle"
797
+ aria-label="Table actions"
779
798
  >
780
799
  <span class="pf-v6-c-menu-toggle__icon">
781
800
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -851,7 +870,7 @@ section: components
851
870
  class="pf-v6-c-menu-toggle pf-m-plain"
852
871
  type="button"
853
872
  aria-expanded="false"
854
- aria-label="Menu toggle"
873
+ aria-label="Table actions"
855
874
  >
856
875
  <span class="pf-v6-c-menu-toggle__icon">
857
876
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -927,7 +946,7 @@ section: components
927
946
  class="pf-v6-c-menu-toggle pf-m-plain"
928
947
  type="button"
929
948
  aria-expanded="false"
930
- aria-label="Menu toggle"
949
+ aria-label="Table actions"
931
950
  >
932
951
  <span class="pf-v6-c-menu-toggle__icon">
933
952
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -1003,7 +1022,7 @@ section: components
1003
1022
  class="pf-v6-c-menu-toggle pf-m-plain"
1004
1023
  type="button"
1005
1024
  aria-expanded="false"
1006
- aria-label="Menu toggle"
1025
+ aria-label="Table actions"
1007
1026
  >
1008
1027
  <span class="pf-v6-c-menu-toggle__icon">
1009
1028
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -1078,7 +1097,7 @@ section: components
1078
1097
  class="pf-v6-c-menu-toggle pf-m-plain"
1079
1098
  type="button"
1080
1099
  aria-expanded="false"
1081
- aria-label="Menu toggle"
1100
+ aria-label="Table actions"
1082
1101
  >
1083
1102
  <span class="pf-v6-c-menu-toggle__icon">
1084
1103
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -1108,7 +1127,7 @@ section: components
1108
1127
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
1109
1128
  <div class="pf-v6-c-toolbar__toggle">
1110
1129
  <button
1111
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1130
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
1112
1131
  type="button"
1113
1132
  aria-expanded="true"
1114
1133
  aria-label="Show filters"
@@ -1205,7 +1224,7 @@ section: components
1205
1224
  class="pf-v6-c-menu-toggle pf-m-plain"
1206
1225
  type="button"
1207
1226
  aria-expanded="false"
1208
- aria-label="Menu toggle"
1227
+ aria-label="Toggle options"
1209
1228
  id="toolbar-attribute-value-search-filter-mobile-example-overflow-toggle"
1210
1229
  >
1211
1230
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1224,7 +1243,7 @@ section: components
1224
1243
  >
1225
1244
  <div class="pf-v6-c-pagination__page-menu">
1226
1245
  <button
1227
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1246
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1228
1247
  type="button"
1229
1248
  aria-expanded="false"
1230
1249
  aria-label="Menu toggle"
@@ -1388,7 +1407,7 @@ section: components
1388
1407
  class="pf-v6-c-menu-toggle pf-m-plain"
1389
1408
  type="button"
1390
1409
  aria-expanded="false"
1391
- aria-label="Menu toggle"
1410
+ aria-label="Toggle options"
1392
1411
  id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-toggle"
1393
1412
  >
1394
1413
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1407,7 +1426,7 @@ section: components
1407
1426
  >
1408
1427
  <div class="pf-v6-c-pagination__page-menu">
1409
1428
  <button
1410
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1429
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1411
1430
  type="button"
1412
1431
  aria-expanded="false"
1413
1432
  aria-label="Menu toggle"
@@ -1476,7 +1495,7 @@ section: components
1476
1495
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
1477
1496
  <div class="pf-v6-c-toolbar__toggle">
1478
1497
  <button
1479
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1498
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
1480
1499
  type="button"
1481
1500
  aria-expanded="true"
1482
1501
  aria-label="Show filters"
@@ -1573,7 +1592,7 @@ section: components
1573
1592
  class="pf-v6-c-menu-toggle pf-m-plain"
1574
1593
  type="button"
1575
1594
  aria-expanded="false"
1576
- aria-label="Menu toggle"
1595
+ aria-label="Toggle options"
1577
1596
  id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-toggle"
1578
1597
  >
1579
1598
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1592,7 +1611,7 @@ section: components
1592
1611
  >
1593
1612
  <div class="pf-v6-c-pagination__page-menu">
1594
1613
  <button
1595
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1614
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1596
1615
  type="button"
1597
1616
  aria-expanded="false"
1598
1617
  aria-label="Menu toggle"
@@ -1747,7 +1766,7 @@ section: components
1747
1766
  class="pf-v6-c-menu-toggle pf-m-plain"
1748
1767
  type="button"
1749
1768
  aria-expanded="false"
1750
- aria-label="Menu toggle"
1769
+ aria-label="Toggle options"
1751
1770
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-toggle"
1752
1771
  >
1753
1772
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1766,7 +1785,7 @@ section: components
1766
1785
  >
1767
1786
  <div class="pf-v6-c-pagination__page-menu">
1768
1787
  <button
1769
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1788
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1770
1789
  type="button"
1771
1790
  aria-expanded="false"
1772
1791
  aria-label="Menu toggle"
@@ -2039,7 +2058,7 @@ section: components
2039
2058
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
2040
2059
  <div class="pf-v6-c-toolbar__toggle">
2041
2060
  <button
2042
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
2061
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
2043
2062
  type="button"
2044
2063
  aria-expanded="true"
2045
2064
  aria-label="Show filters"
@@ -2136,7 +2155,7 @@ section: components
2136
2155
  class="pf-v6-c-menu-toggle pf-m-plain"
2137
2156
  type="button"
2138
2157
  aria-expanded="false"
2139
- aria-label="Menu toggle"
2158
+ aria-label="Toggle options"
2140
2159
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-toggle"
2141
2160
  >
2142
2161
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2155,7 +2174,7 @@ section: components
2155
2174
  >
2156
2175
  <div class="pf-v6-c-pagination__page-menu">
2157
2176
  <button
2158
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2177
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2159
2178
  type="button"
2160
2179
  aria-expanded="false"
2161
2180
  aria-label="Menu toggle"
@@ -2466,12 +2485,31 @@ section: components
2466
2485
  <div class="pf-v6-c-masthead__main">
2467
2486
  <span class="pf-v6-c-masthead__toggle">
2468
2487
  <button
2469
- class="pf-v6-c-button pf-m-plain"
2488
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2470
2489
  type="button"
2471
2490
  aria-label="Global navigation"
2472
2491
  >
2473
2492
  <span class="pf-v6-c-button__icon">
2474
- <i class="fas fa-bars" aria-hidden="true"></i>
2493
+ <svg
2494
+ viewBox="0 0 10 10"
2495
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2496
+ width="1em"
2497
+ height="1em"
2498
+ >
2499
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2500
+ <path
2501
+ class="pf-v6-c-button--hamburger-icon--middle"
2502
+ d="M1,5 L9,5"
2503
+ />
2504
+ <path
2505
+ class="pf-v6-c-button--hamburger-icon--arrow"
2506
+ d="M1,5 L1,5 L1,5"
2507
+ />
2508
+ <path
2509
+ class="pf-v6-c-button--hamburger-icon--bottom"
2510
+ d="M9,9 L1,9"
2511
+ />
2512
+ </svg>
2475
2513
  </span>
2476
2514
  </button>
2477
2515
  </span>
@@ -2579,7 +2617,7 @@ section: components
2579
2617
  </div>
2580
2618
  <div class="pf-v6-c-toolbar__item">
2581
2619
  <button
2582
- class="pf-v6-c-menu-toggle pf-m-plain"
2620
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2583
2621
  type="button"
2584
2622
  aria-expanded="false"
2585
2623
  aria-label="Settings"
@@ -2790,7 +2828,7 @@ section: components
2790
2828
  class="pf-v6-c-menu-toggle pf-m-plain"
2791
2829
  type="button"
2792
2830
  aria-expanded="false"
2793
- aria-label="Menu toggle"
2831
+ aria-label="Toggle options"
2794
2832
  id="toolbar-pagination-management-example-toolbar-overflow-toggle"
2795
2833
  >
2796
2834
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2809,7 +2847,7 @@ section: components
2809
2847
  >
2810
2848
  <div class="pf-v6-c-pagination__page-menu">
2811
2849
  <button
2812
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2850
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2813
2851
  type="button"
2814
2852
  aria-expanded="false"
2815
2853
  aria-label="Menu toggle"
@@ -3005,7 +3043,7 @@ section: components
3005
3043
  class="pf-v6-c-menu-toggle pf-m-plain"
3006
3044
  type="button"
3007
3045
  aria-expanded="false"
3008
- aria-label="Menu toggle"
3046
+ aria-label="Table actions"
3009
3047
  >
3010
3048
  <span class="pf-v6-c-menu-toggle__icon">
3011
3049
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3083,7 +3121,7 @@ section: components
3083
3121
  class="pf-v6-c-menu-toggle pf-m-plain"
3084
3122
  type="button"
3085
3123
  aria-expanded="false"
3086
- aria-label="Menu toggle"
3124
+ aria-label="Table actions"
3087
3125
  >
3088
3126
  <span class="pf-v6-c-menu-toggle__icon">
3089
3127
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3161,7 +3199,7 @@ section: components
3161
3199
  class="pf-v6-c-menu-toggle pf-m-plain"
3162
3200
  type="button"
3163
3201
  aria-expanded="false"
3164
- aria-label="Menu toggle"
3202
+ aria-label="Table actions"
3165
3203
  >
3166
3204
  <span class="pf-v6-c-menu-toggle__icon">
3167
3205
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3239,7 +3277,7 @@ section: components
3239
3277
  class="pf-v6-c-menu-toggle pf-m-plain"
3240
3278
  type="button"
3241
3279
  aria-expanded="false"
3242
- aria-label="Menu toggle"
3280
+ aria-label="Table actions"
3243
3281
  >
3244
3282
  <span class="pf-v6-c-menu-toggle__icon">
3245
3283
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3316,7 +3354,7 @@ section: components
3316
3354
  class="pf-v6-c-menu-toggle pf-m-plain"
3317
3355
  type="button"
3318
3356
  aria-expanded="false"
3319
- aria-label="Menu toggle"
3357
+ aria-label="Table actions"
3320
3358
  >
3321
3359
  <span class="pf-v6-c-menu-toggle__icon">
3322
3360
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3329,7 +3367,7 @@ section: components
3329
3367
  <div class="pf-v6-c-pagination pf-m-bottom">
3330
3368
  <div class="pf-v6-c-pagination__page-menu">
3331
3369
  <button
3332
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3370
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3333
3371
  type="button"
3334
3372
  aria-expanded="false"
3335
3373
  aria-label="Menu toggle"