@patternfly/patternfly 6.3.0-prerelease.25 → 6.3.0-prerelease.26

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 (50) hide show
  1. package/components/Button/button.css +103 -0
  2. package/components/Button/button.scss +103 -2
  3. package/components/MenuToggle/menu-toggle.css +30 -0
  4. package/components/MenuToggle/menu-toggle.scss +33 -0
  5. package/components/Page/page.css +45 -0
  6. package/components/Page/page.scss +29 -0
  7. package/components/_index.css +178 -0
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  9. package/docs/components/Button/examples/Button.md +85 -3
  10. package/docs/components/Card/examples/Card.md +8 -8
  11. package/docs/components/DataList/examples/DataList.md +23 -23
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  13. package/docs/components/Hint/examples/Hint.md +3 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  15. package/docs/components/Masthead/examples/masthead.md +90 -12
  16. package/docs/components/Menu/examples/Menu.md +2 -2
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  18. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  19. package/docs/components/Page/examples/Page.md +147 -14
  20. package/docs/components/Pagination/examples/Pagination.md +12 -12
  21. package/docs/components/Table/examples/Table.md +240 -240
  22. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  23. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  24. package/docs/demos/Alert/examples/Alert.md +66 -9
  25. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  26. package/docs/demos/Banner/examples/Banner.md +47 -6
  27. package/docs/demos/Card/examples/Card.md +4 -4
  28. package/docs/demos/CardView/examples/CardView.md +24 -5
  29. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  30. package/docs/demos/DataList/examples/DataList.md +100 -24
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  32. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  34. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  35. package/docs/demos/Modal/examples/Modal.md +132 -18
  36. package/docs/demos/Nav/examples/Nav.md +111 -16
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  38. package/docs/demos/Page/examples/Page.md +309 -43
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  40. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  41. package/docs/demos/Table/examples/Table.md +435 -150
  42. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  43. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  44. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  45. package/package.json +1 -1
  46. package/patternfly-no-globals.css +178 -0
  47. package/patternfly.css +178 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/mixins.scss +35 -0
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -23,12 +23,31 @@ wrapperTag: div
23
23
  <div class="pf-v6-c-masthead__main">
24
24
  <span class="pf-v6-c-masthead__toggle">
25
25
  <button
26
- class="pf-v6-c-button pf-m-plain"
26
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
27
27
  type="button"
28
28
  aria-label="Global navigation"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
- <i class="fas fa-bars" aria-hidden="true"></i>
31
+ <svg
32
+ viewBox="0 0 10 10"
33
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--middle"
40
+ d="M1,5 L9,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--arrow"
44
+ d="M1,5 L1,5 L1,5"
45
+ />
46
+ <path
47
+ class="pf-v6-c-button--hamburger-icon--bottom"
48
+ d="M9,9 L1,9"
49
+ />
50
+ </svg>
32
51
  </span>
33
52
  </button>
34
53
  </span>
@@ -136,7 +155,7 @@ wrapperTag: div
136
155
  </div>
137
156
  <div class="pf-v6-c-toolbar__item">
138
157
  <button
139
- class="pf-v6-c-menu-toggle pf-m-plain"
158
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
140
159
  type="button"
141
160
  aria-expanded="false"
142
161
  aria-label="Settings"
@@ -456,7 +475,7 @@ wrapperTag: div
456
475
  <div class="pf-v6-c-pagination pf-m-compact">
457
476
  <div class="pf-v6-c-pagination__page-menu">
458
477
  <button
459
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
478
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
460
479
  type="button"
461
480
  aria-expanded="false"
462
481
  aria-label="Menu toggle"
@@ -1154,12 +1173,31 @@ wrapperTag: div
1154
1173
  <div class="pf-v6-c-masthead__main">
1155
1174
  <span class="pf-v6-c-masthead__toggle">
1156
1175
  <button
1157
- class="pf-v6-c-button pf-m-plain"
1176
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1158
1177
  type="button"
1159
1178
  aria-label="Global navigation"
1160
1179
  >
1161
1180
  <span class="pf-v6-c-button__icon">
1162
- <i class="fas fa-bars" aria-hidden="true"></i>
1181
+ <svg
1182
+ viewBox="0 0 10 10"
1183
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1184
+ width="1em"
1185
+ height="1em"
1186
+ >
1187
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1188
+ <path
1189
+ class="pf-v6-c-button--hamburger-icon--middle"
1190
+ d="M1,5 L9,5"
1191
+ />
1192
+ <path
1193
+ class="pf-v6-c-button--hamburger-icon--arrow"
1194
+ d="M1,5 L1,5 L1,5"
1195
+ />
1196
+ <path
1197
+ class="pf-v6-c-button--hamburger-icon--bottom"
1198
+ d="M9,9 L1,9"
1199
+ />
1200
+ </svg>
1163
1201
  </span>
1164
1202
  </button>
1165
1203
  </span>
@@ -1267,7 +1305,7 @@ wrapperTag: div
1267
1305
  </div>
1268
1306
  <div class="pf-v6-c-toolbar__item">
1269
1307
  <button
1270
- class="pf-v6-c-menu-toggle pf-m-plain"
1308
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1271
1309
  type="button"
1272
1310
  aria-expanded="false"
1273
1311
  aria-label="Settings"
@@ -1588,7 +1626,7 @@ wrapperTag: div
1588
1626
  <div class="pf-v6-c-pagination pf-m-compact">
1589
1627
  <div class="pf-v6-c-pagination__page-menu">
1590
1628
  <button
1591
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1629
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1592
1630
  type="button"
1593
1631
  aria-expanded="false"
1594
1632
  aria-label="Menu toggle"
@@ -2205,12 +2243,31 @@ wrapperTag: div
2205
2243
  <div class="pf-v6-c-masthead__main">
2206
2244
  <span class="pf-v6-c-masthead__toggle">
2207
2245
  <button
2208
- class="pf-v6-c-button pf-m-plain"
2246
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2209
2247
  type="button"
2210
2248
  aria-label="Global navigation"
2211
2249
  >
2212
2250
  <span class="pf-v6-c-button__icon">
2213
- <i class="fas fa-bars" aria-hidden="true"></i>
2251
+ <svg
2252
+ viewBox="0 0 10 10"
2253
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2254
+ width="1em"
2255
+ height="1em"
2256
+ >
2257
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2258
+ <path
2259
+ class="pf-v6-c-button--hamburger-icon--middle"
2260
+ d="M1,5 L9,5"
2261
+ />
2262
+ <path
2263
+ class="pf-v6-c-button--hamburger-icon--arrow"
2264
+ d="M1,5 L1,5 L1,5"
2265
+ />
2266
+ <path
2267
+ class="pf-v6-c-button--hamburger-icon--bottom"
2268
+ d="M9,9 L1,9"
2269
+ />
2270
+ </svg>
2214
2271
  </span>
2215
2272
  </button>
2216
2273
  </span>
@@ -2318,7 +2375,7 @@ wrapperTag: div
2318
2375
  </div>
2319
2376
  <div class="pf-v6-c-toolbar__item">
2320
2377
  <button
2321
- class="pf-v6-c-menu-toggle pf-m-plain"
2378
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2322
2379
  type="button"
2323
2380
  aria-expanded="false"
2324
2381
  aria-label="Settings"
@@ -2583,7 +2640,7 @@ wrapperTag: div
2583
2640
  <div class="pf-v6-c-pagination pf-m-compact">
2584
2641
  <div class="pf-v6-c-pagination__page-menu">
2585
2642
  <button
2586
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2643
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2587
2644
  type="button"
2588
2645
  aria-expanded="false"
2589
2646
  aria-label="Menu toggle"
@@ -3200,12 +3257,31 @@ wrapperTag: div
3200
3257
  <div class="pf-v6-c-masthead__main">
3201
3258
  <span class="pf-v6-c-masthead__toggle">
3202
3259
  <button
3203
- class="pf-v6-c-button pf-m-plain"
3260
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3204
3261
  type="button"
3205
3262
  aria-label="Global navigation"
3206
3263
  >
3207
3264
  <span class="pf-v6-c-button__icon">
3208
- <i class="fas fa-bars" aria-hidden="true"></i>
3265
+ <svg
3266
+ viewBox="0 0 10 10"
3267
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3268
+ width="1em"
3269
+ height="1em"
3270
+ >
3271
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3272
+ <path
3273
+ class="pf-v6-c-button--hamburger-icon--middle"
3274
+ d="M1,5 L9,5"
3275
+ />
3276
+ <path
3277
+ class="pf-v6-c-button--hamburger-icon--arrow"
3278
+ d="M1,5 L1,5 L1,5"
3279
+ />
3280
+ <path
3281
+ class="pf-v6-c-button--hamburger-icon--bottom"
3282
+ d="M9,9 L1,9"
3283
+ />
3284
+ </svg>
3209
3285
  </span>
3210
3286
  </button>
3211
3287
  </span>
@@ -3313,7 +3389,7 @@ wrapperTag: div
3313
3389
  </div>
3314
3390
  <div class="pf-v6-c-toolbar__item">
3315
3391
  <button
3316
- class="pf-v6-c-menu-toggle pf-m-plain"
3392
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3317
3393
  type="button"
3318
3394
  aria-expanded="false"
3319
3395
  aria-label="Settings"
@@ -3648,7 +3724,7 @@ wrapperTag: div
3648
3724
  <div class="pf-v6-c-pagination pf-m-compact">
3649
3725
  <div class="pf-v6-c-pagination__page-menu">
3650
3726
  <button
3651
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3727
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3652
3728
  type="button"
3653
3729
  aria-expanded="false"
3654
3730
  aria-label="Menu toggle"
@@ -4313,12 +4389,31 @@ wrapperTag: div
4313
4389
  <div class="pf-v6-c-masthead__main">
4314
4390
  <span class="pf-v6-c-masthead__toggle">
4315
4391
  <button
4316
- class="pf-v6-c-button pf-m-plain"
4392
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4317
4393
  type="button"
4318
4394
  aria-label="Global navigation"
4319
4395
  >
4320
4396
  <span class="pf-v6-c-button__icon">
4321
- <i class="fas fa-bars" aria-hidden="true"></i>
4397
+ <svg
4398
+ viewBox="0 0 10 10"
4399
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4400
+ width="1em"
4401
+ height="1em"
4402
+ >
4403
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4404
+ <path
4405
+ class="pf-v6-c-button--hamburger-icon--middle"
4406
+ d="M1,5 L9,5"
4407
+ />
4408
+ <path
4409
+ class="pf-v6-c-button--hamburger-icon--arrow"
4410
+ d="M1,5 L1,5 L1,5"
4411
+ />
4412
+ <path
4413
+ class="pf-v6-c-button--hamburger-icon--bottom"
4414
+ d="M9,9 L1,9"
4415
+ />
4416
+ </svg>
4322
4417
  </span>
4323
4418
  </button>
4324
4419
  </span>
@@ -4426,7 +4521,7 @@ wrapperTag: div
4426
4521
  </div>
4427
4522
  <div class="pf-v6-c-toolbar__item">
4428
4523
  <button
4429
- class="pf-v6-c-menu-toggle pf-m-plain"
4524
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4430
4525
  type="button"
4431
4526
  aria-expanded="false"
4432
4527
  aria-label="Settings"
@@ -4773,12 +4868,31 @@ wrapperTag: div
4773
4868
  <div class="pf-v6-c-masthead__main">
4774
4869
  <span class="pf-v6-c-masthead__toggle">
4775
4870
  <button
4776
- class="pf-v6-c-button pf-m-plain"
4871
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4777
4872
  type="button"
4778
4873
  aria-label="Global navigation"
4779
4874
  >
4780
4875
  <span class="pf-v6-c-button__icon">
4781
- <i class="fas fa-bars" aria-hidden="true"></i>
4876
+ <svg
4877
+ viewBox="0 0 10 10"
4878
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4879
+ width="1em"
4880
+ height="1em"
4881
+ >
4882
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4883
+ <path
4884
+ class="pf-v6-c-button--hamburger-icon--middle"
4885
+ d="M1,5 L9,5"
4886
+ />
4887
+ <path
4888
+ class="pf-v6-c-button--hamburger-icon--arrow"
4889
+ d="M1,5 L1,5 L1,5"
4890
+ />
4891
+ <path
4892
+ class="pf-v6-c-button--hamburger-icon--bottom"
4893
+ d="M9,9 L1,9"
4894
+ />
4895
+ </svg>
4782
4896
  </span>
4783
4897
  </button>
4784
4898
  </span>
@@ -4886,7 +5000,7 @@ wrapperTag: div
4886
5000
  </div>
4887
5001
  <div class="pf-v6-c-toolbar__item">
4888
5002
  <button
4889
- class="pf-v6-c-menu-toggle pf-m-plain"
5003
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4890
5004
  type="button"
4891
5005
  aria-expanded="false"
4892
5006
  aria-label="Settings"
@@ -5060,7 +5174,7 @@ wrapperTag: div
5060
5174
  </div>
5061
5175
  <div class="pf-v6-c-pagination__page-menu">
5062
5176
  <button
5063
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5177
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5064
5178
  type="button"
5065
5179
  aria-expanded="false"
5066
5180
  aria-label="Menu toggle"
@@ -5394,12 +5508,31 @@ wrapperTag: div
5394
5508
  <div class="pf-v6-c-masthead__main">
5395
5509
  <span class="pf-v6-c-masthead__toggle">
5396
5510
  <button
5397
- class="pf-v6-c-button pf-m-plain"
5511
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
5398
5512
  type="button"
5399
5513
  aria-label="Global navigation"
5400
5514
  >
5401
5515
  <span class="pf-v6-c-button__icon">
5402
- <i class="fas fa-bars" aria-hidden="true"></i>
5516
+ <svg
5517
+ viewBox="0 0 10 10"
5518
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
5519
+ width="1em"
5520
+ height="1em"
5521
+ >
5522
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
5523
+ <path
5524
+ class="pf-v6-c-button--hamburger-icon--middle"
5525
+ d="M1,5 L9,5"
5526
+ />
5527
+ <path
5528
+ class="pf-v6-c-button--hamburger-icon--arrow"
5529
+ d="M1,5 L1,5 L1,5"
5530
+ />
5531
+ <path
5532
+ class="pf-v6-c-button--hamburger-icon--bottom"
5533
+ d="M9,9 L1,9"
5534
+ />
5535
+ </svg>
5403
5536
  </span>
5404
5537
  </button>
5405
5538
  </span>
@@ -5507,7 +5640,7 @@ wrapperTag: div
5507
5640
  </div>
5508
5641
  <div class="pf-v6-c-toolbar__item">
5509
5642
  <button
5510
- class="pf-v6-c-menu-toggle pf-m-plain"
5643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
5511
5644
  type="button"
5512
5645
  aria-expanded="false"
5513
5646
  aria-label="Settings"
@@ -5721,7 +5854,7 @@ wrapperTag: div
5721
5854
  <div class="pf-v6-c-pagination pf-m-compact">
5722
5855
  <div class="pf-v6-c-pagination__page-menu">
5723
5856
  <button
5724
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5857
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5725
5858
  type="button"
5726
5859
  aria-expanded="false"
5727
5860
  aria-label="Menu toggle"
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -19,12 +19,31 @@ section: components
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: components
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"